はじめに
今回は、Webサイトでよく使われている、画像をスクロールさせると上下からフェードイン、左右からスライドインさせるアニメーションを作っていきます。
画像を上からフェードイン
See the Pen 画像を上からフェードイン by Uka Suzuki (@uukasuzuki_) on CodePen.
画像を下からフェードイン
See the Pen 画像を下からフェードイン by Uka Suzuki (@uukasuzuki_) on CodePen.
画像を左からスライドイン
See the Pen 画像を左からスライドイン by Uka Suzuki (@uukasuzuki_) on CodePen.
画像を右からスライドイン
See the Pen 画像を右からスライドイン by Uka Suzuki (@uukasuzuki_) on CodePen.
コードの詳細解説
.fade-in-image {
opacity: 0;
transform: translateY(-50px); /* 上から */
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
margin: 50px 0;
}
- この.fade-in-imageクラスは、画像や要素がスムーズにフェードインするアニメーションを設定しています。上からフェードインを例に挙げると、opacity: 0;で要素の初期の透明度を 0（完全に見えない状態）に設定しています。
- transform: translateY(-50px);で、要素をY軸で上に50px移動させ、初期位置を上から表示されるようにしています。
- transition: opacity 0.6s ease-out, transform 0.6s ease-out;では、opacityとtransformのアニメーションが0.6秒かけてスムーズに実行されるように指定しています。ease-outは、最初は速く、終わりに向かって遅くなるアニメーション効果です。
- このクラスを要素に適用し、JavaScriptやCSSで opacity: 1; や transform: translateY(0); になるようにすると、フェードインと同時に要素が下に移動して所定の位置に収まります。
transformプロパティについて
transformは、CSSで要素の形や位置を変形するプロパティです。2Dや3Dの変換をサポートしており、以下のような変換を行うことができます。
主なtransformの機能
1. translate()は、要素をX軸やY軸方向に移動する
・translateX(距離): X軸方向に移動
・translateY(距離): Y軸方向に移動
・translate(距離X, 距離Y): X軸とY軸の両方に移動
・例）transform: translate(50px, 100px);（右に50px、下に100px移動）
2. scale()は、要素の拡大縮小を行う
・scale(倍率): 要素全体のサイズを変更
・scaleX(倍率): 幅のみを拡大/縮小
・scaleY(倍率): 高さのみを拡大/縮小
・例）transform: scale(1.5);（全体を1.5倍に拡大）
3. rotate()は、要素を指定した角度だけ回転させる
・rotate(角度): 指定された角度で回転
・例）transform: rotate(45deg);（45度回転）
4. skew()は、要素を傾ける（斜めに変形する）ことができる
・skewX(角度): X軸方向に傾ける
・skewY(角度): Y軸方向に傾ける
・skew(角度X, 角度Y): X軸とY軸の両方に傾ける
例）transform: skew(20deg, 10deg);（X軸を20度、Y軸を10度傾ける）
5. matrix()は、複数の変換を一度に行う複雑な操作（あまり一般的ではない）
※transformは、要素のレイアウトには影響を与えず、要素の見た目や表示位置だけが変わります。また、アニメーション（transition）と組み合わせて使うことがよくあります。
transitionプロパティについて
transitionは、CSSで要素のスタイルが変化する際に、スムーズなアニメーション効果を付けるためのプロパティです。これにより、特定のプロパティが一定の時間で変化し、ユーザーに対して滑らかな体験を提供できます。
transitionの構成要素
1. transition-propertyは、アニメーションを適用するCSSプロパティを指定する
・値には、個別のプロパティ（例: width、height）や、すべてのプロパティを指定するallを使えます。
・例）transition-property: opacity;（透明度が変化するときにアニメーション）
2. transition-duration: アニメーションが完了するまでの時間を指定します。時間単位はs（秒）か ms（ミリ秒）を使用する
3. transition-timing-functionは、アニメーションの速度の変化（加速や減速の方法）を指定する
・ease: 最初は速く、途中で緩やかになり、最後にゆっくりと終わる（デフォルト値）。
・linear: 一定の速度で変化。
・ease-in: 最初は遅く、途中から速くなる。
・ease-out: 最初は速く、最後は遅くなる。
・ease-in-out: 最初と最後が遅く、途中が速い。
4. transition-delayは、アニメーションの開始を遅らせる時間を指定する
・例）transition-delay: 0.2s;（0.2秒後にアニメーション開始）
今後の課題
この２か月間、Webサイトでよく頻出するUIパーツを中心に作っていますが、今後はHTMLとCSSで作ったボタンにアクションを加えるため、上記のtransformとtransitionを使っていきます。
まとめ
今回は、JavaScriptを使った簡単なアニメーションを作りました。プロパティの名前や使い方の理解などをこれから深めていきます！