今回は流行のアニメーションのカスタマイズです。
ページが表示された際にロゴが上から出てくるような動きを付けたり、下から上にフェードインで表示されるカスタマイズです。
このようなアニメーションを付けるときは、一昔前までjavascriptを使わなければいけませんでしたが、今回は「CSS」だけでアニメーションを付けることが出来ます。
これまたコピペで出来ますので、お試しあれ！
- 国内シェアNo.1の高速サーバーなのでストレスフリー！
- 自動バックアップ機能に標準対応で安心運用可能！
| 気になるポイント！ | キャンペーン中に契約すれば.com等のドメインを永久無料で使えます！ |
|---|
子テーマを使用しましょう
カスタマイズをするので子テーマを使いましょう！
子テーマの使い方がわからない場合は、こちらの記事を参考にしてください。
Cocoonの子テーマ導入方法はこちらの記事で紹介しています。
上から出てくるアニメーション
完成図
今回のカスタマイズをするとこんな感じになります。
gifなのでカクカク＆グローバルメニューが動いてますが、実際見るとそんなことはありません。
（私の編集が下手なだけです）
上からサイトロゴが降ってくる感じです！
簡単に出来ますので、カスタマイズしてみましょう。
コードを追記
このカスタマイズを適用させるためには、以下のコードを追記します。
.logo{
animation-name:tpdwn;
animation-duration: 2s;
}
@keyframes tpdwn {
from {
transform: translateY(-200px);
}
to {
transform: translateY(0);
}
}解説
まず【.logo】のclassをアニメーションとして動かすために指定します。
指定するために設定した名称が【tpdwn】です。
こちらはどんな名称でもいいですが、自分でわかりやすい物が良いと思います。
またアニメーションが実行される時間も【animation-duration】で指定します。
こちらの数値を変更すると、アニメーションが実行されている時間を変更することが出来ます。
【@keyframes～】でアニメーションが実際にどのような動きをするか設定します。
～の部分に先程指定した名称を入れることになります。
【from】で要素の動き出しの位置と状態等を設定しています
【to】で最終的な要素の位置と状態等を設定しています。
実際にどのように動くかは、色々と試してみると良いかもしれません。
フェードインで出てくる
完成図
gifなのでやはりカクカクしてますが、実際にはもっとスムーズに表示されます。
下からフェードインで表示される感じですね。
コードを追記
フェードインを適用させるためには以下のコードを追記します。
.logo{
animation-name:fdin;
animation-duration:2s;
}
@keyframes fdin{
from {
opacity:0;
transform: translateY(10px);
}
to {
opacity:1;
transform: translateY(0);
}
}解説
内容的には、先程ものとほとんど同じです。
もし変更するとしたら、アニメーションの時間とスタートの位置だと思います。
アニメーションの時間を変更する場合は、【animation-duration】の数値を変更してください。
スタートの位置を変更するには、【from】の【translateY()】の数値を変更してください。
これだけで簡単にできます！
まとめ
アニメーションを使うと一気におしゃれ感が増すような気がします。
大きくサイトのイメージを変えたい場合は、このようにアニメーションを使うのも一つの手ですよ！
コピペも良いですが・・・
Cocoonは高機能で人によってはカスタマイズなんて必要ないかもしれませんが、HTMLやCSSの知識あるとないとでは、トラブルがあった時に大きく違ってきます。
コピペも便利ですが、専門の本などを併せて使用すると、理解度がぐっと深まりますよ！
私が使用したおすすめの本はこちらです。
コメント