в этой статье узнаете об интересной идеи, про анимационных эффект наклона изображение, которое зависит от клика, а точнее о наведение картинки. Также можете подключить счетчик, который здесь по умолчанию выставлен, но больше всего здесь представлен сам трюк, который многим знаком.
Где вы наводите клик на правую сторону, то изображение красиво будет поворачиваться, это зависит от самого клика, где он будет находиться.
var slideOut = $('.homeSlide.active'), slideIn = $('.homeSlide.active').next('.homeSlide');
goToNextSlide(slideOut, slideIn);
});
// Go to next slide - pass 2 parameters - slideOut and slideIn function goToNextSlide(slideOut, slideIn){ var tl = new TimelineLite(), slideOutH1 = slideOut.find('h1'), slideOutP = slideOut.find('p'), slideInH1 = slideIn.find('h1'), slideInP = slideIn.find('p'), index = slideIn.index(), size = $('.top .homeSlide').length;
if(slideIn.length !== 0){
// go to the next slide timeline tl // move the new slide (the one about to enter viewport) out of the viewport and add class active .set(slideIn, {y: '100%', autoAlpha: 1, className: '+=active'}) // remove class active from the currently active slide (slideOut) .set(slideOut, {className: '-=active'}) // animate H1 and p of the active slide up and fade them out .to([slideOutH1,slideOutP], 0.3, {y: '-=15px', autoAlpha: 0, ease:Power3.easeInOut}, 0) // animate active slide up (out of the viewport) .to(slideOut, 0.5, {y: '-100%', ease:Power3.easeInOut}, 0) // animate new slide up (from out of the viewport) .to(slideIn, 0.5, {y: '-=100%', ease:Power3.easeInOut}, 0) // animate H1 and P of the new slide up and fade them in .fromTo([slideInH1,slideInP], 0.3, {y: '+=20px', autoAlpha: 0}, {autoAlpha: 1, y: 0, ease:Power1.easeInOut}, 0.3);
}
// Fade out arrow up and fade in arrow down
// Fade in arrow down TweenLite.set($slideNavPrev, {autoAlpha: 1});
// Fade out arrow up on last slide if(index === size){ TweenLite.to($slideNavNext, 0.3, {autoAlpha: 0.2, ease:Linear.easeNone}); }
}
// Navigation click - go to the Next Slide $slideNavNext.click(function (e) { e.preventDefault();
var slideOut = $('.homeSlide.active'), slideIn = $('.homeSlide.active').next('.homeSlide');
goToNextSlide(slideOut, slideIn);
});
// Go to previous slide - pass 2 parameters - slideOut and slideIn function goToPreviousSlide(slideOut, slideIn){
var tl = new TimelineLite(), slideOutH1 = slideOut.find('h1'), slideOutP = slideOut.find('p'), slideInH1 = slideIn.find('h1'), slideInP = slideIn.find('p'), index = slideIn.index(), size = $('.top .homeSlide').length;
if(slideIn.length !== 0){
// go to the previous slide timeline tl // move the new slide (the one about to enter viewport) out of the viewport (to the top) .set(slideIn, {y: '-100%', autoAlpha: 1, className: '+=active'}) // remove class active from the currently active slide (slideOut) .set(slideOut, {className: '-=active'}) // animate H1 and p of the active slide down and fade them out .to([slideOutH1,slideOutP], 0.3, {y: '+=15px', autoAlpha: 0, ease:Power3.easeInOut}, 0) // animate active slide down (out of the viewport) .to(slideOut, 0.5, {y: '100%', ease:Power3.easeInOut}, 0) // animate new slide down (from out of the viewport) .to(slideIn, 0.5, {y: '+=100%', ease:Power3.easeInOut}, '-=0.5') // animate H1 and P of the new slide down and fade them in .fromTo([slideInH1,slideInP], 0.3, {y: '-=20px', autoAlpha: 0}, {autoAlpha: 1, y: 0, ease:Power1.easeInOut}, 0.3);
}
// Fade in arrow up TweenLite.set($slideNavNext, {autoAlpha: 1});
// Fade out arrow down on first slide if(index === 1){ TweenLite.to($slideNavPrev, 0.3, {autoAlpha: 0.2, ease:Linear.easeNone}); }
}
// Navigation click - go to the Previous Slide $slideNavPrev.click(function (e) { e.preventDefault();
var slideOut = $('.homeSlide.active'), slideIn = $('.homeSlide.active').prev('.homeSlide');
