0%

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

Posted:2019.01.10

Sassでクロスフェードのスライドアニメーションを実装する

最近、Sassを使っていろんな機能を実装するケースが増えてきたので備忘録的にメモを残しておきたいと思います。今回はクロスフェードで複数の画像が切り替わるスライドショーをSassで作成していきます。

 

ギャラリーサイトやヒーローヘッダーなどを採用したサイトでよく見かけますね、特にフルスクリーンで表示されるパターンが多いようで、今回はその形でサンプルを作成して見ました。このような機能は、以前まではjavascript、特にjQueryを使って実装するケースが一般的でしたが、最近ではCSSのみで表現できるようになってきました。

 

ただ、コード自体が複雑で分かりにくかったり、長くなりすぎて書きにくかったりという問題がありましたが、Sassの登場によりスッキリと記述できるようになったことで、かなり実装しやすくなったのではないでしょうか。

 

今回はこちら「Ken Burns Effect fullscreen without js」(A Pen By Nicola Pressi)のサンプルを参考に、設定項目を変数化していろんな案件で使いまわしやすいようにアレンジしてみました。

 

まずはHTMLを組んでいきます。構造自体はシンプルで、ラッパー要素となる親要素で画像が表示される子要素を囲んでいます。

【HTML】※一部抜粋

<div class="bg-crossfade-wrap">
  <div class="bg-crossfade-img">
  </div>
  <div class="bg-crossfade-img">
  </div>
  <div class="bg-crossfade-img">
  </div>
  <div class="bg-crossfade-img">
  </div>
</div>

 

そしてSass(SCSS)で動きの部分を実装していきます。今回は複数の画像を表示させる順番に重ねて、時間差で表示非表示を繰り返すことでクロスフェードの表現を実装しています。ソースコードはこちらになります。

【CSS(SCSS)】

// config
$image-count: 4;
$time-delay: 3s;
$time-duration: 1s;
$time-total: ($time-delay * $image-count);

// image src
$images: (
  '1': bg-image01,
  '2': bg-image02,
  '3': bg-image03,
  '4': bg-image04
);

// mixin
@mixin background-config {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
@mixin animation-config {
  animation-name: bg-crossfade;
  animation-duration: $time-total;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
}

// animation
@for $i from 1 through $image-count {
  @keyframes bg-crossfade-#{$i} {
    $delay-rate: percentage($time-delay / $time-total);
    $duration-rate: percentage($time-duration / $time-total);
    $case-1: ($delay-rate * ($i - 1) - $duration-rate / 2);
    $case-2: ($delay-rate * ($i - 1) + $duration-rate / 2);
    $case-3: ($delay-rate * ($i) - $duration-rate / 2);
    $case-4: ($delay-rate * ($i) + $duration-rate / 2);
    $case-5: (100% - $duration-rate / 2);
    $case-6: (($case-4 - $case-1) * 100% / $case-5);
    @if ($case-1 < 0%) {
      $case-1: 0%;
    }
    @if ($case-2 < 0%) {
      $case-2: 0%; 
    }
    @if ($case-3 > 100%) {
      $case-3: 100%; 
    }
    @if ($case-4 > 100%) {
      $case-4: 100%; 
    }
    #{$case-1} {
      opacity: 1;
    }
    #{$case-2} {
      opacity: 1;
    }
    #{$case-3} {
      opacity: 1;
    }
    #{$case-4} {
      opacity: 0;
    }
    @if ($i != $image-count) {
      100% {
        opacity: 0;
      }
    }
    @if ($i == 1) {
      #{$case-5} {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
  }
}

// style
.bg-crossfade-wrap {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
  z-index: -1;
    .bg-crossfade-img {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      @include background-config;
      @include animation-config;
      @for $i from 1 through $image-count {
        &:nth-child(#{$i}) {
          animation-name: bg-crossfade-#{$i};
          z-index: ($image-count - $i);
        }
      }
      @each $order, $image in $images {
        &:nth-child(#{$order}) {
          background-image: url(#{$image}.jpg);
        }
      }
    }
}

 

少し長いのですが、まずは使用する画像の枚数や表示時間、アニメーションの切り替わり時間などを変数で管理できるようになっています。そして、使用する画像のファイル名も合わせて表示させる順番に登録する形になります。この時にインデックスとなる番号も合わせて入れることになります。

 

そして、背景画像とアニメーションのプロパティをmixinで登録しておきます。あまり変えることはないかもしれませんが、アレンジするときに便利ですね。

 

そして今回のポイントになるキーフレームを登録していきます。ここでSassの機能である「@for」で繰り返しの処理を行うことで、各画像用に個別のキーフレームを作成することができます。その中で、キーフレームの位置を並び順の画像ごとに動的に出力させることで、時間差でのアニメーションになるようになっているようです。

 

最後に各画像を重ねるように配置していきます。ここで、各画像の重なり順ですが、先ほどと同じく「@for」を使って画像の並び順で動的に変化させています。そして、「@each in」を使うことで背景画像も変数で登録した個別のものが充て振られるようになっています。

 

これでjavascriptを使わないでSassのみでクロスフェードのスライドアニメーションができました。今回のサンプルはこちらになります。

 

See the Pen crossfade animation on CSS by designsupply (@designsupply) on CodePen.

 

参考サイトではクロスフェードに加えて、拡大縮小のアニメーションがついたいわゆる「ケンバーンエフェクト」と呼ばれる効果が紹介されています。これもCSSのtransformプロパティを使うことでいろんなアレンジができそうですね。javascriptを使わないことで、処理の負担も減るかと思いますので軽量化を目指すケースでも相性がいいのではないでしょうか。

 

(参考にさせて頂いたサイト)
Ken Burns Effect fullscreen without js
Sass:eachやforを使って繰り返し記述する手間を省く

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

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

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

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

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

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

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

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

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

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

CAPTCHA


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