generate animation as if it were a marquee

0 votes
asked Sep 13, 2017 by yavg

I do not know much about css, but I think this code could help me generate a marquee. basically I want the animation that is done with the boxes, be done with the texts.

enter image description hereMy main problem occurs with the animation, it is not very fluid, I want it to be more fluid and it starts from the end of the container to the left. How can I do it? I would be very grateful.

http://jsfiddle.net/joof5dhx/

<div id="horizontalScroller"> <div>it is a message a little more of 100 characteres</div> <div>it is a message a little more of 110 characteres</div> <div>it is a message a little more of 120 characteres</div> <div>it is a message a little more of 130 characteres</div>
</div>
window.horizontalScroller = function($elem) { var left = parseInt($elem.css("left")); var temp = -1 * $('#horizontalScroller > div').height(); if(left < temp) { left = $('#horizontalScroller').height() $elem.css("left", left); } $elem.animate({ left: (parseInt(left)-60) }, 900, function () { window.horizontalScroller($(this)) });
}
$(document).ready(function() { var i = 0; $("#horizontalScroller > div").each(function () { $(this).css("left", i); i += 60; window.horizontalScroller($(this)); });
});

http://jsfiddle.net/hhcbtyyg/

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.
Anti-spam verification:
To avoid this verification in future, please log in or register.
Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
Website Online Counter

...