この記事ではCocoonでページ全体がふわっとフェードインするアニメーションを実装する簡単CSSカスタマイズを紹介しています。
こんにちは、さいとうです。
特にJINなどで作られたブログを見ていると、ページを開いた瞬間に各要素がふわっとフェードインしてきて「スゲー！」となりますよね。
じつはあれ、CSSだけで比較的簡単に導入できるんです。もちろんスマホ対応です。
重くなっては元も子もないですが、導入後のPageSpeed InsightsのスコアもGoodを記録しているので重くなるということもないでしょう。
ちなみにこのコードはオリジナルです（他テーマからパクってきたりはしていません）。
当カスタマイズのアイデア元となったJINを開発してくださったひつじさん、赤石カズヤさんにこの場を借りて御礼申し上げます。
（実はこのCSSは公開したくなかったけれどCocoonのさらなる繁栄のために貢献しなければ……！）
コピペでOK！Cocoonでフェードインデザインを実装しよう。
Cocoon子テーマのstyle.cssに記述していきます。
「外観」→「テーマの編集」→「スタイルシート(style.css)」に下記コードを追記してください。
#main{
animation: fadeIn 1s ease-out 0s 1 normal;
}
#sidebar {
animation: fadeIn 1s ease-out 0s 1 normal;
}
@keyframes fadeIn {
from {transform: translateY(10%); opacity: 0;}
100% {transform: translateY(0%); opacity: 1;}
}
#header-container {
animation: Down 1s ease-out 0s 1 normal;
}
@keyframes Down {
from {transform: translateY(-10%); opacity: 0;}
100% {transform: translateY(0%); opacity: 1;}
}
#breadcrumb {
animation: Right 1s ease-out 0s 1 normal;
}
@keyframes Right {
from {transform: translateX(10%); opacity: 0;}
100% {transform: translateX(0%); opacity: 1;}
}これで「ヘッダー部分は上から、パンくずリストは右から、メインカラムとサイドバーは下からフェードイン」してくれます！
CSSを縮小化する際は「縮小化除外CSSファイルの文字列を入力」欄に「https://ドメイン/wp/wp-content/themes/cocoon-child-master/style.css」を入力してみてください！
その他のCocoonカスタマイズ
当サイトのようにモバイル表示時にフッターにSNSシェアボタンを固定したい場合は下の記事が参考になるかと思います。
その他カスタマイズは以下から。
【支援お待ちしております！】
当サイトが役に立ったと思ったら投げ銭サービスpolcaで支援していただけたら幸いです！（300円単位での投げ銭が可能です）
継続的な更新・サポートのためにご支援お願いいたします……！
▶支援先：サイトに掲載するCSSカスタマイズの支援をお待ちしています！
その他のカスタマイズは下記ボタンから。
コメント
カスタマイズ情報すごく参考になります。
CSS縮小時にどうしても適用されなくなってしまいます。
キャッシュ削除やスーパーリロードも試し、このコード以外のCSSなどは追加しておりません。
プラグインも全て外し、その他もデフォルトの状態です。
CSSを縮小化しなければ使用できるのですが、何か考えられる点などございますか？
お忙しいとは思いますが、よろしくお願いいたします。
コメントありがとうございます！
8/30に修正版CSSコードを掲載しています。
そちらを使用されていますでしょうか？
初めまして。
cocoonのカスタマイズ、参考にさせてもらっています。
この記事にある通り、コードを貼り付けましたが、メインカラムのフェードインだけがどうしてもうまくいきません。
なぜでしょうか？
サイドバー、パンくずリスト、ヘッダーロゴはうまく動くのですが。
あと、ちなみに私もCSS縮小時は適用されませんので、CSS縮小のチェックを外して適用しています。
⬇︎これが実際にCSSに追加したコードです。間違いがありましたらご教授願います。
#main {
animation: fadeIn 1s ease-out 0s 1 normal;
}
#sidebar {
animation: fadeIn 1s ease-out 0s 1 normal;
}
@keyframes fadeIn {
from {transform: translateY(50%); opacity: 0;}
100% {transform: translateY(0%); opacity: 1;}
}
#header-container {
animation: Down 1s ease-out 0s 1 normal;
}
@keyframes Down {
from {transform: translateY(-50%); opacity: 0;}
100% {transform: translateY(0%); opacity: 1;}
}
#breadcrumb {
animation: Right 1s ease-out 0s 1 normal;
}
@keyframes Right {
from {transform: translateX(50%); opacity: 0;}
100% {transform: translateX(0%); opacity: 1;}
}
コメントありがとうございます。実際に不具合が発生しているサイトを検証ツールを使って見ていく必要がありそうです。
樽石さん
私もメインカラムのフェードインだけ動かなかったのですが、これで上手く動きました！
一度、試してみてください。
/************************************
**ページ全体がふわっとフェードイン
*************************************/
#header-container {
animation: Down 1s ease-out 0s 1 normal;
}
@keyframes Down {
from {transform: translateY(-10%); opacity: 0;}
100% {transform: translateY(0%); opacity: 1;}
}
#breadcrumb {
animation: Right 1s ease-out 0s 1 normal;
}
@keyframes Right {
from {transform: translateX(100%); opacity: 0;}
100% {transform: translateX(0%); opacity: 1;}
}
.main,.sidebar{
animation-name:fadein;
animation-duration: 2s;
}
@keyframes fadein{
from {
opacity: 0;
transform: translateY(800px);
}
to {
opacity: 1;
transform: translateY(0);
}
}