\ Advertisements/

コピペで簡単|ページ全体がふわっと表示されるカスタマイズについて

CocoonカスタマイズふわっとCocoon
この記事は約4分で読めます。

まいどおおきに!コクーンの無料カスタム相談をしています。おおもと(@so88qa)です

今回のカスタマイズは、コピペで簡単にできる「ページ全体がふわっと表示されるカスタマイズ」を紹介します。

ふわっと表示

フェードインの動きはマサオカブログを参考にしました。

コクーンのカスタマイズだけではなく、ほとんどのブログで使えるコピペで簡単なカスタマイズとなっているので、興味のある方はぜひ最後まで読んでください。

『Cocoon』CSSを使ってユーザービリティーをあげる方法
コクーンのカスタマイズ記事です! 今回のカスタマイズは、SANGOにも使われているマテリアルデザイン! このマテリアルデザインに必要ふかけるな影を使ったカスタマイズです! SANGOのようにカスタマイズしたいなら絶対読めよな!

\ Advertisements/

ページ全体がふわっと表示されるコード

/*ロード中にふわっと表示*/


#main,#sidebar{/*ヘッダーサイドバーの項目*/
  animation: fadeIn 1s ease-out normal;/*フェードインの設定*/
}

@keyframes fadeIn {/*フェードインの詳細な動き*/

from { /*フェードインの始まりの項目*/
  opacity: 0;/*始まりの透明度*/
  transform: translateY(10px)/*縦軸の始まりの位置*/
}

to{/*フェードインの終わりの項目*/
  opacity: 1;/*終わりの透明度*/
  transform: translateY(0%)/*縦軸の終わりの位置*/
}

}

#header-container {/*ヘッダーの項目*/
  animation: down .5s ease-out normal;/*ダウンの設定*/
}

@keyframes down {/*ダウンの詳細な動き*/

from {/*ダウンの始まりの項目*/
  opacity: 0;/*始まりの透明度*/
  transform: translateY(-5px)/*縦軸の始まりの位置*/
}

to{/*ダウンの終わりの項目*/
  opacity: 1;/*終わりの透明度*/
  transform: translateY(0%)/*縦軸の終わりの位置*/
}

}

\ Advertisements/

コードの解説

今回は「animation」というプロパティーを使っています。

animationプロパティでは

  • animation-name・・・動き
  • animation-duration・・・速度
  • animation-timing-function・・・タイミング進行割合
  • animation-delay・・・開始タイミング
  • animation-iteration-count・・・繰り返しの回数
  • animation-direction・・・交互に反転再生させるかどうか

の6つのプロパティー値を組み合わせて指定することができます。(省略された値は初期値)

今回のコードを分解すると

#main,#sidebar{/*ヘッダーサイドバーの項目*/
  animation-name:fadeIn;/*動きはフェードイン*/
  animation-duration:1s;/*1秒間で変化する*/
  animation-timing-function:ease-out;/*ゆっくり終わる*/
  animation-delay:0;/*初期値*/
  animation-iteration-count:1;/*初期値*/
  animation-direction:normal; /*普通の方向で繰り返す*/
 }

というようになっています。

さらに、「@keyframes ○○」というコードを使ってアニメーションの開始から最後までの詳細な動きを指定できます。(○○にはanimation-nameを入れてください。)

\ Advertisements/

まとめ

今回は、コピペで簡単にできる「ページ全体がふわっと表示されるカスタマイズ」を紹介でした。

  • #main
  • #sidebar
  • #header-container

などのタグを自分のブログに合わせれば、どのブログでも使える便利なカスタマイズです。

興味のある方はぜひ一度試してみてください。

『Cocoon』CSSを使ってユーザービリティーをあげる方法
コクーンのカスタマイズ記事です! 今回のカスタマイズは、SANGOにも使われているマテリアルデザイン! このマテリアルデザインに必要ふかけるな影を使ったカスタマイズです! SANGOのようにカスタマイズしたいなら絶対読めよな!

この記事はこれで終わりです。

オススメ記事もぜひご覧ください。

おおもと
おおもと

質問などがあれば、コメント覧に書き込んでくださいね!

タイトルとURLをコピーしました