【Javascript】スクロールアニメーションScrollTrigger

Javascript

SCROLLTRIGGER

July 8, 2016

ScrollTriggerはユーザーがスクロールするとスクロール位置に基づいて、CSS3アニメーションをクラスによってトリガされます。

JS

ScrollTrigger.min.jsを追加。ScrollTrigger.init()を呼び出し

<script src="ScrollTrigger.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(){
    ScrollTrigger.init();
});
</script>

HTML要素にdata-scroll属性を追加

<div data-scroll></div>

CSS

.invisible {
    transition: opacity 0.5s ease;
    opacity: 0.0;
}

.visible {
    transition: opacity 0.5s ease;
    opacity: 1.0;
}

オプション

toggle() data-scroll="toggle(.animateIn, .animateOut)"
offset() data-scroll="offset(0,50px)"はyに対する50pxオフセット
addWidth data-scroll="addWidth"
addHeight data-scroll="addHeight"
centerHorizontal data-scroll="centerHorizontal"
centerVertical data-scroll="centerVertical"
once data-scroll="once"

Callbacks

<div data-scroll data-scroll-showCallback="alert('Visible')" data-scroll-hideCallback="alert('Invisible')"></div>

Custom animations

document.addEventListener('DOMContentLoaded', function(){
  var callback = function(scrollLeft, scrollTop, width, height){
    // i can do anything now with the height of the viewport
    // or the scrollPosition in the scrollElement. 'this' refers to
    // the html object that contains the data-scroll attribute.

    // if you are done with the callback you can detach it
    // using the ScrollTrigger.detach() method.
    ScrollTrigger.detach(callback);
  };

  ScrollTrigger.init();
  ScrollTrigger.attach(callback);
});

Latest Posts

Related Posts