【Cocoon】ページ全体を下から上にフェードインさせるアニメーション設定

管理人
管理人

こんにちは!!ブログマネちる.comの管理人のよしです。

ページ全体を下から上にフェードインさせるアニメーション設定をご紹介します。現在の私のブログにも実装されている設定です。

完成前のイメージ

記事をクリックしても設定をしていないとこのようにフェードインしてきません。このブログは当ブログで愛用しているcocoonの公式ホームページでseasonsのスキンを設定しています。

完成後のイメージ

クリックすると記事が上から下にフェードインして来るイメージです。

カスタマイズ方法

#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;}
}
タイトルとURLをコピーしました