前提・実現したいこと
お世話になります。
スクロールが止まった時に、特定の要素にクラスを追加し、数秒後(秒数任意)に追加したクラスを
削除するような設定を行いたいのですが、クラスを削除する設定方法がわかりません。
クラスが追加された要素はCSSでのアニメーションが始まりますが、アニメーションはループせず
一回で終わってほしいのでクラスを削除してアニメーションを止める想定です。
アニメーション自体はスクロールする度に動いてほしいですですが、クラスが追加されるタイミングはスクロール中
ではなく、スクロールが止まったタイミングとなります。
クラス追加からクラス削除までの流れ
- 画面をスクロールしスクロールを止める
- 特定の要素にクラス追加
- 数秒後に追加したクラス削除
該当のソースコード
HTML
1<div class="fix-img"><img src="img/test.png" width="225" height="347" alt=""/></div>
CSS
1.gel { 2 position: absolute; 3 z-index: 1; 4 animation: skew 2.3s linear infinite; 5} 6 7@keyframes skew { 8 0% {transform: skew(0deg, 0deg);} 9 5% {transform: skew(5deg, 4.2deg);} 10 10% {transform: skew(-4deg, -3deg);} 11 15% {transform: skew(3deg, 2.2deg);} 12 20% {transform: skew(-2deg, -1.5deg);} 13 25% {transform: skew(0.9deg, 0.9deg);} 14 30% {transform: skew(-0.6deg, -0.6deg);} 15 35% {transform: skew(0.3deg, 0.3deg);} 16 40% {transform: skew(-0.2deg, -0.2deg);} 17 45% {transform: skew(0.1deg, 0.1deg);} 18 50% {transform: skew(0deg, 0deg);} 19}
JS
1var timer = false; 2$(window).scroll(function(){ 3 if( timer !== false ){ 4 clearTimeout( timer ); 5 } 6 timer = setTimeout(function(){ 7 $(".fix-img img").addClass("gel") 8 }, 200 ); 9});
試したこと
単純に「.removeClass」を入れてクラスを削除するようにしてみました。
動きとしましては、ある程度希望の動き(クラス追加~クラス削除まで)できたのですが、
クラスが削除される秒数になる前にスクロールをするとクラスが削除された状態のままになったり、
クラス追加された要素の挙動がおかしくなりました。
JS
1var timer = false; 2$(window).scroll(function(){ 3 if( timer !== false ){ 4 clearTimeout( timer ); 5 } 6 timer = setTimeout(function(){ 7 $(".fix-img img").addClass("gel") 8 }, 200 ); 9 10 setTimeout(function(){ 11 $(".fix-img img").removeClass("gel") 12 }, 1500 ); 13});
補足情報(FW/ツールのバージョンなど)
上手く説明出来ていないかもしれませんが、宜しくお願い致します。
回答1件
あなたの回答
tips
プレビュー