SQLの窓

2015年11月16日


クリスマスに備えて、『雪を降らす snowstorm.js』のカスタマイズ / ダウンロードも何も必要ありません。jQuery も必要ありません

ダウンロードも何も必要ありません。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 = '&#10052;';
</script>
二つの大きなカスタマイズ

もともとは、小さな点を使っで雪を降らしていますが、キャラクタを自由に変更できるので、もともとある雪の結晶のような "❄" を使用しています。キャラクタのサイズが倍になるので、幅と高さを変更しています。

さらに、CSS のアニメーションを使用して一つ一つの雪の結晶を回転させています。

モバイル対応

モバイルで動作させるには、以下の設定が必要です。厳密な違いは解りませんが、作者は『バッテリーに悪影響あり』とほのめかしておられます。
snowStorm.excludeMobile = false;

CPU にやさしく

以下の設定は不用意に CPU を使わないようになる事が期待できます

snowStorm.animationInterval = 50;
snowStorm.flakesMax = 64;


関連する記事

雪を降らす snowstorm.js の 特定 DIV 内での実装
【改造】雪を降らす snowstorm.js に 風向きを外部から設定できるオプションを追加しました




タグ:javascript cdnjs
【JavaScript ライブラリの最新記事】
posted by lightbox at 2015-11-16 20:40 | Comment(0) | JavaScript ライブラリ | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
PHP正規表現チェッカー
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり