ダウンロードも何も必要ありません。jQuery も必要ありません。ただ、cdnjs より URL をコピーして『ページに埋め込むだけです』 配布サイトのオプションの説明 デモページただ、そのままではあまりにも工夫が無いので、少しオプションを設定しています。
<style>
body {
background-color:#000000;
}
@-webkit-keyframes snow-rotate {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes snow-rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@-o-keyframes snow-rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes snow-rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.mysnow {
color:#e0e0e0!important;
-webkit-animation: 1.85s snow-rotate steps(8) infinite;
-moz-animation: 1.85s snow-rotate steps(8) infinite;
-o-animation: 1.85s snow-rotate steps(8) infinite;
animation: 1.85s snow-rotate steps(8) infinite;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Snowstorm/20131208/snowstorm-min.js"></script>
<img src="https://lh3.googleusercontent.com/-Chj58uY2pjs/Vht0XOX3l-I/AAAAAAAAcCs/ijZAwj3NNQY/s1000-Ic42/silver_a2.png">
<script>
snowStorm.excludeMobile = false;
snowStorm.animationInterval = 50;
snowStorm.flakesMax = 64;
snowStorm.className = "mysnow"
snowStorm.flakeWidth = 16;
snowStorm.flakeHeight = 16;
snowStorm.snowCharacter = '❄';
</script>
二つの大きなカスタマイズ もともとは、小さな点を使っで雪を降らしていますが、キャラクタを自由に変更できるので、もともとある雪の結晶のような "❄" を使用しています。キャラクタのサイズが倍になるので、幅と高さを変更しています。 さらに、CSS のアニメーションを使用して一つ一つの雪の結晶を回転させています。 モバイル対応 モバイルで動作させるには、以下の設定が必要です。厳密な違いは解りませんが、作者は『バッテリーに悪影響あり』とほのめかしておられます。 snowStorm.excludeMobile = false; CPU にやさしく 以下の設定は不用意に CPU を使わないようになる事が期待できます snowStorm.animationInterval = 50; snowStorm.flakesMax = 64; 関連する記事 雪を降らす snowstorm.js の 特定 DIV 内での実装 【改造】雪を降らす snowstorm.js に 風向きを外部から設定できるオプションを追加しました
タグ：javascript cdnjs
|
|
【JavaScript ライブラリの最新記事】
- clipboard.js を使用してテキストをコピーする際に clipboard.js が必要とするパーツと意味
- clipboard.js のコピーさせるテキストを自由にダイナミックに渡す方法は、Advanced Usage の text です。
- JavaScript の内部コード文字列を SHIFT_JIS としてダウンロードさせる方法
- 自サイト(logical error を含む)で使用している SyntaxHighlighter のツールバーの問題点をごっそり自前で修正・カスタマイズしました。( その2 / ソースをクリップボード..
- 自サイト(logical error を含む)で使用している SyntaxHighlighter のツールバーの問題点をごっそり自前で修正・カスタマイズしました。( その1 / ソースの表示 )
- ブラウザ上のテキストデータを名前を付けて保存できる FileSaver.js を使って、テーブルのデータを Excel で開ける事を想定した CSV にして PC に保存
- JavaScript のみで、SHIFT_JIS や EUC-JP を UrlEncode に近い Escapeする Escape Codec Library
- JavaScript でクリップボードに文字列をコピーする Clipboard.js の使用方法と注意事項
- Lightbox2 ライブラリの今時の使い方
- Google Visualization API って apikey いらなくなった? / ライブラリロード方法が変わってました
- Lightbox2 で data-title にボタンを埋め込んで、クリックしたら 画像のファイル名を取り出して Lightbox2 を閉じるギャラリーのデモ
- EASELJS を使用した画像の分割と分割されたエリア毎のアニメーション / createjs.Ticker の reset と init はうまく動きませんでした
- EASELJS を使用した画像の縮小とトリミングと角丸マスク / 画像は new Image でイベント処理して画像サイズを取得します
- Three.js r73 での Canvas で平面を飛翔させる為の詳細デモ
- JavaScript : 誰でもすぐ使える Google 円グラフ(2) : データを Google ドキュメントから取得する
- JavaScript : 誰でもすぐ使える Google 円グラフ
- カラーピッカーのライブラリなのですが、ちょっと雑な作りだったので、修正してリリースです。
- google.load で Yahoo UI のメニューを使う
