【jQuery+CSS】スクロールでふわっと要素をフェードイン表示する方法

【jQuery+CSS】スクロールでふわっと要素をフェードイン表示する方法

2021年12月5日
WEB制作

スクロールで要素をフェードイン表示させたい

サイトに動きをつけたい時に手軽に使用できる、フェードインアニメーションのコードです。

CSS

.fadeIn {
  opacity: 0;
  transition-duration: 500ms;
  transition-property: opacity, transform;
}

.fadeIn-up {
  transform: translate(0, 50px);
}

.fadeIn-down {
  transform: translate(0, -50px);
}

.fadeIn-left {
  transform: translate(-50px, 0);
}

.fadeIn-right {
  transform: translate(50px, 0);
}

.scrollIn {
  opacity: 1;
  transform: translate(0, 0);
}

JS(jQuery)

$(window).scroll(function () {
    $('.fadeIn').each(function () {
        var scroll = $(window).scrollTop(); // 現在のスクロール位置
        var offset = $(this).offset().top; // 対象の上からの位置
        var windowHeight = $(window).height(); // ウィンドウの高さ
        if (scroll > offset - windowHeight + 200) {
            $(this).addClass("scrollIn");
        }
    });
});
<div class="fadeIn">
 <h2>フェードイン</h2>
</div>
<div class="fadeIn fadeIn-up">
 <h2>下からフェードイン</h2>
</div>

 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です