Sometimes some wonderful ideas have some unexpected results.
As a young Mengxin, I feel that other people's rotograms are always written in such a natural and atmospheric way, while my own is always from other people's place, Ctrl+V, and then I started to write by myself,
In one attempt, I found a funny thing.
HTML code
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Rotation chart</title> </head> <body> <div class="fixative"> <div class="back"></div> <div class="img" style="background-position: 0% 0;left: 0;"></div> <div class="img" style="background-position: 5% 0;left: 5%;"></div> <div class="img" style="background-position: 10% 0;left: 10%;"></div> <div class="img" style="background-position: 15% 0;left: 15%;"></div> <div class="img" style="background-position: 20% 0;left: 20%;"></div> <div class="img" style="background-position: 25% 0;left: 25%;"></div> <div class="img" style="background-position: 30% 0;left: 30%;"></div> <div class="img" style="background-position: 35% 0;left: 35%;"></div> <div class="img" style="background-position: 40% 0;left: 40%;"></div> <div class="img" style="background-position: 45% 0;left: 45%;"></div> <div class="img" style="background-position: 50% 0;left: 50%;"></div> <div class="img" style="background-position: 55% 0;left: 55%;"></div> <div class="img" style="background-position: 60% 0;left: 60%;"></div> <div class="img" style="background-position: 65% 0;left: 65%;"></div> <div class="img" style="background-position: 70% 0;left: 70%;"></div> <div class="img" style="background-position: 75% 0;left: 75%;"></div> <div class="img" style="background-position: 80% 0;left: 80%;"></div> <div class="img" style="background-position: 85% 0;left: 85%;"></div> <div class="img" style="background-position: 90% 0;left: 90%;"></div> <div class="img" style="background-position: 95% 0;left: 95%;"></div> </div> </body> </html>
CSS code
*{
margin: 0;
padding: 0;
}
.slideshow{
width: 100%;
height: 500px;
min-width: 1200px;
position: relative;
overflow: hidden;
}
.fixative{
width: 100%;
height: 500px;
background-image: url(First picture);
position: absolute;
top: 0;
left: 0;
background-size: 100% 100%;
z-index: -1;
}
.img{
width:0;
height:500px;
background-image: url(Second picture);
background-size: 2100% 500px;
transition: 0.5s;
position: absolute;
}JS code
setInterval(function(){
var allimgs=document.getElementsByClassName("img");
var i=0;
var time=setInterval(function(){
allimgs[i].style.width="0";
i+=1;
if(i==20){clearInterval(time)}
},70)
setTimeout(function(){
var allimgs=document.getElementsByClassName("img");
var i=0;
var time=setInterval(function(){
allimgs[i].style.width="5.2%";
i+=1;
if(i==20){clearInterval(time)}
},70)
},4000)
},8000)After changing CSS and JS code, there is another effect. You can try it.
CSS Replace some codes
.img{
width:5.2%;
height:0;
background-image: url(Second picture);
background-size: 2100% 500px;
transition: 0.5s;
position: absolute;
}
JS Replace some codes
setInterval(function(){
var allimgs=document.getElementsByClassName("img");
var i=0;
var time=setInterval(function(){
allimgs[i].style.height="500px";
i+=1;
if(i==20){clearInterval(time)}
},70)
setTimeout(function(){
var allimgs=document.getElementsByClassName("img");
var i=0;
var time=setInterval(function(){
allimgs[i].style.height="0px";
i+=1;
if(i==20){clearInterval(time)}
},70)
},4000)
},8000)Sometimes it's to try. After trying, there will always be different gains, even if it's just for fun. Friends who are free can have a look.