質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

522閲覧

svgのpointを書き換えたい

mojao_0227

総合スコア24

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/03/06 03:06

編集2018/03/06 05:19

Javascriptでスクロールアニメーションを実装しています。
1点の画像だけであれば問題なさそうなのですが、複数(10点ほど)のSVGのpointの値を効率よく書き変えたいです。
ライブラリはsnap.svgscrollmagicです。

アニメーションはスクロールした際に.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();

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

defghi1977

2018/03/06 03:33

提示したコードはそもそも動いているのですか?
mojao_0227

2018/03/06 04:08

こちら私の方では動いている様なのですが、不備などありますでしょうか...?
defghi1977

2018/03/06 04:34

確かにコードそのものは動いているようですが, これだけではあなたがどのようなアニメーションを求めているのかが読み取れません. もう少し詳しく説明して下さい.
guest

回答1

0

ベストアンサー

NOTE:
あなたのやりたいことを完璧に把握することが出来なかったため, 私ならこうするという例を示します.


例えばこのように.

HTML

1<svg width="0" height="0"> 2 <clipPath id="cp1" clipPathUnits="objectBoundingBox"> 3 <polygon points="0,1 1,0 1,1 0,1" to="0,0 1,0 1,1 0,1"/> 4 </clipPath> 5 <clipPath id="cp2" clipPathUnits="objectBoundingBox"> 6 <polygon points="0,1 1,0 1,1 0,1" to="0,0 1,0 1,1 0,1"/> 7 </clipPath> 8</svg> 9 10<svg width="500" height="500" clip-path="url(#cp1)"> 11 <image preserveAspectRatio="none" xlink:href="a.jpg" width="100%" height="100%"/> 12</svg> 13<svg width="500" height="500" clip-path="url(#cp2)"> 14 <image preserveAspectRatio="none" xlink:href="b.jpg" width="100%" height="100%"/> 15</svg>

JavaScript

1"use strict"; 2{ 3 const elements = document.querySelectorAll("svg[clip-path]"); 4 const controller = new ScrollMagic.Controller(); 5 for(let i = 0, len = elements.length; i < len; i++){ 6 const element = elements[i]; 7 const maskId = element.getAttribute("clip-path").match(/url((#.+))/)[1]; 8 const maskPolygon = Snap(`${maskId}>polygon`); 9 const scene = new ScrollMagic.Scene({ 10 triggerElement: element, 11 triggerHook: "onEnter", 12 reverse: false, 13 offset: 400 14 }); 15 scene.on("enter", () => maskPolygon.animate({points: maskPolygon.attr("to")}, 300)); 16 scene.on("end", () => scene.destroy(true)); 17 scene.addTo(controller); 18 } 19}
  • 複数のmask要素は一箇所(svg要素)にまとめる.
  • polygon要素にはアニメーション前後の座標情報を定義しておく.(toは本PGのための非標準属性)

投稿2018/03/06 07:12

defghi1977

総合スコア4756

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mojao_0227

2018/03/06 08:53

html側にアニメーション前後の座標を明記できるのですね、 大変参考になりました、ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問