見出し画像

CSSとJavaScriptで簡単なアニメーションを作ろう

はじめに

この記事では、CSSとJavaScriptを使って、Webページに簡単なアニメーションを実装する方法をご紹介します。
筆者が実際の案件で制作したコードをもとに解説します。
また、有料記事ではソースコードもダウンロードいただけますので、JavaScriptが得意ではない方でも、お使いいただけます。

成果物

本記事では、下記のようにスクロールと連動してアニメーションを実行できる方法をご紹介します。

フェードイン

画像1

時間差フェードイン

画像4

上へスライドしつつフェードイン

画像4

右へスライドしつつフェードイン

画像4

下へスライドしつつフェードイン

画像5

左へスライドしつつフェードイン

画像6

拡大しつつフェードイン

画像7

基本的な考え方

上記の成果物のような、スクロールと連動してアニメーションを行わせたい時の基本的な考え方は

「要素が画面内に入ったらアニメーションを実行する」

です。
これをCSS、JavaScriptの役割に分割すると

要素が画面内に入ったら:JavaScriptの仕事
アニメーションを実行する:CSSの仕事

となります。
本記事では、この考え方に基づいてコーディングを行なっていきたいと思います。

アニメーションを実行する

では、アニメーションを実行するために、どのようなCSSを記述すればいいか解説していきます。
ここでは、例として下記のようなフェードインするアニメーションを作っていきます。

画像8

アニメーションを行う際はCSSにアニメーションを実行する前実行した後の状態を記述します。
図で表すと下記のようになります。

スクリーンショット 2020-06-29 22.50.57

これをソースコードにすると下記のようになります。

index.html
<figure class="animation animation-fade-in">
    <img src="img/img_001.png">
</figure>
animation.css
.animation-fade-in {
    opacity: 0;
    transition: 0.8s opacity;
}

.animation-fade-in.animation-active {
    opacity: 1;
}

「animation-fade-in」というクラスが付いた状態がアニメーションを実行する前、「animation-fade-in」と「animation-active」が付いた状態がアニメーションを実行した後の状態を表します。
CSSで使用するのは下記の2つのプロパティです。

opacity:要素の不透明度を設定
transition:要素の2つの状態間の変化を定義

CSSでアニメーションを実行する前(.animation-fade-in)は「opacity: 0;」、実行した後(.animation-fade-in.animation-active)は「opacity: 1;」と指定します。
つまり、アニメーションの前後で要素の透明度が0 → 1に切り替わります。

また、「transition: 0.8s opacity;」と指定していますが、これは「要素の透明度(opacity)を0.8秒かけて変化させる」という意味になります。

このように「opacity」と「transition」を組み合わせることでフェードインのアニメーションを作ることができます。

では、次にJavaScriptを使って要素が画面内に入ったらアニメーションを実行する方法をご紹介します。

この続きをみるには

この続き: 9,912文字 / 画像6枚

CSSとJavaScriptで簡単なアニメーションを作ろう

inumberx

200円

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
4
Webデザイナー/フロントエンドエンジニアとして働いています。 ポートフォリオサイト https://afterworks.jp