scrollmagicで複数に同じクラスを付ける場合

「scroll-fade」というクラスがついた要素までスクロールすると、その要素に「show」クラスをつけて表示させたいのですが、複数の要素に同じクラスをつけると、最初の要素がすべての要素のトリガーになってしまいます。

同じクラスを使いつつ、それぞれの要素に達したときに表示させるにはどういう風にすればいいのでしょうか？

html
1<p class="scroll-fade">画面領域に入ったらフェードイン</p>
2
3<p class="scroll-fade">画面領域に入ったらフェードイン</p>
4
5<p class="scroll-fade">画面領域に入ったらフェードイン</p>

css
1.scroll-fade {
2	position: relative;
3	opacity: 0;
4	transform: translateY(20px);
5	transition: 2s;
6}
7.scroll-fade.show {
8	opacity: 1;
9	transform: translateY(0px);
10}

Jquery
1$(function(){
2  var controller = new ScrollMagic.Controller();
3  var scene = new ScrollMagic.Scene({
4    triggerElement: '.scroll-fade',
5    triggerHook: "onEnter",
6    reverse: false
7  })
8    .setClassToggle('.scroll-fade', "show")
9    .addTo(controller);
10});

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは、each関数をつかえば出来ると思われますが以下のコードでどうでしょうか？

jQuery
1$(function () {
2    var controller = new ScrollMagic.Controller();
3    $(".scroll-fade").each(function (i, node) {
4        var scene = new ScrollMagic.Scene({
5            triggerElement: node,
6            triggerHook: "onEnter",
7            reverse: false,
8        })
9            .setClassToggle(node, "show")
10            .addTo(controller);
11    });
12});