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

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

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

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

Q&A

解決済

1回答

329閲覧

for文の中でclass構文を複数回呼び出したい

mojao_0227

総合スコア24

JavaScript

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

0グッド

2クリップ

投稿2018/03/07 06:14

###解決したいこと
現在下記の様なスクロールアニメーションを作成しています。
アニメーションをclass構文を作って、各スクロールの位置に来たら発火させる様に作ったつもりなのですが、
1回目(sectionA)でProductMaskを発火させると、後の(sectionB)以降のsvgアニメーションが動いてしまいます。

スクロールアニメーションの"sectionA"、"sectionB"の位置に来た時に、内包しているsectionのsvgを発火させたいです。
解決方法をご存知の方いらっしゃいましたらご教示頂けると幸いです。

よろしくお願い致します。

javascript

1//このアニメーションを複数回呼び出したいです 2class ProductMask { 3 constructor(swing) { 4 const elements = document.querySelectorAll("svg[clip-path]"); 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 maskPolygon.animate({points: maskPolygon.attr("to")}, swing); 10 } 11 } 12} 13 14class TitleAnim { 15 constructor() { 16 const elements = document.querySelectorAll(".eg_holizon g:not(.is-anim)"); 17 for(let i = 0, len = elements.length; i < len; i++){ 18 const element = elements[i]; 19 element.classList.add("is-anim"); 20 } 21 } 22} 23 24//スクロール 25function scrollProducts() { 26 const controller = new ScrollMagic.Controller(); 27 28 //sectionA 29 const elementsBlock = document.querySelectorAll('.story-wrapper:not(.is-anim)'); 30 for(let i = 0, len = elementsBlock.length; i < len; i++) { 31 const element = elementsBlock[i]; 32 new ScrollMagic.Scene({ 33 triggerElement: element, 34 triggerHook: "onEnter", 35 reverse: false, 36 offset: 400 37 }).on('start', function() { 38 new TitleAnim(); 39 setTimeout(function(){ 40 var maskAnim = new ProductMask(300); 41 }, 600); 42 }).on("end", () => scene.destroy(true)).addTo(controller); 43 } 44 //sectionB 45 const elementsProduct = document.querySelectorAll('.label_anim'); 46 for(let i = 0, len = elementsProduct.length; i < len; i++) { 47 const element = elementsProduct[i]; 48 new ScrollMagic.Scene({ 49 triggerElement: element, 50 triggerHook: "onEnter", 51 reverse: false, 52 offset: 400 53 }).on('start', function() { 54 setTimeout(function(){ 55 var featureAnim = new ProductMask(800); 56 }, 2500); 57 }).on("end", () => scene.destroy(true)).addTo(controller); 58 } 59} 60scrollProducts(); 61

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

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

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

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

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

Lhankor_Mhy

2018/03/07 06:42

見た感じクラスにする必要はないと思うのですが、何か理由とかありますか?
mojao_0227

2018/03/07 06:47

複数回同じ様なアニメーションを呼び出したいのでクラスにしてみたのですが、他にも良い書き方ありますでしょうか...?
defghi1977

2018/03/07 06:57

というか, 動作原理を理解せずにコードをコピペするからこうなる. クラス設計するのであれば, 個々のアニメーションに必要なパラメータは何かについて明らかにしなければ正しく動くはずがありません.
Lhankor_Mhy

2018/03/07 07:15

特段の理由がないなら、関数でよいと思います。ところで、いろいろプラグインを使っているようなので分からないのですが、document.querySelectorAll("svg[clip-path]") は「各スクロールの位置」の svg を取得できるのでしょうか?
mojao_0227

2018/03/07 08:54

ご返信ありがとうございます、確認した所、querySelectorAllで各スクロール位置のsvgを取得できていませんでした。クラスを付け替えて無事スクロール値取得できました!ありがとうございました。
kei344

2018/03/07 10:05

まだ質問が「受付中」になっていますが、いったんご自身の回答をもって「解決済」にされてはいかがでしょうか。
guest

回答1

0

自己解決

productMaskの

javascript

1const elements = document.querySelectorAll("svg[clip-path]");

でスクロールの値を取れていない = 全てのSVGを取得してしまっていたので
各sectionのクラスをつける事で回避しました。

javascript

1const elements = document.querySelectorAll(".section svg[clip-path]");

ありがとうございました。

投稿2018/03/07 16:55

mojao_0227

総合スコア24

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問