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

f:id:syofuso:20161224004855j:plain

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

ブログ背景に雪を降らせるエフェクト
雪を降らせるエフェクト jQueryなど
- おまけ　サンタは今どこ？Google マップで探してみよう

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

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;
}