こちらの記事は
- jQuery
- CSS
- JavaScript
- HTML
の知識がある方向けの記事です。
画面に映った瞬間にふわふわと順番に表示させたい
まずは下記をご覧ください。
こちらの表示方法を解説します。
サイトに表示させるのがhtml、見た目を調整するのがCSS、動的な操作（画面に映った時のアクションなど）がJS、
JSを簡単な記述で整理させて表示させるのがjQueryになっているのでそれらを合わせないと表示されません。
以下記述になります。
HTML
<ol class="クラス名">
<li class="effect_fadein">リストの中に入れるコンテンツ</li>
<li class="effect_fadein">リストの中に入れるコンテンツ</li>
<li class="effect_fadein">リストの中に入れるコンテンツ</li>
</ol>CSS
.クラス名{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.クラス名>li {
transition: opacity .47s cubic-bezier(.175,.885,.32,1.275),
transform .47s cubic-bezier(.175,.885,.32,1.275),
-webkit-transform .47s cubic-bezier(.175,.885,.32,1.275);
width: 32.5%;
}
.クラス名>li:nth-of-type(3n-2) {
transition-delay: 0s;
}
.クラス名>li:nth-of-type(3n-1) {
transition-delay: .2s;
}
.クラス名>li:nth-of-type(3n) {
transition-delay: .4s;
}CSSのクラス名と書いているところは適宜入れてください。
JS
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.min.js"></script>
<script>
jQuery(function() {
jQuery('.effect_fadein').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
if(isInView){
jQuery(this).stop().addClass('effect_def');
}
else{
jQuery(this).stop().removeClass('effect_def');
}
});
});
</script>
JS表記にあるjqueryやinviewなどCDN（外部のファイル）から引用していますが
サーバーに入れるのをおすすめします。
コメントを残す