SQLの窓

2018年02月02日


JQuery-Snowfall で、ページや記事に花びらを舞い落ちるようにする

重要

特定の要素内のみで処理するには、その要素の中で position:absolute が作成されるので、position:relative を指定されたエリア内で行って下さい。

記事最後にこの記事内のみで舞うボタンがあります。
配布元は、Github ですがもう 2年くらい更新はされていないようですが、元々短いコードでとてもうまく動作します。 また、ダウンロードせずとも、cdnjs でホスティングされているのですぐ使えます。 使い方もシンプルですがオリジナルのデモページのソースを見れば、コードの読める方ならすぐ理解できると思います。ただ、deviceorientation に関しては、ソースのコメントにしか意味が書いて無かったようですが(On newer Macbooks Snowflakes will fall based on deviceorientation)、Macbook 専用の機能なのか、スマホ用なのか、ディスプレイが縦と横が変化する場合の対処モードのようです(未確認)。 以下が、一般的なWEBページ用の実装サンプルです(対象を document として、ページ全体に効果を反映させる) 元々は Snowfall なので画像なしで使えるのですが(そのほうがバリエーションも作成しやすい)、画像次第でいろいろなシチュエーションに使えると思います。 ここでは『花びら』ですが、画像の場合は2枚以上用意してそれぞれに対して snowfall を実行するといいです。また、場面によっては最初から実行したい場合もあるので、clear オプションで一旦無かった事にします。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/JQuery-Snowfall/1.7.4/snowfall.jquery.min.js"></script>
<script>
$(function(){

	$(document).snowfall('clear');

	$(document).snowfall({
		image: "https://lightbox.sakura.ne.jp/image/h1.png",
		flakeCount:10,
		minSize: 15,
		maxSize: 22,
		minSpeed:0.5,
		maxSpeed:1.5
	});

	$(document).snowfall({
		image: "https://lightbox.sakura.ne.jp/image/h2.png",
		flakeCount:10,
		minSize: 15,
		maxSize: 22,
		minSpeed:0.5,
		maxSpeed:1.5
	});

});
</script>


このコードをリアルタイムでコードを変更しながら試して見たい場合は、右上ツールバーのコピーボタンでクリップボードへコピーして、こちら(Run Page : リアルタイム html)のテキストエリアに貼り付けて『ページ作成』ボタンをクリックして下さい

▼ 実行イメージ


▼ このボタンでこの記事に花びらを



【プラグイン:jQueryの最新記事】
posted by lightbox at 2018-02-02 14:44 | プラグイン:jQuery | このブログの読者になる | 更新情報をチェックする
container 終わり

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

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり