要素が可視範囲に入ったらTweenMaxを発火させたいです。(ソースもなるべくスマートに)
「TweenMax スクロール」で調べるとScrollMagicとの併用が書かれた記事がありますが、
下記実装するとフェードインさせたい要素ごとに"move1""move2"とクラスを付けていき、jsの記述が膨大になってしまいます。
html
1 <section> 2 <div class="section-in"> 3 <ul> 4 <li class="move1">フェードインで表示される</li> 5 <li class="move1">フェードインで表示される</li> 6 <li class="move1">フェードインで表示される</li> 7 </ul> 8 </div> 9 </section> 10 11 <section> 12 <div class="section-in"> 13 <ul> 14 <li class="move2">フェードインで表示される</li> 15 <li class="move2">フェードインで表示される</li> 16 <li class="move2">フェードインで表示される</li> 17 </ul> 18 </div> 19 </section> 20 21 <section> 22 <div class="section-in"> 23 <ul> 24 <li class="move3">フェードインで表示される</li> 25 <li class="move3">フェードインで表示される</li> 26 <li class="move3">フェードインで表示される</li> 27 </ul> 28 </div> 29 </section> 30
js
1 var controller = new ScrollMagic(); 2 var move1 = TweenMax.staggerFromTo(".move1", 1, { 3 opacity: 0, 4 y: 35 5 }, { 6 opacity: 1, 7 y: 0 8 }, 0.2); 9 var scene = new ScrollScene({ 10 triggerElement: ".move1", 11 reverse: false 12 }) 13 .setTween(move1) 14 .addTo(controller); 15 16 var move1 = TweenMax.staggerFromTo(".move2", 1, { 17 opacity: 0, 18 y: 35 19 }, { 20 opacity: 1, 21 y: 0 22 }, 0.2); 23 var scene = new ScrollScene({ 24 triggerElement: ".move2", 25 reverse: false 26 }) 27 .setTween(move2) 28 .addTo(controller); 29 30}); 31 32以下続く
jsの記述をもっとスマートにするため、ScrollMagicは使わず、下記実装しようとしたのですが、動作せず。。。。
html
1 <section> 2 <div class="section-in"> 3 <ul> 4 <li class="move">フェードインで表示される</li> 5 <li class="move">フェードインで表示される</li> 6 <li class="move">フェードインで表示される</li> 7 </ul> 8 </div> 9 </section> 10 11 <section> 12 <div class="section-in"> 13 <ul> 14 <li class="move">フェードインで表示される</li> 15 <li class="move">フェードインで表示される</li> 16 <li class="move">フェードインで表示される</li> 17 </ul> 18 </div> 19 </section> 20 21 <section> 22 <div class="section-in"> 23 <ul> 24 <li class="move">フェードインで表示される</li> 25 <li class="move">フェードインで表示される</li> 26 <li class="move">フェードインで表示される</li> 27 </ul> 28 </div> 29 </section> 30
js
1$(window).scroll(function (){ 2 var animationFlag = false; 3 $("section").each(function(){ 4 var imgPos = $(this).offset().top; 5 var scroll = $(window).scrollTop(); 6 var windowHeight = $(window).height(); 7 if (scroll > imgPos - windowHeight + windowHeight - 300){ 8 if(!animationFlag) { 9 animationFlag = true; 10 TweenMax.staggerFromTo(".move", 1, { 11 opacity: 0, 12 x: -35 13 }, { 14 delay: 0.8, 15 opacity: 1, 16 x: 0 17 }); 18 } 19 } 20 }); 21 });
解決方法のご教示をお願いいたします!
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/04/25 03:16
2019/04/27 06:41
2019/04/27 10:21