カーテンを開くようなスクロールアニメーション

はじめに

今回はカーテンを開くようなスクロールアニメーションを作りました。
プラグインは使用せず、jQueryとCSSでの実装です。
言葉ではなかなか分かりずらいと思うので、下記のデモをご覧ください。

デモ

4種類です。
右から左へ開くパターンと、逆のパターンを作成しました。

DEMO

カーテン部分をspan要素で実装しているのと、擬似要素で実装しているものそれぞれ2種類あります。
それぞれ作成した理由としては、以前に擬似要素をアニメーションさせてチラついたり、動作がこんもりする現象が起きた事があり、今回試しに両方作成して比べてみようと思った為です。

ソース

共通

CSS部分

.overlay,
.animate-elm.-max-width:before,
.animate-elm.-transform:before {
  background-color: #f1f1f1;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  -webkit-transition: 1s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition: 1s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}

.overlay-max-width,
.animate-elm.-max-width:before {
  max-width: 100%;
}

.overlay-transform,
.animate-elm.-transform:before {
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
}

.animate-elm {
  margin: 0 auto;
  height: 250px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  position: relative;
  overflow: hidden;
}

.animate-elm.-max-width:before,
.animate-elm.-transform:before {
  content: "";
}

.animate-elm.show.-max-width:before,
.animate-elm.show .overlay-max-width {
  max-width: 0;
}

.animate-elm.show.-transform:before,
.animate-elm.show .overlay-transform {
  -webkit-transform: translateX(101%);
          transform: translateX(101%);
}

@media only screen and (min-width: 769px) {
  .animate-elm {
    height: 400px;
  }
}

js部分

jQueryも読み込ませて下さい。

$(function(){
  var setAnim = $('.animate');
  $(window).on('scroll resize',function(){
    var setHeight = 300;
    setAnim.each(function(){
      var setThis = $(this),
          setElm = $(this).find('.animate-elm');
      elmTop = setThis.offset().top,
      scrTop = $(window).scrollTop(),
      winHeight = $(window).height();
      if (scrTop > elmTop - winHeight + setHeight){
        setElm.addClass('show');
      }
    });
  });
});

spanで実装したもの

右から左

<div class="animate">
  <div class="animate-elm" style="background-image: url(assets/images/1.jpg);">
    <span class="overlay overlay-max-width"></span>
  </div>
</div>

左から右

<div class="animate">
  <div class="animate-elm" style="background-image: url(assets/images/2.jpg);">
    <span class="overlay overlay-transform"></span>
  </div>
</div>

擬似要素で実装したもの

右から左

<div class="animate">
  <div class="animate-elm -max-width" style="background-image: url(assets/images/3.jpg);">
  </div>
</div>

左から右

<div class="animate">
  <div class="animate-elm -transform" style="background-image: url(assets/images/4.jpg);">
  </div>
</div>

解説

カーテン部分は「position: absolute;」で固定、アニメーションはCSSで設定します。
transitionは「cubic-bezier」で調整します。
右から左へのアニメーションはカーテン部分を「max-width」を0にすることで
左から右へのアニメーションはカーテン部分を「transform: translateX()」で移動させることで実装しています。
jsについては過去に書いたこちらの記事の記述をほぼほぼ流用しているので参考にして下さい。

さいごに

なんとなくブランドサイトとか、リッチなサイトでよく見る動きな気がします。
あくまでも一例なので、参考になればと思います。