【초보자도 알 수 있다】 스크롤하면 아래에서 부드럽게 나오는 콘텐츠를 만드는 방법

아무래도 7note입니다. 샬레한 사이트 만들기에 필수 스크롤하면 부드럽게 나오는 아레를 만듭니다.

멋진 사이트에서 보는, 부드럽게 컨텐츠가 표시되는 움직임을 구현해 갑니다.
깨끗한 디자인의 사이트에서 자주(잘) 보이는 움직임으로, 가장 사용되고 있는 움직임이 아닐까 정도 보입니다.

예를 들면...
htps : // jp/
htps : // sc 로르레ゔぇ아 ljs. rg/

만드는 방법

※jQuery를 사용하고 있습니다. jQuery는 무엇입니까? 그렇다면 여기

index.html

<div class="box fadeIn"></div>
<div class="box fadeIn"></div>
<div class="box fadeIn"></div>
<div class="box fadeIn"></div>
<div class="box fadeIn"></div>

style.css

.box {
  width: 100%;        /* 横幅いっぱい */
  height: 300px;      /* 高さを300pxに指定 */
  background: #aaa;   /* 背景色を灰色にする */
  margin: 0 0 50px;   /* 下方向に適度な余白 */
  opacity: 0;         /* 初期値は透明にしておく */
  transition: .5s;    /* 動くスピードを0.5秒に指定 */
  position: relative; /* 相対位置の設定 */
  top: 50px;          /* 事前に下に50pxずらしておく */
}

.active {
  opacity: 1;         /* 透明度を元に戻す */
  top: 0;             /* ずらしていた位置を戻すことで上に上がっているようにみえる */
}

script.js

$(window).on('scroll load', function(){        /* ページロード時、またはスクロールされた時*/
  var scroll = $(this).scrollTop();            /* 現在のスクロール量を測定 */
  var windowHeight = $(window).height();       /* ウィンドウの高さを測定 */
  $('.fadeIn').each(function(){                /* 「fadeIn」のクラスがついているものを1つずつ確認し・・・ */
    var cntPos = $(this).offset().top;         /* 対象の要素の上からの距離を測定 */
    if(scroll > cntPos - windowHeight + windowHeight / 3){  /* 要素がある位置までスクロールされていたら */
      $(this).addClass('active');              /* 「active」のクラスを付与 */
    }
  });
});

완성 이미지

해설

사용법은 살짝 표시하고 싶은 요소에 "fadeIn"의 클래스를 부여하는 것입니다.

보이는 숨어있는 움직임 자체는 모두 CSS로 이루어지고 있으며,transition 에서 움직이는 시간.opacity 를 0에서 1로 하여 천천히 표시.position: relative; 와 top 에서 아래에서 위로 살짝 떠 있는 움직임을 하고 있습니다.

트리거(계기)는 javascript로 조작하고 있습니다만,
크게 3종류의 높이를 취득해, 그것을 기준으로 클래스를 나누어 부드럽게 표시시키고 있습니다.
취득하고 있는 높이는 「현재의 위로부터의 스크롤량」「윈도우의 높이」「콘텐츠의 위로부터의 높이」입니다.
이것을 if문이 걸려 있는 곳에서 계산식에 맞추어 결론적으로는 화면의 아래에서 1/3 정도를 넘으면 표시하게 되어 있습니다.

※ <!DOCTYPE html> 를 지정하지 않으면 $(window).height() 가 잘 되지 않으므로 주의!

요약

자주 사용되는 움직임이므로, 이 방법 이외의 만드는 방법도 있다고 생각합니다.
다른 방법도 찾아내는 대로 이 기사로 정리해 갑니다!

소마츠!

~ Qiita에서 매일 게시 중!! ~
【초보자용】HTML・CSS의 조금 테크 모임

Reference

이 문제에 관하여(【초보자도 알 수 있다】 스크롤하면 아래에서 부드럽게 나오는 콘텐츠를 만드는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/7note/items/01a45d58490fe3d1326b

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다