【jQuery】簡単なスクロールアニメーションプラグインCircus Scroll tween

Circus Scroll tweenは簡単なスクロールアニメーションjQueryプラグイン。

Init script and mouse wheel settings

<script src="js/circus-scroll-tween.min.js"></script>
$('html').csInit({
wheelDelay: 300, // milliseconds
wheelDistance: 500, // pixels
wheelEase: 'easeOutQuad' // ease type
});

Adding Tween

$('.anim1').csTween({
begin: 0, // scroll position in pixels
end: 500, // scroll position in pixels
from: {
letterSpacing: '0',  
opacity: '1'
},
to: {
letterSpacing: '2vw',
opacity: '0'
},
easing: 'easeOutExpo', //  ease type
onStart: function(el){
//console.log('onStart');
},
onProgress: function(el,p){
//console.log(p);
},
onComplete: function(el){
//console.log('onComplete');
$(el).hide();
},
onReverseStart: function(el){
//console.log('onReverseStart');
$(el).show();
},
onReverseComplete: function(el){
//console.log('onReverseComplete');
}
});

csGoTo – Scrolls to defined position

$().csGoTo({
scrollPos: 500, // pixels
duration: 500,
easing: 'easeOutQuad'
});
$().csGoTo({
scrollPos: 'end', // scrolls to end of document
duration: 1000,
easing: 'easeOutQuad'
});

csGetScrollTop – Returns current scroll position

var scrollTop = $().csGetScrollTop();
  1. linear
  2. swing
  3. easeInQuad
  4. easeOutQuad
  5. easeInOutQuad
  6. easeInCubic
  7. easeOutCubic
  8. easeInOutCubic
  9. easeInQuart
  10. easeInOutQuart
  11. easeInQuint
  12. easeOutQuint
  13. easeInOutQuint
  14. easeInSine
  15. easeOutSine
  16. easeInOutSine
  17. easeInExpo
  18. easeOutExpo
  19. easeInOutExpo
  20. easeInCirc
  21. easeOutCirc
  22. easeInOutCirc
  23. easeInElastic
  24. easeOutElastic
  25. easeInOutElastic
  26. easeInBack
  27. easeOutBack
  28. easeInOutBack
  29. easeInBounce
  30. easeOutBounce
  31. easeInOutBounce
 
circus-scroll-tween

【jQuery】簡単なスクロールアニメーションプラグインCircus Scroll tween

  • LATEST
  • RELATED
  • POPULAR