Monday, 9 September 2013

Repeat title slide cycle

Repeat title slide cycle

Slide titles then returns to the first and stop. I want to start again flow.
HTML:
<div id="overflow-animate">
<div id="animate-container">
<h1 class="giga remove-bottom">title1</h1>
<h1 class="giga remove-bottom">title2</h1>
<h1 class="giga remove-bottom">title3</h1>
<h1 class="giga remove-bottom">title4</h1>
<h1 class="giga remove-bottom">title5</h1>
</div>
</div>
JS:
//SET DELAY TO MODIFY THE DELAY OF THE INTRO ANIMATION
//INTRO ANIMATION
var delay = 1200;
var titleheight = $('#animate-container h1').outerHeight();
var count = $('#animate-container').height() / titleheight;
for (var i = 0; i < count; i++) {
var distance = titleheight * i;
$('#animate-container').delay(delay).animate({'top': '-' + distance +
'px'}, 400, 'easeOutBounce');
}
$('#animate-container').delay(800).animate({'top': '0px'}, 500,
'easeOutBounce');
if ($(".home .cover i").length > 0 && $(window).width() > 767) {
$('.home .cover i').delay((count * delay) + (delay *
2)).animate({'top': $('.cover i').offset().top - 180}, 500,
'easeOutBounce', function() {
//$('.cover h3').fadeIn(500);
});
}
//END WINDOW ANIMATION
Fiddle: http://jsfiddle.net/YH5QV/

No comments:

Post a Comment