Upon entering the site, I would like certain divs to animate from an offscreen position. I came across this code snippet:
$( document ).ready(function() {
$('.box-wrapper').each(function(index, element) {
setTimeout(function(){
element.classList.remove('loading');
}, index * 500);
});
});body {
overflow-x: hidden;
}
.box-wrapper {
-webkit-transition-duration: 600ms;
transition-duration: 600ms;
}
.box-wrapper.loading:nth-child(odd) {
transform: translate(100%);
-webkit-transform: translate(100%);
}
.box-wrapper.loading:nth-child(even) {
transform: translate(-100%);
-webkit-transform: translate(-100%);
}
.box-wrapper.loading:nth-child(?) {
transform: translate(-100%);
-webkit-transform: translate(-100%);
}
.box-wrapper:nth-child(odd) #box1 {
}
.box-wrapper:nth-child(even) #box2 {
}
.box-wrapper:nth-child(?) #box3 {
}
#box1 {
position: relative;
display: block;
margin: auto;
width: 100px;
height: 100px;
background-color: aqua;
}
#box2 {
position: relative;
display: block;
left:200px;
width: 200px;
height: 150px;
background-color: aqua;
}
#box3 {
position: relative;
display: block;
left:400px;
width: 600px;
height: 150px;
background-color: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="box-wrapper loading"><div id="box1"></div></div>
<div class="box-wrapper loading"><div id="box2"></div></div>
<div class="box-wrapper loading"><div id="box3"></div></div>I have successfully implemented the animation, but I am struggling to apply different animations to each box. Whenever I try to replace the "?" with "box3" or something similar, it does not work. The animation needs to be "even" or "odd," but I desire a unique animation for each box.
Any suggestions or assistance on this matter would be greatly appreciated. Thank you!