Q&A
html5とCSS3でサイト作成中です。
スクロールして見出しが出てきた瞬間に、見出しのボーダーをアニメーションさせて、一回ボーダーが動いたら再度スクロールが上下しても動きは繰り返さないようにしたいです。
いろいろ調べましたが、ホバー時のCSSアニメーションはありましたが、可視範囲に入ってからの見出しボーダーが動くCSSアニメーションのサンプルがなかったので困っています。
javascriptやjQueryを使う必要があればそれも教えてほしいです。
ホバー時のCSSアニメーションはできたのですが・・・
<head> <meta charset="utf-8"> <title>無題ドキュメント</title> <style> .box { width: 200px; position: relative; padding: 4px; } .box:before { content: ""; position: absolute; display: block; top: 0; left :0; background-color: #EBC70A; z-index: 1; -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .boxIn{ background-color: #fff; padding: 10px; z-index: 2; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: relative; } .box1:before { height: 100%; width: 0; } .box1:hover:before{ width: 100%; } </style> </head> <body></body><div class="box box1"> <div class="boxIn">見出し</div> </div>
回答1件
0
ベストアンサー
スクロールイベントはJavaScriptやjQueryを使用する必要があります。
スクロールが一定の範囲になったら要素のstyleを変更するという記述をjsで行い、
cssでクラスにtransitionをつけてアニメーションさせる、ということが考えられます。
少し難しいかもしれませんが、以下に参考リンクをはっておきます。
http://weboook.blog22.fc2.com/blog-entry-415.html
投稿2019/09/25 08:06
総合スコア41
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/09/26 02:56