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>
<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);
  • }
.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');
  • }
  • });
  •  });
  • });
$(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.