お世話になります。
現在作成中のサイトが、
動作が重くなってしまいました。
原因はjQueryの多用かと思います。
そこで、コードの書き方を短縮すれば動作が軽量化されると思い、
模索したのですが、js初心者なため、イマイチ理解できず質問させていただきます。
script部分は以下になります。
<script> var controller = new ScrollMagic.Controller(); $(function () { var scene = new ScrollMagic.Scene({triggerElement: "#pin2" ,triggerHook : "onLeave"}) .setPin("#pin2") .addTo(controller); }); $(function () { var scene = new ScrollMagic.Scene({ triggerElement: "#targetDiv" ,duration: 500 ,triggerHook : "onLeave"}) .setPin("#textArea") .addTo(controller); }); $(function () { var scene = new ScrollMagic.Scene({ triggerElement: "#targetDiv2" ,duration: 500 ,triggerHook : "onLeave"}) .setPin("#textArea2") .addTo(controller); }); $(function () { var scene = new ScrollMagic.Scene({ triggerElement: "#targetDiv3" ,duration: 500 ,triggerHook : "onLeave"}) .setPin("#textArea3") .addTo(controller); }); $(function () { var scene = new ScrollMagic.Scene({ triggerElement: "#targetDiv4" ,duration: 500 ,triggerHook : "onLeave"}) .setPin("#textArea4") .addTo(controller); }); $(function () { var scene = new ScrollMagic.Scene({ triggerElement: "#targetDiv5" ,duration: 500 ,triggerHook : "onLeave"}) .setPin("#textArea5") .addTo(controller); }); $(function () { var scene = new ScrollMagic.Scene({ triggerElement: "#targetDiv6" ,duration: 500 ,triggerHook : "onLeave"}) .setPin("#textArea6") .addTo(controller); }); $(function () { var scene = new ScrollMagic.Scene({ triggerElement: "#targetDiv7" ,duration: 500 ,triggerHook : "onLeave"}) .setPin("#textArea7") .addTo(controller); }); $(function () { var scene = new ScrollMagic.Scene({ triggerElement: "#targetDiv8" ,duration: 100 ,triggerHook : "onLeave"}) .setPin("#textArea8") .addTo(controller); }); $(function () { var scene = new ScrollMagic.Scene({ triggerElement: "#targetDiv9" ,duration: 500 ,triggerHook : "onLeave"}) .setPin("#textArea9") .addTo(controller); }); </script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="js/crossfade.jquery.js"></script> <script> $(function(){ $('.crossfade-01').crossfade({ threshold: 0.1 }); $('.crossfade-02').crossfade({ threshold: 0.1 }); $('.crossfade-03').crossfade({ threshold: 0.1 }); $('.crossfade-04').crossfade({ threshold: 0.1 }); $('.crossfade-05').crossfade({ threshold: 0.1 }); $('.crossfade-06').crossfade({ threshold: 0.1 }); $('.crossfade-07').crossfade({ threshold: 0.1 }); $('.crossfade-08').crossfade({ threshold: 0.1 }); $('.crossfade-09').crossfade({ threshold: 0.1 }); }); </script> <script type="text/javascript" src="js/jquery-scrollInTurn.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.fadeimg').scrollInTurn({ selector: 'img', fadeInSpeed : 1000, delaySpeed : 3000 }); $('.fade').scrollInTurn({ selector: 'p', fadeInSpeed : 2000, delaySpeed : 1000 }); }); </script> <script type="text/javascript"> $(function(){ $("#toggle").click(function(){ $("#menu").slideToggle(); return false; }); $(window).resize(function(){ var win = $(window).width(); var p = 768; if(win > p){ $("#menu").show(); } else { $("#menu").hide(); } }); }); </script>
スクロールに対応したアニメーションがほとんどですが、
短縮記述は可能でしょうか
よろしくお願いいたします。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。