Q&A
ご回答ありがとうございます。
inview.jsはheadの中に挿入済みなんです。
他のスライドアニメーションは動いているので、リンクの方法も問題ないと思います。
前提・実現したいこと
現在、WEB制作を学習中でサイト模写(https://code-step.com/lp-menu/)をしております。
jQueryのisInviewというプラグインを使用してスクロールにて発火するフェードインアニメーションを作成したいです。
発生している問題・エラーメッセージ
jQueryのremoveClassでhtml要素は消えるのですがaddClassで要素が浮かび上がってきません。
該当のソースコード
#### html
<div class="sample"> <div class="human"> <div class="mask"></div> <div class="shoulder"></div> </div> <div class="text"> <p>テキスト</p> <p>テキスト</p> </div> </div>####css(アニメーション部分のみ記載)
.voice .sample .fadeIn {
-webkit-animation: balloon 0.5s ease-out 0s 1 forwards;
animation: balloon 0.5s ease-out 0s 1 forwards;
}
@-webkit-keyframes balloon {
0% {
-webkit-transform: scale(0.1);
transform: scale(0.1);
opacity: 0;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
####jQuery
$(function() {
$('.sample ').on('inview', function(event, isInView) {
if (isInView) {
//表示領域に入った時
$(this).addClass('fadeIn');
}
else {
//表示領域から出た時
$(this).removeClass('fadeIn');
$(this).css('opacity',0); //非表示にしておく
}
});
});
試したこと
・リセットCSSを消してみた
・jQueryのfadeInをif文に実装してみたが動かず
・プラグインを使用しないjQueryでも動かない
・模写をしているサイトの他のスライドアニメーションでの可動は確認済み
・htmlの<div class="sample">に複数クラスでfadeInを入れてみた
####ここにより詳細な情報を記載してください。
使用しているPCはM1 MacBook air
テキストエディタはvsCode
sassを使用
よろしくお願いします。
回答2件
0
自己解決
解決できました。
CSSの.sampleを消すこと(sassの入れ子の位置を移動)で反応する様になりました。
htmlにアニメーションが反応し放しだったと思います。
torsg様ありがとうございました。
投稿2021/07/26 05:20
総合スコア13
0
こんにちは。
もしかして、こちらのプラグインが必要ではないでしょうか
投稿2021/07/25 06:07
退会済みユーザー
総合スコア0
あーすみません、使っていると書かれていましたね、失礼しました。
CSSのセレクタを
.sample.fadeIn
とすると、どうでしょうか。
sampleクラス かつ fadeInクラス という意味です。
とんでもないです。
classを変えてみましたが結果同じでした。
sassを使用しているので親要素の.voiceが付与されています。
removeClassは動いているのでCSSのセレクタ関係もおそらく問題ないと思います。
当方、これから仕事なので返信遅れるかもです。
相談に乗っていただきありがとうございます。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。