前提・実現したいこと
webデザイン勉強中の者です。初めてこちらを利用させていただきます。
html/cssでホームページ作成中で、スクロールさせると要素がふわっとフェードインして表示できるようにしたいです。
ネットで調べながら参考になるサイトがあったので、見よう見まねで実装してみたけれどうまく表示してくれません。
根本的な部分が間違っているのかもしれませんが、初心者なものでそれすらもわからない状況なのでこちらに質問させていただきました。ご回答のほどよろしくお願いいたします。
発生している問題・エラーメッセージ
スクロールしてもエフェクトがかかる前の状態のままで、エフェクト後の状態にならない。
該当のソースコード
html この部分をフェードインさせたいです
<div class="concept_box"> <div class="concept"> <img src="img/concept.png" alt="コンセプト"> </div> <div class="concept_text"> <p>テキストが入ります。テキストが入ります。テキストが入ります。<br>テキストが入ります。テキストが入ります。テキストが入ります。<br>テキストが入ります。テキストが入ります。テキストが入ります。</p> </div> </div>
css
.concept_box { display: flex; margin-top: 300px; opacity : 0.1; transform : translate(0, 50px); transition : all 500ms; } .concept_box.scrollin { opacity : 1; transform : translate(0, 0); }
js
<script type="text/javascript" src="js/jquery-3.4.1.min.js"> $(function() { $(window).scroll(function() { $('.concept_box').each(function() { var elemPos = $(this).offset().top; var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll > elemPos - windowHeight + 200) { $(this).addClass('scrollin'); } }); }); }); </script>
試したこと
jsの階層も間違っていないと思うのですが。
ご回答よろしお願い致します。
回答1件
あなたの回答
tips
プレビュー