![見出し画像](https://assets.st-note.com/production/uploads/images/88219469/rectangle_large_type_2_c0a852db0a299e0cdf8dd4003e9a0838.png?width=1200)
CSSとJavaScriptで簡単なアニメーションを作ろう
はじめに
この記事では、CSSとJavaScriptを使って、Webページに簡単なアニメーションを実装する方法をご紹介します。
筆者が実際の案件で制作したコードをもとに解説します。
また、有料記事ではソースコードもダウンロードいただけますので、JavaScriptが得意ではない方でも、お使いいただけます。
成果物
本記事では、下記のようにスクロールと連動してアニメーションを実行できる方法をご紹介します。
フェードイン
![画像1](https://assets.st-note.com/production/uploads/images/29248682/picture_pc_a4dc3ebcd88dcb41c3b5628c2559a011.gif)
時間差フェードイン
![画像4](https://assets.st-note.com/production/uploads/images/29283821/picture_pc_106ff0f85c77166d6ca3a33857902d76.gif)
上へスライドしつつフェードイン
![画像4](https://assets.st-note.com/production/uploads/images/29284503/picture_pc_bfe623f0fc4cd51611bf90c27a78cae6.gif)
右へスライドしつつフェードイン
![画像4](https://assets.st-note.com/production/uploads/images/29284931/picture_pc_b391196171e85020c2505dd26422e0f0.gif)
下へスライドしつつフェードイン
![画像5](https://assets.st-note.com/production/uploads/images/29285471/picture_pc_8c85d5dba0890e273ce1df744a4be021.gif)
左へスライドしつつフェードイン
![画像6](https://assets.st-note.com/production/uploads/images/29286070/picture_pc_fcb22c4833fb9993f0c990ed725b71f6.gif)
拡大しつつフェードイン
![画像7](https://assets.st-note.com/production/uploads/images/29286272/picture_pc_68d37b5d48bc10ae7b24606b021164ca.gif)
基本的な考え方
上記の成果物のような、スクロールと連動してアニメーションを行わせたい時の基本的な考え方は
「要素が画面内に入ったらアニメーションを実行する」
です。
これをCSS、JavaScriptの役割に分割すると
要素が画面内に入ったら:JavaScriptの仕事
アニメーションを実行する:CSSの仕事
となります。
本記事では、この考え方に基づいてコーディングを行なっていきたいと思います。
アニメーションを実行する
では、アニメーションを実行するために、どのようなCSSを記述すればいいか解説していきます。
ここでは、例として下記のようなフェードインするアニメーションを作っていきます。
![画像8](https://assets.st-note.com/production/uploads/images/29286334/picture_pc_7eb1e3b9613ec6f2e5266ccb912b58ad.gif)
アニメーションを行う際はCSSにアニメーションを実行する前と実行した後の状態を記述します。
図で表すと下記のようになります。
![スクリーンショット 2020-06-29 22.50.57](https://assets.st-note.com/production/uploads/images/29362782/picture_pc_aa0af4a89046abb2a2364db3a3f249e6.png?width=1200)
これをソースコードにすると下記のようになります。
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を使って要素が画面内に入ったらアニメーションを実行する方法をご紹介します。
ここから先は
¥ 200
この記事が気に入ったらサポートをしてみませんか?