I need to know how to infinitely loop this animation. It is a text scroll animation and I need it to repeat after it's finished.
Here is the jQuery:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".boxtext").ready(function(){
$(".boxtext").animate({bottom:"600px"},50000);
});
});
</script>
Here is the CSS for ".boxtext"
.boxtext {
position:absolute;
bottom:-300px;
width:470px;
height:310px;
font-size:25px;
font-family:trajan pro;
color:white;
}
Looping an animation causes it to repeat. You can loop animations in Advanced mode. Each element's animation can be looped separately, or you can loop a more complex animation involving multiple elements.
The animate() method performs a custom animation of a set of CSS properties. This method changes an element from one state to another with CSS styles. The CSS property value is changed gradually, to create an animated effect.
jQuery Animations - The animate() Method The jQuery animate() method is used to create custom animations. Syntax: $(selector). animate({params},speed,callback);
Make it a function and have it call itself as a callback:
$(document).ready(function(){
scroll();
}
function scroll() {
$(".boxtext").css("bottom", "-300px");
$(".boxtext").animate({bottom:"600px"}, 50000, scroll);
}
Keep in mind, this won't be very fluid.
EDIT: I wasn't thinking earlier. My mistake.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With