jQuery

【jQuery】ページをスクロールしているときにスクロール要素のアニメーションをアニメートするAnimate on scroll

March 20, 2018
Animate on scroll

Animate on scrollはユーザーがページをスクロールしているときにスクロール要素のアニメーションをアニメートするjQueryプラグイン。

HTML – use data-animation attribute with animation name

<h1 data-animation="name">Animated element</h1>

HTML – local animation offset – use data-offset attribute with pixels

<h1 data-animation="name" data-offset="number">Animated element</h1>
<h1 data-animation="bounceIn" data-offset="500">Hello World!</h1>

JavaScript simple configuration

$(document).ready(function ($) {
     $().animateOnScroll();
});

JavaScript advanced configuration

スクロール可能な要素とグローバルオフセットをプログラムで設定できます。

$(document).ready(function ($) {
     var args = {
          container: node,
          offset : number
     };
     $().animateOnScroll(args);

});