【CSS/JS】画像上の要素がカーテンのように開くスクロールアニメーション

こんにちは、Ryohei（@ityryohei）です！

画像上の要素がカーテンのように開くスクロールアニメーションのご紹介です。

タイトルだけでは内容が伝わりづらいかと思いますので、まず最初に下記のデモにある「Show」ボタンをクリックしてみてください。

See the Pen
gJddWy by ryoy (@intotheprogram)
on CodePen.

画像の上に重なる半透明の要素が画面の左から右に向かってカーテンを開くように動いたのではないでしょうか。正式なアニメーション名がわからないため、私はカーテンが開くようなアニメーションという風に呼んでいますが、近年動きがリッチなサイトで採用されているアニメーションになります。

実際によく見かけるパターンですと、画像やテキスト、グラフといったコンテンツを単色の要素で隠しておき、スクロール位置になるとアニメーション表示する、という手法が一般的です。

本記事では、CSSと少しのjQueryを使用して、上記のデモと同じアニメーションをスクロールした際に実行されるようにする方法をご紹介しています。

本記事の内容

コンテンツを用意する
要素にスタイルを定義する
アニメーション時に追加するclassのスタイルを定義する
スクロールした際に要素にclassを追加する

では、解説していきます。

コンテンツを用意する

本記事でご紹介するアニメーションは、予めコンテンツを隠しておき、スクロール位置にくると表示されるものになります。最初に隠しておくコンテンツは何でも良いですが、今回は画像に重ねられた要素という記事になるため、下記のマークアップを使用して解説を進めたいと思います。

<div class="box">
  <img src="//into-the-program.com/demo/images/sample010.jpg" alt="">
</div>

要素にスタイルを定義する

上記で用意したマークアップにスタイルを定義していきます。スタイルを定義する際に下記の点が重要なポイントになります。

画像の上に重ねる要素は疑似要素で作成する

疑似要素は「:before」や「:after」のように指定した要素の特定の位置にスタイルを付けることができるものになります。本記事では「box」というclassを持つ要素の疑似要素に、上から重ねる単色の要素を定義します。

.box {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.box:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .9);
　transition: 1s cubic-bezier(.15,.65,.85,.65);
}

「transition」は後々必要になるプロパティです。画像に重ねられた単色の要素のアニメーション設定になります。

アニメーション時に追加するclassのスタイルを定義する

続いてアニメーション時に追加するclassのスタイルを定義します。もう少し詳しく説明すると、スクロールして要素が表示された際に「box」に追加するclassのスタイルを定義する、という意味合いになります。

classを追加する処理はスクリプトで制御しますので、ここではCSSでスタイルのみを定義します。

.isPlay:before {
  transform: translate3d(100%, 0, 0);
}

本記事では「isPlay」というclassを使用しますが、お好きなclass名で用意していただいて大丈夫です。

スクロールして「box」要素が画面に表示された際に「isPlay」というclassが追加されます。その際に「transform」で画像の上に重なる要素を動かしてます。

「transform」の実行時間は上記で指定した「transition」の秒数となります。

ここまででマークアップとそれに関わるスタイルの定義は完了となります。

最後にスクロールした際に「box」にclassを追加するスクリプトを記述していきます。

スクロールした際に要素にclassを追加する

下記でご紹介するスクリプトは本サイトで何度かご紹介しているものになります。jQueryで記述しておりますので、別途jQuery本体が必要になります。

処理の内容は、スクロール中に特定の要素がウィンドウの真ん中辺りの位置にくると指定したclassが追加される処理です。変数に代入している要素につきましては、環境に応じて変更してご利用ください。

$(window).on('load scroll', function (){

  var box = $('.box');
  var isPlay= 'isPlay';
  
  box.each(function () {
  
    var boxOffset = $(this).offset().top;
    var scrollPos = $(window).scrollTop();
    var wh = $(window).height();

    if(scrollPos > boxOffset - wh + (wh / 2) ){
      $(this).addClass(isPlay);
    }else{
      $(this).removeClass(isPlay);
    }
  });

});