ScrollTriggerの設置

CSS部分

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

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

HTML部分

ヘッダー部

<script src="/wp-content/themes/lightning_child_sample/scrolltrigger.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function()
{
	var trigger = new ScrollTrigger();
});
</script>

1

2

3

4

5

6

7

8

document.addEventListener('DOMContentLoaded', function()

{

var trigger = new ScrollTrigger();

});

</script>

ボディー部

<body>
…
<div data-scroll=””>コンテンツ</div>
…
</body>

カテゴリー: ブログ、ホームページ制作