Javascriptでスクロールアニメーションを実装しています。
1点の画像だけであれば問題なさそうなのですが、複数(10点ほど)のSVGのpointの値を効率よく書き変えたいです。
ライブラリはsnap.svgとscrollmagicです。
アニメーションはスクロールした際に.maskを持つpolygonがあれば、
pointsの値を変更して、クリッピングの形に添うように画像をふわっと出したいと思っています。
ただ、フリーレイアウトのデザインの為、各maskクラスにつけるpointsの座標を毎度書き換えたいです。
(例: 下記javascriptのコメントアウト部分の様に)
pointだけ変更する同じアニメーションなのでfor文で書いているのですが、良い書き方をご存知の方がいらっしゃいましたらご教示頂けると幸いです。
よろしくお願い致します。
html
1<div class="layer_base"> 2<svg class="mask_svgPc" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 1280 840"> 3 <defs> 4 <clippath id="mask_a"> 5 <polygon class="mask" points="869,517 466,517 466,383 869,226"></polygon> 6 </clippath> 7 </defs> 8 <image clip-path="url(#mask_a)" xlink:href="/assets/img/a.jpg" x="0" y="-100" width="1080" height="900"></image> 9 <defs> 10 <clippath id="mask_b"> 11 <polygon class="mask" points="1295,907 894,907 894,623 1295,623"></polygon> 12 </clippath> 13 </defs> 14 <image class="add_scroll" clip-path="url(#mask_b)" xlink:href="/assets/img/b.jpg" x="800" y="300" width="640" height="640"></image></svg> 15</div>
javascript
1class ProductMask { 2 constructor(path) { 3 this.ANIMATION_CLASS = 'is-anim'; 4 let $section = document.querySelectorAll('.mask:not(.is-anim)'); 5 let fv_elements = Snap( '.mask' ); 6 let fv_path = "869,517 466,517 466,83 869,26 "; 7 /* 8 追加したいpoint値 9 let fv_path_b = "1295,907 894,907 894,423 1295,423 "; 10 */ 11 if ($section.length === null) { 12 return; 13 } 14 let controller = new ScrollMagic.Controller(); 15 for (let i = 0; i < $section.length; i++) { 16 17 let scene = new ScrollMagic.Scene({ 18 triggerElement: $section[i], 19 triggerHook: 'onEnter', 20 reverse: false, 21 offset: 400 22 }) 23 .addTo(controller); 24 scene.on('enter', ()=> { 25 fv_elements.animate({ points: fv_path }, 300); 26 }); 27 scene.on('end', ()=> { 28 scene.destroy(true); 29 }); 30 } 31 } 32} 33new ProductMask();
回答1件
あなたの回答
tips
プレビュー