はじめに
今回は、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秒後にアニメーション開始)
今後の課題
この2か月間、Webサイトでよく頻出するUIパーツを中心に作っていますが、今後はHTMLとCSSで作ったボタンにアクションを加えるため、上記のtransformとtransitionを使っていきます。
まとめ
今回は、JavaScriptを使った簡単なアニメーションを作りました。プロパティの名前や使い方の理解などをこれから深めていきます!