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

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

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

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1474閲覧

表示されたらアニメーションさせる方法を教えてください。

mamo29

総合スコア5

SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2019/10/19 08:09

動くアイコンを作りたく、LAZY LINE PAINTER というサイトで動くSVGファイルを生成しました。
生成し、実装もできたのですが、スクロールして表示されたらアニメーション発火させたく、いろいろ調べてみたのですが、なかなかうまくいかず、
どう書いたらいいか分かりません。
教えていただけますと助かります。よろしくお願いいたします。

HTML

1<svg version="1.1" id="cycleicon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 150 150" style="enable-background:new 0 0 150 150;" xml:space="preserve" data-llp-composed="true" class="lazy-line-painter"> 2<g> 3 <path class="st0" d="M132.37,116.82c-5.68,8.13-13.19,15.17-22.35,20.46c-33.48,19.33-76.29,7.86-95.61-25.62" data-llp-id="cycleicon-0" data-llp-duration="500" data-llp-delay="0" fill-opacity="0" style=""/> 4 <polyline class="st0" points="12.27,119.01 14.29,111.48 21.83,113.5 &#9;" data-llp-id="cycleicon-1" data-llp-duration="500" data-llp-delay="500" fill-opacity="0" style=""/> 5</g> 6<g> 7 <path class="st1" d="M11.48,106.14c-4.2-8.99-6.54-19.01-6.54-29.59c0-38.66,31.34-69.99,69.99-69.99" data-llp-id="cycleicon-2" data-llp-duration="500" data-llp-delay="1000" fill-opacity="0" style=""/> 8 <polyline class="st1" points="69.62,1.04 75.14,6.56 69.62,12.07 &#9;" data-llp-id="cycleicon-3" data-llp-duration="500" data-llp-delay="1500" fill-opacity="0" style=""/> 9</g> 10<g> 11 <path class="st2" d="M81.08,6.97c9.88,0.86,19.74,3.84,28.9,9.13c33.48,19.33,44.95,62.14,25.62,95.61" data-llp-id="cycleicon-4" data-llp-duration="500" data-llp-delay="2000" fill-opacity="0" style=""/> 12 <polyline class="st2" points="143.02,109.87 135.49,111.89 133.47,104.36 &#9;" data-llp-id="cycleicon-5" data-llp-duration="500" data-llp-delay="2500" fill-opacity="0" style=""/> 13</g> 14</svg>

js

1 2(function(){ 3document.onreadystatechange = () => { 4 5 if (document.readyState === 'complete') { 6 7 /** 8 * Setup your Lazy Line element. 9 * see README file for more settings 10 */ 11 12 let el = document.querySelector('#cycleicon'); 13 let myAnimation = new LazyLinePainter(el, {"ease":"easeLinear","strokeWidth":1,"strokeOpacity":1,"strokeCap":"square"}); 14 myAnimation.paint(); 15 } 16 } 17 18 })(); 19 20// 発火するタイミングを設定 21var $window = $(window), 22 $skill = $('#cycleicon'), 23 topSkill = $skill.offset().top; 24var Flag = false; 25 26// そこまでスクロールしたら実行 27$window.scroll(function() { 28 if ($window.scrollTop() > topSkill && 29 Flag === false) { 30 skill_animation(); 31 Flag = true; 32 } 33

CSS

1#cycleicon { 2 width: 7rem; 3 height: 7rem; 4 position: relative; 5 overflow: visible; 6} 7.st0{fill:none;stroke:#687DDE;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} 8.st1{fill:none;stroke:#339489;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} 9.st2{fill:none;stroke:#F05F5F;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} 10

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

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

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

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

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

oikashinoa

2019/10/19 12:09

質問文を修正して下さい。 > なかなかうまくいかず うまくってなんですか?表示するけどアニメーションしないとかそもそも表示しないとかなんとでも意味が取れてしまいます。 あと、Codepen(https://codepen.io)などで、他の人のブラウザでもあなたと全く同じ状況を見せれるようにしましょう。
oikashinoa

2019/10/19 13:05

あと、以下の関数の内容も書いたほうがいいですよ > skill_animation();
guest

回答1

0

ベストアンサー

スクロール量と#cycleicon要素のy座標を比較してるからではと思いました。

この画像は白領域が見えてる範囲です。「スクロールして表示されたら」から左側のようなものを期待しているのだと思いました。(現状右)

もしそうなら$window.scrollTop() > topSkill部分を以下のように修正します。

// スクロール量 + 表示領域の高さ const displayedHeight = $window.scrollTop() + $window.innerHeight(); // `#cycleicon`のy座標 + `#cycleicon`の高さ const ignitionPosition = $skill.offset().top + $skill.height(); if (displayedHeight > ignitionPosition /* ... */) { /* ... */ }

投稿2019/10/19 20:30

nju33

総合スコア48

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

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

mamo29

2019/10/23 11:07

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問