css3で雪降らし(ネタ) – Merry X'mas!

CSS, ネタ

メリークリスマス!

というわけでむか~し見たことがあるような、雪が降るエフェクトをCSS3でやってみました。

こんな感じに雪が降り出します。
※Chrome4、Safari4↑では表示確認済みですが、Chromeの方がお勧めです。

詳細とブックマークレットは続きから。

ブックマークレット

  1. snow effect[kzms2]←をお気に入り登録(ブックマーク)します。
  2. 雪を降らせたいページでクリックします

以上です。

ちょこっとだけ説明

雪球(?)の作り方

●っぽい物が上から降ってくると思いますが、これはborderのみで実装しています。
どういうことかというと…
border-width:5px solid #fff;
-webkit-border-radius:5px;

というように、ボーダーの太さと、角丸の径の大きさをそろえると丸い形になるのでそれを利用しています。

アニメーションの基本設定

遅延させる時間、アニメーションさせる時間、開始位置、などはJavascriptで付与していますが、アニメーション自体はCSS3のみでやっています。

アニメーションの詳細部分

アニメーションの詳細は、基本的には以下のようになっています。
kzms2snow1{
 0%{}
 100%{top:1500px;margin-left:0;}
}

まとめ

  1. Javascriptでやるよりは軽いけれども、若干重いかも…
  2. というよりこれそもそも誰得?

昔ふるいサイトで、こういうサイトありましたよね!
まあ思いつきでやったネタということで…!

皆様よい聖夜をっ

1件のコメント »

  1. Blog書きました!誰得? css3で雪降らし(ネタ) – Merry X’mas! | kzms2 – html,css,javascript http://bit.ly/4ZM8HE

    トラックバック by ずま/Zuma — 2009/12/25 金曜日 @ 13:24:24

コメントを入力

コメント欄

Available Feeds

ブログ内検索

Profile

ずま/Zuma
Zuma
TwitterはてなブックマークTumblrFriendFeedGoogle リーダー
  • 読み込みエラーです。しばらく経ってから確認してみてください。

某ポータルWebデザイナー。世間的にはマークアップな人。 html,css,javascript大好き。最近はcss3がお気に入り。phpとasも気になるお年頃。僕はどこへ向かうのか。dot3というユニットでも活動中。http://dot3.jp [tag]iPhone,music,design,wordpress

Face book

最近の活動

Dreamweaver Town Meeting in Tokyo

Dreamweaver Town Meeting in Tokyoに出演しました。