0%

Programmingプログラミングナレッジ

Posted:2019.08.12

マスクアニメーションを使ってカッコよく画像やテキストを表示させる

最近のウェブサイトデザインでよく見かける印象がある、画像やテキストなどのコンテンツをアニメーションのマスクで表示させる動きを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を使って実装してみました。最近ではサイト制作で求められることの多い要件の一つでもあるかと思いますので、ぜひ参考にしてみてはいかがでしょうか。

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】