スクロールしたら要素が出るやつ【.offset()】

Pocket

スクロールすると、要素がでてくるやつをjqueryを使用して実装します。

デモはこちら

<仕様>

①ページをスクロールして、隠れている要素がブラウザの画面高さの1/4に到達したら要素を表示する。

②対象要素は5.6.7の三つ。

それでは、解説。

○index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/sanitize.css">
    <link rel="stylesheet" href="css/common.css">
    <title>デモ</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/index.css">
  </head>
  <body>
    <!--header-->
    <header></header>
    <main ontouchstart="">
      <div class="Container">
        <div class="sideMargin">
          <div class="itemBlock">
            <div class="block block1">
              <p>1</p>
            </div>
            <div class="block block2">
              <p>2</p>
            </div>
            <div class="block block3">
              <p>3</p>
            </div>
            <div class="block block4">
              <p>4</p>
            </div>
            <div class="block block5">
              <p>5</p>
            </div>
            <div class="block block6">
              <p>6</p>
            </div>
            <div class="block block7">
              <p>7</p>
            </div>
          </div>
        </div>
      </div>
    </main>
    <!--footer-->
    <footer>
      <script src="js/jquery-2.0.0.min.js"></script>
      <script src="js/common.js"></script>
    </footer>
  </body>
</html>

・div class=block block4、div class=block block5、div class=block block6の3つの要素をスクロールしたら表示するようにします。

○index.css

.Container {
  padding: 50px 0;
  background-color: #9e9e9e40; }

.sideMargin {
  padding: 0 10px; }

.itemBlock {
  background-color: white;
  max-width: 780px;
  margin: 0 auto; }

.block {
  background-color: blue;
  height: 300px;
  width: 300px;
  margin: 0 auto 20px;
  -webkit-transform: translateY(50px);
  transform: translateY(50px);
  opacity: 0;
  -webkit-transition: 0.5s;
  transition: 0.5s; }
  .block p {
    color: #fff;
    font-size: 3.0rem; }

.block1,
.block2,
.block3,
.block4 {
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
  opacity: 1; }

.fadeIn {
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
  opacity: 1; }

①block

・transformを適用して本来の表示位置からY軸方向に50px移動

・表示を消すためにopacityを適用して要素を透明にする

・transitionを適用して一定時間でcssを変化させるようにする(今回は0.5秒)

②fadeIn・・・block要素を表示させる設定にする。

・ずれた要素をもとの位置にするためにtransformを再度適用

・透明の要素を表示させるためにopacityを再度適用

○common.js

$(function(){
  $(window).scroll(function(){
      var fade5 = $('.block5').offset().top;
      var fade6 = $('.block6').offset().top;
      var fade7 = $('.block7').offset().top;
      var scroll = $(window).scrollTop();
      var windowHeight = $(window).height();
      if (scroll > fade5 - windowHeight + windowHeight/4){
        $('.block.block5').addClass('fadeIn');
      }
      if (scroll > fade6 - windowHeight + windowHeight/4){
        $('.block.block6').addClass('fadeIn');
      }
      if (scroll > fade7 - windowHeight + windowHeight/4){
        $('.block.block7').addClass('fadeIn');
      }
  });
});

①　var fade = $().offset().top;

変数fadeは、$()要素のy軸上の値(一番上から、要素までの距離)

②　var scroll = $(window).scrollTop();

変数scrollはブラウザのスクロールした値

③　var windowHeight = $(window).height();

変数windowHeightはブラウザの縦の大きさ

④　if (scroll > fade5 – windowHeight + windowHeight/4){}

『隠れている要素が、ブラウザの1/4の高さに到達したら』という条件

⑤　$().addClass(‘fadeIn’);

$()要素にfadeInというクラスを追加する

これで、スクロールすると要素が下から出てくるよく見る動きになります。

今回は以上です。