blog ブログ

2024.11.12

【初心者向け】CSSスクロールに合わせたアニメーションを作ろう

WEB

sochan

【初心者向け】CSSスクロールに合わせたアニメーションを作ろう

こんにちは、デザイナーのsochanです。
今回はスクロールするとそれに合わせてアニメーションするCSSを実装しよう!です。

基本設定などは「CSSで簡単なアニメーションを作ろう」が元になっていますのでこちらも参考にどうぞ!

@keyframesとanimationで呼び出す

前回の記事と同じく、keyframesとanimationの設定で動きをつけることができます。


/* keyframes */
@keyframes [アニメーション名(なんでもよい)] {
    0% {
        [プロパティ]: [値];
    }
    100% {
        [プロパティ]: [値];
    }
}

/* アニメーションプロパティ */
アニメーション名(なんでもよい) [ animation-name ]
開始〜終了までの時間 [ animation-duration ]
動き方 [ animation-timing-function ] ※ease-in ease-out など
開始までの時間 [ animation-delay ]
繰り返す回数 [ animation-iteration-count ]
終了後に逆再生・反転するか [ animation-direction ]
再生前後にスタイルを適用するか [ animation-fill-mode ]
/* 今回使用するプロパティ */
animation-timeline: scroll();
animation-timeline: view();

対応しているブラウザを確認

SafariやFirefoxなど対応していないブラウザもありますので、
一度確認することをおすすめします。
対応していなブラウザの場合、動きは無しのまま表示だけされます。

caniuse.com

スクロールで連動するアニメーション

■上に伸びるよ↓


.square01 {
  animation: square01 linear; 
  animation-timeline: view();
  /* 以下装飾 */
  width: 200px;
  height: 200px;
  background: #FFCA36;
  transform-origin: bottom; 
}

@keyframes square01 {
  0% {
    scale: 1 0;
  }
  100% {
    scale: 1 1;
  }
}

■横に伸びるよ↓


.square02 {
  animation: square02 linear; 
  animation-timeline: view();
  /* 以下装飾 */
  width: 100%;
  height: 200px;
  background: #FFCA36;
  transform-origin: left; 
}

@keyframes square02 {
  0% {
    scale: 1 0;
  }
  100% {
    scale: 1 1;
  }
}

■ゆらゆらするよ↓


.yurayura {
  animation: yurayura linear; 
  animation-timeline: view();
  /* 以下装飾 */
  width: 200px;
  height: 200px;
  background: #FFCA36;
}

@keyframes yurayura {
  0% ,100% {
    transform:rotate(10deg);
  }
  50% {
    transform:rotate(-10deg);
  }
}

■色が変わるよ↓


.color {
  animation: color linear; 
  animation-timeline: view();
  /* 以下装飾 */
  width: 200px;
  height: 200px;
}

@keyframes color {
  0%  {
    background-color:#FFA439;
  }
  100% {
    background-color:#F78DA7;
  }
}

■フェードインするよ↓


.fadeIn {
  width: 100%;
  height: auto;
  animation: fadeIn linear both;
  animation-timeline: view();
  animation-range: entry 25% cover 50%;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    clip-path: inset(45% 20% 45% 20%);
  }

  to {
    opacity: 1;
    clip-path: inset(0% 0% 0% 0%);
  }
}
  

■パララックス↓

テキストです


  .parallax__box {
  background-image: url(sample.jpg);
  background-size: cover;
  background-position: top;
  animation: parallax linear both;
  animation-timeline: view();
}

@keyframes parallax {
  0% {
    background-position: center 0;
  }

  100% {
    background-position: center -200px;
  }
}
  

■横にスクロールするよ↓

posted article 投稿記事

  • hinode ICT lab CSSで簡単なアニメーションを作ろう

    2024.10.28

    【初心者向け】CSSで簡単なアニメーションを作ろう

    WEB
  • 【初心者向け】実務で使える便利な機能5選(コーディング編)

    2024.09.12

    【初心者向け】実務で使える便利な機能5選(コーディング編)

    WEB
  • 【CSS】カード型レイアウトは「flex」or「grid」どっちがいい?

    2024.06.15

    【CSS】カード型レイアウトは「flex」or「grid」どっちがいい?

    WEB
  • スライダーライブラリ「Splide」を使ってみた

    2024.04.10

    スライダーライブラリ「Splide」を使ってみた

    WEB
View more

contact お問い合わせ・ご相談

制作のご依頼や予算のお見積りなど、まずはお気軽にお問い合わせください。

contact