最近のウェブサイトデザインでよく見かける印象がある、画像やテキストなどのコンテンツをアニメーションのマスクで表示させる動きをSass（とjavascript）で作成してみたいと思います。アニメーションの動きや速さを調整したりすることで、いろんな表現ができるようになるので面白そうですね。この動きを入れるだけで一気に今風のウェブサイトのデザインになりますね。   今回はアニメーション自体はSassで実装しています。JavaScriptで実装することも可能ですが、ブラウザのパフォーマンスなどを考えるとCSSで出来るところはCSSで完結できる方がいいのではないでしょうか。javascriptはあくまでアニメーションのイベント用として使います。では早速コードの方を見ていきたいと思います。   【HTML】※一部抜粋

<div class="mask_animation mask_wrap">
 <div class="mask_inner">
  <p>マスクアニメーションで表示させたい内容</p>
 </div>
</div>

  HTMLはシンプルな構造で、ラッパー要素の中に、インナー要素としてもう一つ用意します。その中にマスクアニメーションで表示させたいテキストや画像を入れます。また、ここではclass名にはCSSで制御する用のもの「mask-wrap」「mask-inner」と、スクロールやロードなどのイベントで発火させるようにJavaScriptで使う「mask_animation」というものを指定しています。   次にSassでアニメーションの動きを指定していきます。CSSだけでも実装できますが長くなるのでSASS、SCSSで記述していくほうが便利です。 【SCSS】

$duration-time: 1.5s;
$easing: ease;

@mixin animation-settings {
 animation-duration: $duration-time;
 animation-timing-function: $easing;
 animation-delay: 0s;
 animation-iteration-count: 1;
 animation-direction: normal;
 animation-fill-mode: both;
 animation-play-state: running;
 -webkit-backface-visibility:hidden;
 backface-visibility:hidden;
}
@keyframes animate-panel {
 0% {
  transform-origin: left top;
  transform: scale(0, 1);
 }
 49% {
  transform-origin: left top;
  transform: scale(1, 1);
 }
 50% {
  transform-origin: right top;
  transform: scale(1, 1);
 }
 100% {
  transform-origin: right top;
  transform: scale(0, 1);
 }
}
@keyframes animate-content {
 0% {
  visibility: hidden;
 }
 49% {
  visibility: hidden;
 }
 50% {
  visibility: visible;
 }
 100% {
  visibility: visible;
 }
}

.mask_wrap {
 display: inline-block;
  .mask_inner {
   position: relative;
   visibility: hidden;
    &::after {
     content: "";
     background: #000;
     width: 100%;
     height: 100%;
     position: absolute;
     left: 0;
     top: 0;
     transform-origin: left top;
     transform: scale(0, 1);
     transition: all 0.3s $easing 0s;
     visibility: visible;
    }
    &.start {
     animation-name: animate-content;
     @include animation-settings;
      &::after {
       animation-name: animate-panel;
       @include animation-settings;
      }
    }
  }
}

  最初に全体のアニメーションにかかる時間やイージングの種類を変数で持たせておくと、細かい調整が便利です。まずはミックスインでアニメーションの設定を行います。ポイントとなるのは「animation-iteration-count」と「animation-fill-mode」で繰り返すことなく、アニメーション終了時のまま維持されるようにしておきます。そしてアニメーション実行時にちらつきが発生する場合には「backface-visibility:hidden;」で防ぐことができます。   次にキーフレームでマスクの動きと要素の表示状態を設定します。キーフレームではアニメーションの全体の進捗度合いに合わせてそれぞれスタイルを設定することができます。ここでは0%〜49%と50%〜100%の前半後半2つに分けて考えていきます。 【前半のアニメーション】 ・マスクするパネル部分：左から右方向へ要素が徐々に伸びていき、全て隠した状態になる。 ・マスクされる部分：非表示 【後半のアニメーション】 ・マスクするパネル部分：左から右方向へ要素が徐々に縮んでいき、全て見えている状態になる。 ・マスクされる部分：表示   マスクするパネル部分は「transform: scale();」で「transform-origin」を使うことで向きを変えることができます。マスクされる部分は「visibility」で表示非表示を切り替えています。   次にそれぞれの要素のスタイリングです。ラッパー要素には「display: inline-block;」を指定しておくことで、インライン要素として内包する要素に合わせて使うことができます。次にインナー要素には「position: relative;」を指定します。パネルを表示させるため擬似要素を使うためです。マスクするパネル部分は擬似要素で表現します。アニメーションの初期値に合わせてtransformとvisibilityを設定しておきます。そして、JavaScriptでイベント発火させるためのclassがついた時に、先ほどのキーフレームでアニメーションが実行されるよう、マスクするパネル部分とマスクされる部分にアニメーションを設定します。   あとは、JavaScriptでイベントを設定しそれに合わせてアニメーションを実行させていきます。アニメーション自体はCSSで完結しているので、基本的にアニメーションを実行させる用のclassを付与させるだけでOKです。以下ではページのロードが完了した時と、スクロールで対象要素がウィンドウ内に入ったタイミングで表示させる例になります。 【javascript（ES6）】

// ページのロードが終わったタイミング
window.addEventListener("load", function(){
 const element = document.querySelectorAll('.mask_animation');
 element.forEach((items) => {
  items.querySelector('.mask_inner').classList.add('start');
 });
});

// スクロールで要素がウィンドウ内に入ったタイミング
window.addEventListener("scroll", function(){
 const element = document.querySelectorAll('.mask_animation');
 const scrollCount = document.documentElement.scrollTop || document.body.scrollTop;
 const windowHeight = window.innerHeight;
 const threshold = 100;
 element.forEach((items) => {
  const elementOffsetTop = items.getBoundingClientRect().top;
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  const offsetPosition = elementOffsetTop + scrollTop;
  if(scrollCount > offsetPosition - windowHeight + threshold) {
   items.querySelector('.mask_inner').classList.add('start');
  }
 });
});

  JavaScriptでのイベント制御に関してはjQueryを使うのもいいですね。今回のサンプルはこちらに用意しました。  

See the Pen mask_animation by designsupply (@designsupply) on CodePen.

 

---

  今回はマスクアニメーションで要素を表示させる方法を、Sassとjavascriptを使って実装してみました。最近ではサイト制作で求められることの多い要件の一つでもあるかと思いますので、ぜひ参考にしてみてはいかがでしょうか。