jQueryでスクロールしたら文章や画像を左右からフェードインする方法

2704 回閲覧されました

公開日 : 2023年1月19日
最終更新日 : 2024年9月17日

みなさんこんにちは、jonioです。

jQueryで左右からテキストや画像が現れるようにするのはコピペでできますのでやり方を説明します。

できて当たり前なので実装できるようにしましょう。

今回の説明で実装できる画面が↓です。

ここからリンクに飛ぶ。

1 HTML
2 CSS
3 jQuery
4 注意点

HTML

HTMLに関してはテキストや画像は変えたい部分を変えるだけです。

CSS

コードを下記にします。

.container{
  max-width:750px;
  margin:0 auto;
}


/* 左から現れるボックスの設定 */
.left{
    transform:translateX(-50px);/* 最初は元の位置より左にずらしておくが-50pxを変えると
                                   ずらし具合を変えることができる。
                                   小さい値にしすぎると左から現れる感じを出せない */
    opacity:0;  /* 最初は非表示にしておく */
    transition:opacity 1s,transform 5s;/* 5sを変えると現れるまでの時間を変えることができる*/
  }

  
  /* スクロールして追加するクラスの設定 */
  .left-fadein{
    opacity:1;/* 表示させる */
    transform:translateX(0); /* 位置を最初の位置に戻す。
                                0以外の10pxとかにすると始めの位置より右に動く */
  }


  /*右から現れるボックスの指定*/
  .right{ /*.leftの時と位置の指定方法が変わる*/
      transform:translate(50px,0); /*元の位置より右にずらすけど座標にする。
                                    この時50px以外のプラスの値にすると
                                    もっと右にずらせる*/
      opacity:0;  /* 最初は非表示にしておく */
      transition:opacity 1s,transform 5s;/* 透明度と位置を設定 */
  }


  /*スクロールして追加するクラスの設定*/
  .right-fadein{
      opacity:1;/* 表示させる */
      transform:translate(0, 0); /* 位置を最初の位置に戻す */
  }


  .container p{
    text-align: center;
    font-size: 20px;
  }
  .red{
    background-color:red;
    padding:100px
  }
  .blue{
    background-color:blue;
    padding: 100px;
  }

9行目で左から右に現れる時ですが「transform:translateX(-50px);」の-50pxで最初どこの位置にあるかを決める事ができます。

-50pxを-100pxや-200pxと小さい値にすると左から右に現れた時に出てくる感じが強くなります。

13行目で「transition:opacity 1s,transform 5s;」の5sで登場するまでの時間を決める事ができるので画面を見ながら調節するといいです。

20行目で左から右に現れる位置を決める事ができるのですが「transform:translateX(0);」の0を20pxなどプラスの大きな値にすると右に大きくずらす事ができますが大きくし過ぎると画面崩れの原因になるので画面を見ながら調節して下さい。

25行目は右から左に現れる時ですが座標にすると思って下さい。

27行目の「transform:translate(50px,0);」ですが50pxのみを変えて100pxなどの大きくすればするほど最初の位置が右にずらせます。

31行目の「transition:opacity 1s,transform 5s;」の5sは現れるまでの時間なので画面を見ながら調節して下さい。

38行目の右から左のどこに現れるかになりますが「transform:translate(0,0);」の最初の0を-10pxや-20pxなどの小さい値にするとより左に進みます。

jQuery

コードを下記にします。

var window_h = $(window).height();
$("#wh span").text(window_h);
//スクロールイベント
$(window).on("scroll", function() {
  var scroll_top = $(window).scrollTop();
  $("#scroll span").text(scroll_top);

  $(".left").each(function() {
    var elem_pos = $(this).offset().top;
    $(this).find(".box_pos span").text(Math.floor(elem_pos));
  
    //どのタイミングでテキストをフェードインさせるか
    if (scroll_top >= elem_pos - window_h+100) {
      $(this).addClass("left-fadein");
    } else {
      $(this).removeClass("left-fadein");
    }
  });

  $(".right").each(function() {
    var elem_pos = $(this).offset().top;
    $(this).find(".box_pos span").text(Math.floor(elem_pos));
  
    //どのタイミングで画像をフェードインさせるか
    if (scroll_top >= elem_pos - window_h+100) {
      $(this).addClass("right-fadein");
    } else {
      $(this).removeClass("right-fadein");
    }
  });


});

jQueryに関しては13行目と25行目の「scroll_top >= elem_pos – window_h+100」の100を変えるとどれだけスクロールした時にパララックスが作動するかを変える事ができますので画面を見ながら調節すればいいです。

という感じで数値を変えるだけで実装できますのでjQueryを始めたばかりの人にはお勧めです。

注意点

このパララックスは左右から画像やテキストが現れるからだと思いますがこのままだと画面崩れします。

それを防ぐにはこうします。

//HTML
<div id="wrapper>
  パララックスしたい内容
</div><!--/#wrapper-->

//CSS
#wrapper{
  width:100%;
  overflow:hidden;
}

全体のHTMLは↓です。

<div id="wrapper>
  <div class="container">
    <p>まだですよ</p>
    <p>まだですよ</p>
    <p>まだですよ</p>
    <p>まだですよ</p>
    <p>まだですよ</p>
    <p>まだですよ</p>
    <p>まだですよ</p>
    <p>まだですよ</p>
    <p>まだですよ</p>
    <p>まだですよ</p>
    <p>まだですよ</p>
    <p>まだですよ</p>
    <p>まだですよ</p>
    <p>まだですよ</p>
    <p>まだですよ</p>
    <p>まだですよ</p>
    <p>まだですよ</p>
    <p>まだですよ</p>
    <p>まだですよ</p>
    <p>まだですよ</p>
    <p>まだですよ</p>
    <p>まだですよ</p>
    <p>まだですよ</p>
    <p>まだですよ</p>
    <p>まだですよ</p>
    <p>まだですよ</p>
    <p>まだですよ</p>
    <p>まだですよ</p>
    <p>まだですよ</p>
    <p>まだですよ</p>
    <p>まだですよ</p>
    <p>まだですよ</p>
    <p>まだですよ</p>
    <p>まだですよ</p>
    <p>まだですよ</p>
    <p>まだですよ</p>
    <p>まだですよ</p>
    <p>まだですよ</p>
    <p>まだですよ</p>
    <p>まだですよ</p>
    <p>まだですよ</p>
    <p>まだですよ</p>
    <p>まだですよ</p>
    <p>まだですよ</p>
    <p>まだですよ</p>
    <p>まだですよ</p>
    <p>まだですよ</p>
    <p>まだですよ</p>
    <div class="left"><p class="red">左から赤色のブロックが現れます</p></div><!--/.left-->
    <div class="left"><img src="images/left-fadein.png" alt="左から現れる画像"></div><!--/.left-->
    <div class="right"><p class="blue">右から青色のブロックが現れます</p></div><!--/.right-->
    <div class="right"><img src="images/right-fadein.png" alt="右から現れる画像"></div><!--/.right-->
  </div><!--/.container-->
</div><!--/#wrapper-->