ファーストビューの画像をズームアニメーションしつつ切り替える方法を解説【HTML,CSSのみ】

こんにちは、しょーごです。

今回は「画像をズームアニメーションさせつつ、複数画像を切替える方法」を解説していきます。

しょーご

この記事を書いたのは
しょーご（@samurabrass）

このブログ「しょーごログ」の運営者。2018年からエンジニアとしてサイト制作やシステム開発を行いつつ、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う。

参考サイト

https://animation-img-tyukyuex.netlify.app/

しょーご

レスポンシブ対応は特にしていないので、テキストがタブレット以下だと消えます。

全体のコード

<header></header>
  <main>
    <div class="fv">
      <div class="slide">
        <div class="slide-image"></div>
        <div class="slide-image"></div>
        <div class="slide-image"></div>
      </div>
      <p class="fv-copy fv-copy-01">頑張る人の</p>
      <p class="fv-copy fv-copy-02">頑張らない時間</p>
    </div>
  </main>

body {
  font-family: “Times New Roman”, “游明朝”, “Yu Mincho”, “游明朝体”, “YuMincho”, “ヒラギノ明朝 Pro W3”, “Hiragino Mincho Pro”, “HiraMinProN-W3”, “HGS明朝E”, “ＭＳ Ｐ明朝”, “MS PMincho”, serif;
}

.slide {
  position: relative;
  width: 100%;
  height: 1079px;
  overflow: hidden;
}
.slide-image {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: slider-1 24s linear infinite;

  &:nth-child(1) {
    background-image: url(../img/mainbg01.jpg);
    animation-delay: -2s;
  }
  
  &:nth-child(2) {
    background-image: url(../img/mainbg02.jpg);
    animation-delay: 6s;
  }
  
  &:nth-child(3) {
    background-image: url(../img/mainbg03.jpg);
    animation-delay: 14s;
  }
}

@keyframes slider-1 {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  4.16% {
    opacity: 1;
  }
  33.33% {
    opacity: 1;
  }
  41.66% {
    opacity: 0;
    transform: scale(1.2);
  }
  100% {
  opacity: 0;
  }
}

.fv {
  position: relative;
}
.fv-copy {
  position: absolute;
  writing-mode: vertical-rl;
  font-size: 34px;
  font-weight: bold;
  color: #FFFFFF;
  z-index: 1;
  letter-spacing: 0.35em;
  line-height: 1.24;
  &-01 {
    top: 362px;
    right: 508px;
  }
  &-02 {
    top: 362px;
    right: 593px;
  }
}

アニメーションは@keyframesで

@keyframesでどういったタイミングでどのようなアニメーションをかけるか、animationはアニメーションさせたいプロパティに設定してあげます。

今回は

という設定にしています。

@keyframesの設定を少し深堀ります。

0%から100%までを今回24秒で進行すると設定しています。これはanimationの部分ですね。

つまり、@keyframesの4,16%というのは1秒を意味します。

そして、3つの各要素にanimation-delayをかけることで、各要素に順番にアニメーションが適用されるようになっていて、結果的にきれいなスライドショーのように見えるのです。

.slide-image {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: slider-1 24s linear infinite;

  &:nth-child(1) {
    background-image: url(../img/mainbg01.jpg);
    animation-delay: -2s;
  }
  
  &:nth-child(2) {
    background-image: url(../img/mainbg02.jpg);
    animation-delay: 6s;
  }
  
  &:nth-child(3) {
    background-image: url(../img/mainbg03.jpg);
    animation-delay: 14s;
  }
}
@keyframes slider-1 {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  4.16% {
    opacity: 1;
  }
  33.33% {
    opacity: 1;
  }
  41.66% {
    opacity: 0;
    transform: scale(1.2);
  }
  100% {
  opacity: 0;
  }
}

ちなみに、最初の要素にanimation-delay: -2s;がかかっているのは、サイトを開いたばかりの初期状態0%の時だとopacity: 0;で何も表示されないためです。

最初から画像は表示されていたほうがいいので、あえてdelayをかけてスタートしています。

画像の上にテキストを乗っける

この場合が多いかと思います。

肝は以下の部分。

.fv {
  position: relative;
}
.fv-copy {
  position: absolute;

親要素にrelativeを設定しておいて、画像の上に配置したいテキストブロックなどはabsoluteにしてやります。

即戦力になれるコーディング課題

HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。

1. Figma,Photoshopデザインからのコーディング
2. サーバーアップロードでサイト公開
3. プロによる最大3回の表示確認特典
4. レビュー返しは爆速
5. 2024年にデザイン刷新！被らないポートフォリオ

「初級編」は初めてデザインからコーディングする方向け
「中級編」はJavaScriptやjQueryの練習
「上級編」はWordPressの実案件を模擬体験できるレベル感にしています。

中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。

全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。

また、2024年には随時デザインの刷新をしており、完全リニューアル！！

他者と差をつけられるポートフォリオが準備できます！

しょーご

制作会社も使用する専用レビューツールで分かりやすく添削していきます！

基本的に「まとめて購入」していただくとかなりお得になります↓

まとめて購入

全部盛りはこちらから
中級以上はこちらから
即戦力編はこちらから

コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください！！

＼課題の購入はこちらから／

課題の販売ページへ

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

超実践編をとりあえず見てみる