ミギムキ

[CSS] ページのスクロールに合わせて要素をフェードインさせたい

やりたいこと

サンプルコード

CSS

.fade_in { transition: all 500ms 0s ease; transform: translateY(30px); visibility: hidden; opacity: 0; } .fade_in.js_active { visibility: visible; transform: translateY(0px); opacity: 1; }
スポンサー広告

jQuery

jQuery(function($) { check_fadein(); $(window).scroll(function() { check_fadein(); }); function try_fadein() { var check_fadein= $(this).scrollTop() + ( $(window).innerHeight() / 1.5 ); $('.fade_in').each(function() { var obj_offset_top = $(this).offset().top; if( obj_offset_top < disp_pos ) { $(this).addClass('js_active'); } }); } });

仕組み、解説、補足など

スポンサー広告