html - jquery move text like movie credits -
does know jquery plugin or css3 technique easy way move text elements, 10 h1's inside div top bottom of div?
so
<div class="container"> <h1>content</h1> <h1>content</h1> <h1>content</h1> <h1>content</h1> <h1>content</h1> <h1>content</h1> ... </div>
i want h1's slide continuously , div area filled h1's sliding downwards movie credits.
i tried jquery cycle plugin cant second slide(h1) start before first 1 finishes animation.
here code:
$('.container').cycle({ fx: 'scrolldown', sync: 1, timeout: 1000, speed: 6000, continuous: 1, cleartypenobg: true });
also tried this:
$('.container').cycle({ fx: 'custom', sync: 1, cssbefore: { top: 0, display: 'block' }, animin: { top: 0 }, animout: { top: 332 }, cssafter: { display: 'none' }, delay: -1000 }); });
this should want....
html
<div id="container"> <div id="fancy_h1_wrap"> <h1>content</h1> <h1>content</h1> <h1>content</h1> <h1>content</h1> <h1>content</h1> <h1>content</h1> </div> </div>
jquery
function fun(){ $('#fancy_h1_wrap').css('top', ''); $('#fancy_h1_wrap').animate({top:"-100%"}, 5000, fun); } fun();
css
#container { overflow:hidden; } #fancy_h1_wrap { display:block; width:100%; height:100%; position:absolute; top:100%; }
Comments
Post a Comment