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

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

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

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

Q&A

解決済

1回答

450閲覧

JSとCSSをつかって同じアニメーションを繰り返し作動させたい

kana0701

総合スコア28

CSS3

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

0グッド

0クリップ

投稿2018/12/18 14:38

編集2018/12/18 14:42

前提・実現したいこと

スクロールして指定した位置に来ると画像がふわっと浮き出てくるものを、同じページで複数使いたいです。

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

一番最初しか作動せず、二個目以降は常に非表示になってしまいます。

該当のソースコード

js

1$('#animation').css('visibility','hidden'); 2$(window).scroll(function(){ 3 var windowHeight = $(window).height(), 4 topWindow = $(window).scrollTop(); 5 $('#animation').each(function(){ 6 var targetPosition = $(this).offset().top; 7 if(topWindow > targetPosition - windowHeight + 100){ 8 $(this).addClass("fadeInDown"); 9 } 10 }); 11}); 12 13 14$('#animation2').css('visibility','hidden'); 15$(window).scroll(function(){ 16 var windowHeight = $(window).height(), 17 topWindow = $(window).scrollTop(); 18 $('#animation2').each(function(){ 19 var targetPosition = $(this).offset().top; 20 if(topWindow > targetPosition - windowHeight + 50){ 21 $(this).addClass("fadeInDown2"); 22 } 23 }); 24}); 25 26$('#animation3').css('visibility','hidden'); 27$(window).scroll(function(){ 28 var windowHeight = $(window).height(), 29 topWindow = $(window).scrollTop(); 30 $('#animation3').each(function(){ 31 var targetPosition = $(this).offset().top; 32 if(topWindow > targetPosition - windowHeight + 100){ 33 $(this).addClass("fadeInDown3"); 34 } 35 }); 36}); 37 38$('#animation4').css('visibility','hidden'); 39$(window).scroll(function(){ 40 var windowHeight = $(window).height(), 41 topWindow = $(window).scrollTop(); 42 $('#animation4').each(function(){ 43 var targetPosition = $(this).offset().top; 44 if(topWindow > targetPosition - windowHeight + 100){ 45 $(this).addClass("fadeInDown4"); 46 } 47 }); 48});

css

1 2 @-webkit-keyframes fadeInDown { 3 0% { opacity: 0; -webkit-transform: translateY(-20px); } 4 50% { opacity: 0; -webkit-transform: translateY(-10px); } 5 100% { opacity: 1; -webkit-transform: translateY(0); } 6 } 7 @keyframes fadeInDown { 8 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 9 50% { opacity: 0; -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } 10 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 11 } 12 13.box{ 14 visibility: hidden; 15} 16 17.fadeInDown { 18 -webkit-animation-fill-mode:both; 19 -ms-animation-fill-mode:both; 20 animation-fill-mode:both; 21 -webkit-animation-duration:1s; 22 -ms-animation-duration:1s; 23 animation-duration:1s; 24 -webkit-animation-name: fadeInDown; 25 animation-name: fadeInDown; 26 visibility: visible !important; 27} 28.fadeInDown2 { 29 -webkit-animation-fill-mode:both; 30 -ms-animation-fill-mode:both; 31 animation-fill-mode:both; 32 -webkit-animation-duration:1s; 33 -ms-animation-duration:1s; 34 animation-duration:1s; 35 animation-delay:0.3s; 36 -webkit-animation-name: fadeInDown; 37 animation-name: fadeInDown; 38 visibility: visible !important; 39} 40 41.fadeInDown3 { 42 -webkit-animation-fill-mode:both; 43 -ms-animation-fill-mode:both; 44 animation-fill-mode:both; 45 -webkit-animation-duration:1s; 46 -ms-animation-duration:1s; 47 animation-duration:1s; 48 animation-delay:0.6s; 49 -webkit-animation-name: fadeInDown; 50 animation-name: fadeInDown; 51 visibility: visible !important; 52} 53 54.fadeInDown4 { 55 -webkit-animation-fill-mode:both; 56 -ms-animation-fill-mode:both; 57 animation-fill-mode:both; 58 -webkit-animation-duration:1s; 59 -ms-animation-duration:1s; 60 animation-duration:1s; 61 animation-delay:0.9s; 62 -webkit-animation-name: fadeInDown; 63 animation-name: fadeInDown; 64 visibility: visible !important; 65}

html

1<div class="box"> 2 <div><p class="cf" id="animation"><img src="" alt="" width="900"></p></div> 3 <div><p class="cf" id="animation2"><img src="" alt="" width="900"></p></div> 4 <div><p class="cf" id="animation3"><img src="" alt="" width="900"></p></div> 5 <div><p class="cf" id="animation4"><img src="" alt="" width="900"></p></div> 6</div> 7<div class="box"> 8 <div><p class="cf" id="animation"><img src="" alt="" width="900"></p></div> 9 <div><p class="cf" id="animation2"><img src="" alt="" width="900"></p></div> 10 <div><p class="cf" id="animation3"><img src="" alt="" width="900"></p></div> 11 <div><p class="cf" id="animation4"><img src="" alt="" width="900"></p></div> 12 </div> 13<div class="box"> 14 <div><p class="cf" id="animation"><img src="" alt="" width="900"></p></div> 15 <div><p class="cf" id="animation2"><img src="" alt="" width="900"></p></div> 16 <div><p class="cf" id="animation3"><img src="" alt="" width="900"></p></div> 17 <div><p class="cf" id="animation4"><img src="" alt="" width="900"></p></div> 18 </div>

補足情報

imgのソースは消してありますが実際ははいっています。
HTMLとCSSは初心者程度の知識でjsは全く知識がないのでどうしたらいいのか全く分かりません。
調べるにもどう調べたらいいのか分からず、教えていただけると助かります。
またふわっと浮き出てくる動きは同じアニメーションを使っているのですがjsもつかったときの
まとめて書く書き方が分からず、仕方なくひとつずつ書きました。
まとめて書く方法がありましたら教えていただきたいです。

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

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

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

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

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

guest

回答1

0

ベストアンサー

id属性は個々のページ上に1回しか使わないという暗黙のルールがあり、javasciptの場合、最初に読み込んだIDしか処理しません。よって、上のようなプログラムだと最初のbox群の4つのidしか読み込まなくなります。

そのためにclass属性を使います。またjQueryの$(this)が存在するのは、その複数あるclassの中から、選んだ要素を用いてイベントを実行させるためです。

また、現状4種類かつ3回記述されているidは全部同じ動きを指定しているようなので、全部一つのクラス名animationに変更して問題ないと思います。

javascript

1$(window).scroll(function(){ 2 var windowHeight = $(window).height(), 3 topWindow = $(window).scrollTop(); 4 $('.animation').each(function(){ 5 var targetPosition = $(this).offset().top; 6 if(topWindow > targetPosition - windowHeight + 100){ 7 $(this).addClass("fadeInDown"); 8 } 9 }); 10});

補足:IDは一回しか記述できませんが、classは並列表記も可能です。なので
class="cf animation" という記述もOKです。

投稿2018/12/19 01:03

編集2018/12/20 01:31
FKM

総合スコア3608

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

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

kana0701

2018/12/19 01:29

回答ありがとうございます。 ですがクラス名をanimationにして書き換えると 一番最初のBOXも非表示になり、スクロールしても出てこなくなってしまいました。
FKM

2018/12/19 02:01

非表示になるのは最初の一行目による制御です。ですが、その後スクロールが制御されえないのは $(window).scrollが原因ですね。 $(window).scrollだと読み込み直後しか反応しないので、 $(document).on('scroll',function(){… に変えてみてください。
FKM

2018/12/19 05:24 編集

こっちも実装したらうまくいきましたよ。eachの部分のセレクタも同じclass指定していますか? あと、冗長なスクリプトもCSSも一個だけでいけますので、テストページを参考にしてみてください。 テストページ http://motoflabo.s500.xrea.com/anime.php
kana0701

2018/12/21 07:43

お返事遅くなり申し訳ございません。 とても分かりやすくありがとうございます! 画像は時間差で表示させたいのですが、この方法でもできるのでしょうか? 表示させたい画像のサイズが50px程度と小さいのでスクロールした瞬間にすべて表示されてしまて、、、 上から順番にふわっと表示させたいです。 何度もすみません、、、
FKM

2018/12/21 07:52

あとは、現在100ピクセルという少ない単位で表示させる制御をかけているので、そこをもっと高い数値に設定しておく方法もあります。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問