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

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

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

しょーご

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

当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。

参考サイト

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年には随時デザインの刷新をしており、完全リニューアル！！

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

しょーご

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

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

まとめて購入

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

コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください！

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

課題の販売ページへ