Blog

작업용 메모, 추천 음악등을 게시하는 블로그입니다.

  • 2019년 8월27일
HTML
<section class="effect-fade">
 <h1>タイトル1</h1>
 <p>説明文1</p>
</section>

<section class="effect-fade">
 <h1>タイトル2</h1>
 <p>説明文2</p>
</section>

<section class="effect-fade">
 <h1>タイトル3</h1>
 <p>説明文3</p>
</section>

 

css
.effect-fade {
 opacity : 0;
 transform : translate(0, 45px);
 transition : all 300ms;
}

.effect-fade.effect-scroll {
 opacity : 1;
 transform : translate(0, 0);
}

 

js
$(function(){
 $(window).scroll(function (){
    $('.effect-fade').each(function(){
        var elemPos = $(this).offset().top;
        var scroll = $(window).scrollTop();
        var windowHeight = $(window).height();
        if (scroll > elemPos - windowHeight){
            $(this).addClass('effect-scroll');
        }
    });
 });
});

 

수빈

Copyright © 2024. Kim Su-been All Rights Reserved.