【jQuery】画面内に入った要素にクラスを付与
パララックス
「パララックス フェードイン」とかのワードで検索していただくと、同じようなシステムが出てくると思います。
初期状態では、画面内には何も表示されていません。しかし、下にスクロールしていくと…
（画像だけだと伝わりにくいですが）文章が左からフッとフェードインしてきました。
実際のコード
<div class="head">
<h1>FadeIn</h1>
</div>
<div class="body">
<p class="body__para">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim voluptatem quasi quis maxime laboriosam, veritatis nemo culpa inventore provident quos eos exercitationem impedit nisi id velit doloremque ratione porro aut?
Dolor inventore aspernatur aperiam excepturi est nobis cumque possimus numquam ducimus ipsum, ut voluptates accusantium minima ex tempore illum veritatis accusamus reiciendis pariatur libero quis. Neque aperiam blanditiis qui id.
Dolorem fuga dolorum reprehenderit excepturi, qui atque laborum ratione tempore corporis quaerat at ducimus magnam a similique placeat sed ex, laudantium earum, ut non vero perspiciatis unde quae. Dignissimos, consequuntur.
At dolor animi rem voluptatum illum, perspiciatis quae maiores! Quod earum tempore qui id alias minus odio sint quae omnis ullam est dolorem deserunt amet dignissimos, laboriosam accusantium et atque.
Atque pariatur hic porro voluptatem, quia unde repellendus numquam distinctio sed. Adipisci eum laudantium qui nam. Ad perspiciatis, eaque, sint, earum odit corrupti voluptate labore velit vitae doloribus esse nostrum.
</p>
<p class="body__para">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim voluptatem quasi quis maxime laboriosam, veritatis nemo culpa inventore provident quos eos exercitationem impedit nisi id velit doloremque ratione porro aut?
Dolor inventore aspernatur aperiam excepturi est nobis cumque possimus numquam ducimus ipsum, ut voluptates accusantium minima ex tempore illum veritatis accusamus reiciendis pariatur libero quis. Neque aperiam blanditiis qui id.
Dolorem fuga dolorum reprehenderit excepturi, qui atque laborum ratione tempore corporis quaerat at ducimus magnam a similique placeat sed ex, laudantium earum, ut non vero perspiciatis unde quae. Dignissimos, consequuntur.
At dolor animi rem voluptatum illum, perspiciatis quae maiores! Quod earum tempore qui id alias minus odio sint quae omnis ullam est dolorem deserunt amet dignissimos, laboriosam accusantium et atque.
Atque pariatur hic porro voluptatem, quia unde repellendus numquam distinctio sed. Adipisci eum laudantium qui nam. Ad perspiciatis, eaque, sint, earum odit corrupti voluptate labore velit vitae doloribus esse nostrum.
</p>
<p class="body__para">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim voluptatem quasi quis maxime laboriosam, veritatis nemo culpa inventore provident quos eos exercitationem impedit nisi id velit doloremque ratione porro aut?
Dolor inventore aspernatur aperiam excepturi est nobis cumque possimus numquam ducimus ipsum, ut voluptates accusantium minima ex tempore illum veritatis accusamus reiciendis pariatur libero quis. Neque aperiam blanditiis qui id.
Dolorem fuga dolorum reprehenderit excepturi, qui atque laborum ratione tempore corporis quaerat at ducimus magnam a similique placeat sed ex, laudantium earum, ut non vero perspiciatis unde quae. Dignissimos, consequuntur.
At dolor animi rem voluptatum illum, perspiciatis quae maiores! Quod earum tempore qui id alias minus odio sint quae omnis ullam est dolorem deserunt amet dignissimos, laboriosam accusantium et atque.
Atque pariatur hic porro voluptatem, quia unde repellendus numquam distinctio sed. Adipisci eum laudantium qui nam. Ad perspiciatis, eaque, sint, earum odit corrupti voluptate labore velit vitae doloribus esse nostrum.
</p>
<p class="body__para">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim voluptatem quasi quis maxime laboriosam, veritatis nemo culpa inventore provident quos eos exercitationem impedit nisi id velit doloremque ratione porro aut?
Dolor inventore aspernatur aperiam excepturi est nobis cumque possimus numquam ducimus ipsum, ut voluptates accusantium minima ex tempore illum veritatis accusamus reiciendis pariatur libero quis. Neque aperiam blanditiis qui id.
Dolorem fuga dolorum reprehenderit excepturi, qui atque laborum ratione tempore corporis quaerat at ducimus magnam a similique placeat sed ex, laudantium earum, ut non vero perspiciatis unde quae. Dignissimos, consequuntur.
At dolor animi rem voluptatum illum, perspiciatis quae maiores! Quod earum tempore qui id alias minus odio sint quae omnis ullam est dolorem deserunt amet dignissimos, laboriosam accusantium et atque.
Atque pariatur hic porro voluptatem, quia unde repellendus numquam distinctio sed. Adipisci eum laudantium qui nam. Ad perspiciatis, eaque, sint, earum odit corrupti voluptate labore velit vitae doloribus esse nostrum.
</p>
<p class="body__para">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim voluptatem quasi quis maxime laboriosam, veritatis nemo culpa inventore provident quos eos exercitationem impedit nisi id velit doloremque ratione porro aut?
Dolor inventore aspernatur aperiam excepturi est nobis cumque possimus numquam ducimus ipsum, ut voluptates accusantium minima ex tempore illum veritatis accusamus reiciendis pariatur libero quis. Neque aperiam blanditiis qui id.
Dolorem fuga dolorum reprehenderit excepturi, qui atque laborum ratione tempore corporis quaerat at ducimus magnam a similique placeat sed ex, laudantium earum, ut non vero perspiciatis unde quae. Dignissimos, consequuntur.
At dolor animi rem voluptatum illum, perspiciatis quae maiores! Quod earum tempore qui id alias minus odio sint quae omnis ullam est dolorem deserunt amet dignissimos, laboriosam accusantium et atque.
Atque pariatur hic porro voluptatem, quia unde repellendus numquam distinctio sed. Adipisci eum laudantium qui nam. Ad perspiciatis, eaque, sint, earum odit corrupti voluptate labore velit vitae doloribus esse nostrum.
</p>
</div>.head {
margin-bottom: 100px;
}
.head h1 {
font-size: 24px;
letter-spacing: 2.2px;
}
.body__para {
position: relative;
left: -25px;
margin-bottom: 70px;
font-size: 14px;
letter-spacing: 1.4px;
line-height: 1.4;
opacity: 0;
transition: all 1.4s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.body__para.active {
left: 0;
opacity: 1;
}$(function(){
$(window).scroll(function(){
$('.body__para').each(function(){
var scroll = $(window).scrollTop();
var pos = $(this).offset().top;
var delay = 400;
if (scroll > pos - delay){
$(this).addClass('active');
}
});
});
})解説
大まかな流れは以下のようになります。
1.フェードインさせたい要素(.body__para)を対象とする
2.スクロール量を取得、変数に格納
3.要素のy座標を取得、変数に格納
4.スクロール量が要素のy座標よりも大きくったらクラス(“active”)を付与
$(window).scroll(function(){
$('.body__para').each(function(){画面をスクロールした時に、フェードインさせたい要素(.body__para)それぞれに対して処理を施します。
var scroll = $(window).scrollTop(); //スクロール量を取得
var pos = $(this).offset().top; //要素のy座標を取得
var delay = 400; //アニメーション演出のディレイスクロール量・要素のy座標について、それぞれ変数に格納していきます。
ブラウザ画面を対象要素としてscrollTopメソッドを利用することで、スクロール量を取得します。記述形式は【対象要素.scrollTop()】になります。
次に、対象要素のy座標をoffsetメソッドで取得します。【対象要素.offset().top】で取得可能です。
if (scroll > pos - delay){ //スクロール量 > 要素のy座標 - ディレイ
$(this).addClass('active');
}if構文を用いて「要素のy座標よりもスクロール量が大きくなった場合」と言う条件を設定し、addClassメソッドでクラス付与の処理を設定します。
しかし、このままだと要素の現れるタイミングが画面外に消えていくギリギリになってしまいます。そこで、「delay」という変数を定義して計算式に組み込んで、フェードインのタイミングを調整します。「要素のy座標 − ディレイ」の図式によって、実際の座標よりも少し高めの位置で判定を起こすことができるのです。
以上で完成です！
こちらの記事はいかがでしたか？
+1
+1
+1
+1
