Blog

HOME > Web > JQuery > 【jQuery】要素を下からフェードインさせる方法

【jQuery】要素を下からフェードインさせる方法

2019/03/25

JQuery

備忘録です。

要素が下からフェードインしてくるページってありますよね。
その効果をつける方法です。

参考サイト
ウィンドウをスクロールすると下からふわっとコンテンツがフェードインする実装

html

<ul>
  <li class="animation"><img src="image" alt=""></li>
  <li class="animation"><img src="image" alt=""></li>
  <li class="animation"><img src="image" alt=""></li>
  <li class="animation"><img src="image" alt=""></li>
  <li class="animation"><img src="image" alt=""></li>
  <li class="animation"><img src="image" alt=""></li>
</ul>

CSS

ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 750px;
    margin: 0 auto;
    padding: 50px 25px;
}
li{
    width: 48%;
    margin: 0 0 100px;
}
img{
    width: 100%;
    height: auto;
}
/*アニメーション要素のスタイル*/
.animation{
    opacity : 0;
    visibility: hidden;
    transition: 1s;
    transform: translateY(30px);
}
/*アニメーション要素までスクロールした時のスタイル*/
.active{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

JS

$(function(){
    $(window).on('load scroll',function (){
	$('.animation').each(function(){
	//ターゲットの位置を取得
	var target = $(this).offset().top;
	//スクロール量を取得
	var scroll = $(window).scrollTop();
	//ウィンドウの高さを取得
	var height = $(window).height();
	//ターゲットまでスクロールするとフェードインする
	if (scroll > target - height){
		//クラスを付与
		$(this).addClass('active');
	}
    });   
});
});

サンプル

カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

神社仏閣ホームーページ制作

ホームページ制作問合せ

口コミロボ