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

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);
});
 
SCROLLTRIGGER

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

  • LATEST
  • RELATED
  • POPULAR