Minimal Green

はてなブログカスタマイズや、HTML、CSS、サイト制作などについて書いています。

ブログをクリスマス仕様に CSSでブログに雪を降らせるエフェクト・アニメーション

f:id:syofuso:20161224004855j:plain

明日はクリスマス・イブですね。
期間限定で25日までブログ背景とヘッダー画像をクリスマス仕様にします。

ブログ背景に雪を降らせるエフェクト

CSS3のanimationで雪の画像を左上から右下へ移動させて雪が降る表現をしています。
参考:CSS Snow Effect | Brad S. Knutson
こちらの↑のBrad S. Knutsonさんの記事で公開されているコードを利用しました。

Let’s style the background with these images. I’ve uploaded them to Imgur, feel free to use them.

と「この画像で背景にスタイルを適用しよう。この画像は自由に使えるようにImgurにアップロードしました。」とおっしゃっているのでそのまま画像のURLを利用させていただいています。

使い方は簡単、背景に雪を降らせたいセレクタに以下ようにスタイルを指定するだけ。(本家と色を変えています)

/* snow effect背景色変化あり */
@-webkit-keyframes snow { 
    0% { background-position: 0px 0px, 0px 0px, 0px 0px }
    50% { background-color: #eaf2f6; }
    100% {
        background-position: 500px 1000px, 400px 400px, 300px 300px;
        background-color: #b4cfe0;
    }
}
@-moz-keyframes snow {  
    0% { background-position: 0px 0px, 0px 0px, 0px 0px }
    50% { background-color: #eaf2f6; }
    100% {
        background-position: 500px 1000px, 400px 400px, 300px 300px;
        background-color: #b4cfe0;
    }
}
@-ms-keyframes snow {  
    0% { background-position: 0px 0px, 0px 0px, 0px 0px }
    50% { background-color: #eaf2f6}
    100% {
        background-position: 500px 1000px, 400px 400px, 300px 300px;
        background-color: #b4cfe0;
    }
}
@keyframes snow {  
    0% { background-position: 0px 0px, 0px 0px, 0px 0px }
    50% { background-color: #eaf2f6; }
    100% {
        background-position: 500px 1000px, 400px 400px, 300px 300px;
        background-color: #b4cfe0;
    }
}
body {
     background-color: #eaf2f6;
     background-image: url('http://i.imgur.com/BiSmXaq.png'), url('http://i.imgur.com/XHuy0NJ.png'), url('http://i.imgur.com/okpRxJU.png');
    -webkit-animation: snow 20s linear infinite;
    -moz-animation: snow 20s linear infinite;
    -ms-animation: snow 20s linear infinite;
    animation: snow 20s linear infinite;
}

ヘッダーやフッターの背景に指定したいときはbody以下のところを

#globalheader,#blog-title,#footer {
     background-color: #eaf2f6;
     background-image: url('http://i.imgur.com/BiSmXaq.png'), url('http://i.imgur.com/XHuy0NJ.png'), url('http://i.imgur.com/okpRxJU.png');
    -webkit-animation: snow 20s linear infinite;
    -moz-animation: snow 20s linear infinite;
    -ms-animation: snow 20s linear infinite;
    animation: snow 20s linear infinite;
}

に変更すればOK。

このブログでは背景色の変化を無くしています。(@keyframes snowのbackground-colorを消す)

/*snow effect背景色固定 */
@-webkit-keyframes snow { 
    0% { background-position: 0px 0px, 0px 0px, 0px 0px }
    100% {
        background-position: 500px 1000px, 400px 400px, 300px 300px;
    }
}
@-moz-keyframes snow {  
    0% { background-position: 0px 0px, 0px 0px, 0px 0px }
    100% {
        background-position: 500px 1000px, 400px 400px, 300px 300px;
    }
}
@-ms-keyframes snow {  
    0% { background-position: 0px 0px, 0px 0px, 0px 0px }
    100% {
        background-position: 500px 1000px, 400px 400px, 300px 300px;
    }
}
@keyframes snow {  
    0% { background-position: 0px 0px, 0px 0px, 0px 0px }
    100% {
        background-position: 500px 1000px, 400px 400px, 300px 300px;
    }
}
body {
    background-color: #dbe8f0;
     background-image: url('http://i.imgur.com/BiSmXaq.png'), url('http://i.imgur.com/XHuy0NJ.png'), url('http://i.imgur.com/okpRxJU.png');
    -webkit-animation: snow 20s linear infinite;
    -moz-animation: snow 20s linear infinite;
    -ms-animation: snow 20s linear infinite;
    animation: snow 20s linear infinite;
}

DEMO(ヘッダー背景に指定):すとらいぷ

ヘッダー画像のスノードームはFreepikのイラストをお借りしています。
ヘッダー素材:Christmas ベクター画像 designed by Freepik

雪を降らせるエフェクト jQueryなど

jQuery・JavaScriptを使う方法などはNaifixさんがまとめられています。
naifix.com初心者でも簡単!ブログに雪を降らせる方法まとめ

CSSで素敵なクリスマスを。

Happy Holidays!

おまけ サンタは今どこ?Google マップで探してみよう

Santa's Village — Google Santa Tracker

注意:こちらのコードを紹介するときは原典のBrad S. Knutsonさんの記事を引用・参考元として併記して下さい。孫引きはやめましょう。
言及のルール | レポートのコツ | 受講サポート | ここはどこ?
孫引きはなぜいけないのか - 蟹亭奇譚