雪を降らせる効果を簡単に実装できるjQueryプラグイン-Snowfall
画面内に雪をはらはらと降らせるjQueryのプラグインです。この季節にぴったりではらはら降る雪を眺めていると飽きません。とてもかわいいです。
ダウンロード
使い方
画面全体だけでなく、指定したボックス内だけ雪を降らせる事もできますし、オプションを追記すれば雪の大きさや落ちてくる速度なども変えられます。
＜head＞内でjQuery本体とsnowfall.jqueryを読み込んだ後に、下記のコードを記入します。（配布先サイト参照）
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="js/snowfall.jquery.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
$(document).snowfall();
});
</script>
基本的にはコレだけで雪の効果を実装できます。
下記のオプションを追記すれば、雪の大きさやスピード等を変更できます。
flakeCount : 35, // number flakeColor : '#ffffff', // string flakeIndex: 999999, // number minSize : 1, // number maxSize : 3, // number minSpeed : 2, // number maxSpeed : 3, // number round : false, // bool shadow : false // bool
上記のオプションでは以下のように指定できます。
$(document).ready(function(){
$(document).snowfall({
shadow : true, // 影あり
minSize: 5, // 小さい雪のサイズを 5px
maxSize:8 // 最大サイズを 8px
})
});
↓↓↓実際に使ってみました
Jquery Snowfall demo
使ってみたdemoのコードは以下です。
head内
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Jquery Snowfall Plugin 1.4｜Jquery Snowfall Plugin 1.4デモ</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="js/snowfall.jquery.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
$(document).snowfall();
});
</script>
<style type="text/css">
.content{
width: 100%;
min-height: 600px;
background: url(images/p01.jpg) no-repeat;
background-size: 100%;
}
</style>
</head>
content内コード
<div class="content"> <p>サンプルデモ - Snowfall</p> </div>
No Comments & Tracbacks