ＳＱＬの窓 イラストAC フリー素材
<< Android Studio 1.4.1 : Android 純正 Da… | TOP | tableMagic : 単純に JSON から TABLE、T… >>

2015年11月19日

雪を降らす snowstorm.js の 特定 DIV 内での実装

 
何故か、単純に指定するとズレるので、いろいろやってみました。が、どうも DIV の下で雪が止まってくれません。けっこう適当なライブラリですね。

と、思ったら snowStorm.flakeBottom = 500; を指定したらうまく行きました。

ページ全体でのデモ
ふふふふふ 
雪のキャラクタを変更して、雪の結晶を使って CSS アニメーションで回転させています

<style>
@-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>
<div style="width:500px;overflow:hidden; margin:60px auto">
<div id="snow_container" style="width:540px;overflow:hidden;position:relative;">
<img src="https://lh3.googleusercontent.com/-om6S8qEPmiQ/VZetF28tQnI/AAAAAAAAbPc/x1aQ7Uj2QVU/s500-Ic42/143594651057721985634.jpg">
</div>
ふふふふふ

</div>
<script>
snowStorm.excludeMobile = false;
snowStorm.animationInterval = 50;
snowStorm.flakesMax = 64;
snowStorm.className = "mysnow"
snowStorm.flakeWidth = 16;
snowStorm.flakeHeight = 16;
snowStorm.snowCharacter = '&#10052;';
snowStorm.targetElement = 'snow_container';
snowStorm.flakeBottom = 500;
</script>


snowstorm.js
タグ：javascript
【JavaScriptの最新記事】
posted by at 2015-11-19 17:06 | JavaScript | このブログの読者になる | 更新情報をチェックする


Powered by Seesaa