javascript - fullpage.js animation with onLeave and afterLoad -
i'm using fullpage.js , i'd animate 2 images second section. looks can't make work css only, picked js code documentation. check jsfiddle: http://jsfiddle.net/67oe1jvn/9/
the thing is: if scroll down second section, 2 images animated , fade in left , right sides. if change section, nothing happens... want "disappear" leave second section.
i used afterload , onload said in documentation, this:
$.fn.fullpage({ afterload: function(anchorlink, index){ var loadedsection = $(this); if(index == 1){ $('#slidetext1 #rock').animate({right:"0px"}); $('#slidetext1 #deer').animate({left:"0px"}); } }, onleave: function(index, nextindex, direction){ var leavingsection = $(this); if(index == 2 && direction =='up'){ $('#slidetext1 #rock').animate({right:"-271px"}); $('#slidetext1 #deer').animate({left:"-271px"}); } else if(index == 2 && direction == 'down'){ /* */ } } });
i'm new plugins cool if helps me :)
also saw guy posting similar question maybe can clarifying need: fullpage.js onleave event triggers .
three things:
if post jsfiddle, make sure works... because doesn't @ all.
you initializing fullpage.js twice in site. inside
myjs.js
, outside it..you can create animations css if want. check this video.
if want images dissappear again you'll have tell fullpage.js it. won't magically happen. use onleave
again , "whenever next slide not section 2, hide images".
if(nextindex != 2){ //hide images }
Comments
Post a Comment