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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

JavaScript

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

関数

関数(ファンクション・メソッド・サブルーチンとも呼ばれる)は、はプログラムのコードの一部であり、ある特定のタスクを処理するように設計されたものです。

HTML

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

CSS

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

Q&A

1回答

894閲覧

JavaScriptのアニメーションを実行したい

akito-miyazato

総合スコア5

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

JavaScript

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

関数

関数(ファンクション・メソッド・サブルーチンとも呼ばれる)は、はプログラムのコードの一部であり、ある特定のタスクを処理するように設計されたものです。

HTML

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

CSS

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

0グッド

0クリップ

投稿2021/02/22 16:06

前提・実現したいこと

JavaScriptでスクロールアニメーションを作っています。
(A)スクロールしたらcontentsがふわっと出てくるアニメーションと、
(B)contentsの中の文字が順番に出てくるアニメーションを作りたいのですが、
(A)は一回アニメーションが発生したら終わるのですが、(B)はスクロールをするたびにアニメーションが発生してしまいます。
僕としては(B)も一回だけアニメーションが発生するように実装したいです。

発生している問題・エラーメッセージ

(B)がスクロールするたびにアニメーションが発生してしまう。

該当のソースコード

// こちらが(A)のアニメーションです。

const $contentAnimation = document.querySelectorAll('.js-animation');

document.addEventListener('scroll',()=>{
for (let i = 0; i < $contentAnimation.length; i++){
const $getElementDistance = $contentAnimation[i].getBoundingClientRect().top
+ $contentAnimation[i].clientHeight * .6;

if (window.innerHeight > $getElementDistance){ $contentAnimation[i].classList.add('show') ScrollAnimation(); } }

});

// こちらが(B)のアニメーションです。

const $skillsAnimationElement = document.querySelectorAll('.skillsAnimation');

function ScrollAnimation(){
for (let s = 0; s < $skillsAnimationElement.length; s++){
const targetSkills = $skillsAnimationElement[s],
skillsTexts = targetSkills.textContent,
skillsTextsArray = [];

targetSkills.textContent = ''; for (let j = 0; j < skillsTexts.split('').length; j++){ let s = skillsTexts.split('')[j]; if (s === '' ) { skillsTextsArray.push(''); }else{ skillsTextsArray.push('<span><span style="animation-delay: ' + ((j * .5) + .3) + 's;">' + s + '</span></span>') } } for (let k =0; k < skillsTextsArray.length; k++){ targetSkills.innerHTML += skillsTextsArray[k]; } }

}

試したこと

(B)で作った関数(ScrollAnimation())を(A)のif文の画面の幅の方が大きくなったときに、呼び出しています。
これだとスクロールするたびに(B)が実行されてしまいます。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

他にも$contentAnimationにshowというクラスが追加されたら(B)を実行するというif文も別途作ってみましたが、
それだとアニメーション自体が動かなくなりました。

どなたかこの問題を解決していただけると助かります。
どうかよろしくお願いいたします。

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

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

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

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

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

guest

回答1

0

ご提示のコードがJSのファイルだけなので頭の中で動かしてみました。
が、よくわかりませんでした。

Bのコードはテキストを細かく区切って遅延を差し込んでいるのかな?
であるなら、遅延を差し込む区切りを<p>タグとか<div>とか…は違うか。

スクロールをトリガーにしているのでスクロールされるたびにScrollAnimation()が実行されるけど、
const $skillsAnimationElement←この配列の中身が変わってないので何度も繰り返すのだと考えられます。
グローバルで定義しているから何度呼んでも全部のテキストを処理することになるのかなと。

スクロールした量と要素の位置を比較して、配列から外していく処理を記述するか、

js

1skillsTextsArray.push('<span><span style="animation-delay: ' + ((j * .5) + .3) + 's;">' + s + '</span></span>')

ここのspanにclass='show'`としてしまうとか。
CSSのコード次第だけど、

js

1$contentAnimation[i].classList.add('show') //;が無いような?

こっちの要素にはshowを付けて一度だけの処理で終わるとすれば、
テキストの方にも同じCSSが効きそうな気がします。
「このclassが付いたらアニメーションを止める」みたいな記述がしてあるかと。

htmlとcssのコードがあれば修正したJSを貼るところですが、
無いのでこのあたりでご勘弁を。

投稿2021/02/22 16:46

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

akito-miyazato

2021/02/23 01:10

ご回答ありがとうございます。 情報が少なくて申し訳ございません。 HTMLとCSSの情報もお送りしますので、ぜひご回答いただけますと幸いです。 //(A)// (A)に関しては各コンテンツに'show'が追加されるようにしています。 htmlは  <div class="skills js-animation"> <div class="skills-box"> <div class="skills-item"> この中にtitleやicon,messageなどの要素も入ってます。 </div> </div> </div> CSSは .skills{ opacity: 0; transition: .6s; transform: translateY(-50px); } .skills.show{ opacity: 1; transform: none; } //(B)// (B)に関しては skillsの中のレベルを表す星マークを順番に出したいと思ってます。 HTMLは、上記の要素の中に星マークを入れております。 <div class="skills js-animation"> <div class="skills-box"> <div class="skills-item"> <div class="skillsAnimation">★★★★☆</div> </div> </div> </div> CSSは横か文字が出てくるように実装しています。 @keyframes skillsShow { 0%{ opacity: 0; transform: translateX(200px); } 100%{ opacity: 1; transform: none; } } .skillsAnimation span{ display: inline-block; } .skillsAnimation span{ margin: 10px 0; animation: skillsShow .8s backwards; } これで先ほどのJavaScriptだとスクロールするたびに星のアニメーションが実行されてしまいます。 星のアニメーションはskillsのコンテンツが(A)によってふわっと出てきたときに1回だけ実行したいです。 大変お手数おかけいたしますが、ぜひご回答よろしくお願いいたします。
退会済みユーザー

退会済みユーザー

2021/02/23 15:00 編集

スクロールするたびに全部☆を拾っているのが原因なので、 showがついていない一番上の1個のみ取得して引数として関数に渡してみました。 関数を実行する条件は画面上に見える☆の高さまで…かな? 関数の中にあったループは外しました。 渡した1個のみ操作すればいいので。 動くようになったコードを捨てるのももったいないので貼っておきますね。 差分チェックしながら調整をしてみてください。 ※html、cssは特に弄ってないので割愛させていただきますね。 const $contentAnimation = document.querySelectorAll('.js-animation'); document.addEventListener('scroll',()=>{ for (let i = 0; i < $contentAnimation.length; i++){ const $getElementDistance = $contentAnimation[i].getBoundingClientRect().top + $contentAnimation[i].clientHeight * .6; if (window.innerHeight > $getElementDistance){ $contentAnimation[i].classList.add('show'); } } let item = document.querySelector('.skillsAnimation:not(.show)'); const getItemDistance = item.getBoundingClientRect().top + item.clientHeight * .6; if (window.innerHeight > getItemDistance){ item.classList.add('show'); ScrollAnimation(item); } }); function ScrollAnimation(item){ const targetSkills = item; skillsTexts = targetSkills.textContent; skillsTextsArray = []; targetSkills.textContent = ''; for (let j = 0; j < skillsTexts.split('').length; j++){ let s = skillsTexts.split('')[j]; if (s === '' ) { skillsTextsArray.push(''); } else { skillsTextsArray.push('<span><span style="animation-delay: ' + ((j * .5) + .3) + 's;">' + s + '</span></span>'); } } for (let k =0; k < skillsTextsArray.length; k++){ targetSkills.innerHTML += skillsTextsArray[k]; } } 追記 すみません、動作が少しおかしいのでもう一度確認します。 追記 頭が寝てました。DOM操作用のJSなのにhead内に置いてました。動きます。 追記 追記を下に動かしました。念のためにここに貼ったコードで再確認しましたが動きました。 お騒がせしてすみません。拙いコードですが参考までにどうぞ。
akito-miyazato

2021/02/24 11:02

ご丁寧にありがとうございます。 おかげさまで動きました。 今後もしわからないことがございましたら、ぜひ教えたいただけますと幸いです。 本当にありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問