雪を降らせる効果を簡単に実装できるjQueryプラグイン-Snowfall

画面内に雪をはらはらと降らせるjQueryのプラグインです。この季節にぴったりではらはら降る雪を眺めていると飽きません。とてもかわいいです。

ダウンロード

Jquery Snowfall Plugin 1.4

使い方

画面全体だけでなく、指定したボックス内だけ雪を降らせる事もできますし、オプションを追記すれば雪の大きさや落ちてくる速度なども変えられます。

<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>

Related Article

No Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル スライドショー コンテンツ 素材 jQueryプラグイン Facebook php 引っ越し お知らせ JavaScript CSS カテゴリー Shareボタン IE 投稿タイプ seo Photoshop HTML5 レスポンシブ サイドバー ナビゲーション タクソノミー WPセキュリティ Git カスタムメニュー Macアプリ PHPリファレンス SVG query_posts API WP使い方 iTunes データベース コメント function RSS 条件分岐 get_posts() スマートフォン Sass/Compass マルチサイト機能