春風そよよ〜!桜の花びらがヒラヒラ舞い落ちる JavaScript だよー!

さくらのスクリプト
なんか今年は桜が咲く時期がはやくなかったですか〜?

もう桜は満開だね!

毎年この時期になるとこういう JavaScript を書いてみたいと思っていたのですが、なかなか実力も伴わず断念していましたが今年は頑張って作ってみました。もっと早く書きたかったのですが遅めに咲きました。

今回の JavaScript は、いつも通りサイトで使っていただく事を想定して書いていますがあまり丁寧に解説はしていません。カスタマイズや設置方法は関連記事を参考に導入してみてください。JavaScript、CSS3 の transformanimation 等を使っています。

今回の記事はカスタマイズ?アレンジしやすい様に、極力 style タグ内で指定してみました。なのでリアリティは欠くかもしれませんw

桜の JavaScript をカスタマイズ&導入しやすい記事を書いたのでそちらもどうぞ!
ヒラヒラうふふ!桜の JavaScript のカスタマイズ方法から導入・設置まで!

桜の花びらを用意!

色々と方法はあると思うのですが、今回は div と after で作ってみました。
まずベースとなる div を1つ用意します。

ピンクの div を1つ

ピンクで正方形の状態です。

<div class="hana"></div>
<style>	
.hana{
	position:absolute;
	height:0;
	width:0;
	border: 10px solid pink;
}
</style>

この正方形はボーダーのみで作っています。

div を花びらっぽく

左上右下を丸く!

<div class="hana"></div>
<style>
.hana{
	position:absolute;
	height:0;
	width:0;
	border: 10px solid pink;
	border-radius: 15px;
	border-top-right-radius: 0;
	border-bottom-left-radius: 0;
}
</style>

最初は「border-radius: 20px;」あたりで書いてみたんですが、桜の花びらって結構丸めなんですよね。シャープな方が好きな人は数値を高めにしてみてください。今回はプックリと丸めで 15px でいきます!

after を追加して重ねる

さくらの花びらっぽくなったね!

<div class="hana"></div>
<style>	
.hana{
	position:absolute;
	height:0;
	width:0;
	border: 10px solid pink;
	border-radius: 15px;
	border-top-right-radius: 0;
	border-bottom-left-radius: 0;
}
.hana::after{
	content:"";
	display:block;
	position:absolute;
	top:-7px;
	left:-7px;
	height:0;
	width:0;
	border: 10px solid pink;
	border-radius: 15px;
	border-top-right-radius: 0;
	border-bottom-left-radius: 0;
	-webkit-transform: rotate(15deg);
	-ms-transform: rotate(15deg);
	transform: rotate(15deg);
}
</style>

after でもう1枚用意して少し角度をつけて重ねています。良い感じじゃないですか〜?プックリ、プックリw

ユラユラ落下させてみる!

ユラユラ落下させた桜の花びら

ここからが本番です!まずはシンプルにユラユラしながらの落下をさせてみます。スクリプトは「クリスマスに使いたい!雪のパーティクルをチラチラ降らす JavaScript を作ってみよー」がベースになっています。(使い回しですねw)

デモをみる
download

コードにコメント入れてとくよ!

記事全体を使って今回のような落下系のすごく丁寧な説明を書こうとか思ってたりするのですが、まだ書けていませんw 簡単ではありますがソースコードにコメント入れておきます。

JavaScript の呼び出し部分

<body>
	<script src="./sakura.8222.1.js"></script>
</body>

本体の html ファイルからの呼び出し部分。閉じ body タグ直前に script タグで読み込みしてください。JavaScript 側で appendChild で body への要素の追加をおこなっているので head 内で実行するとエラー出ます。もしくは window.onload 使うとかしてください。

桜のスクリプト!

(function(d,b,w){
	var q = d.createElement('div'); // div 用意
	q.id = "sakura"; // id は sakura を
 
	// 上の div に style を追加
	q.innerHTML = 'html,body{overflow-x:hidden;}.hana{position:absolute;height:0;width:0;border: 10px solid pink;border-radius: 15px;border-top-right-radius: 0;border-bottom-left-radius: 0;}'+
	'.hana::after{content:"";display:block;position:absolute;top:-7px;left:-7px;height:0;width:0;border: 10px solid pink;border-radius: 15px;border-top-right-radius: 0;border-bottom-left-radius: 0;-webkit-transform: rotate(15deg);-ms-transform: rotate(15deg);transform: rotate(15deg);}';
	b.appendChild(q);
 
	var h = w.innerHeight; // window の高さ
	var u = d.documentElement.scrollTop || b.scrollTop; // スクロール位置
	var z = 9999; // z-index 開始値
	var t = new Array(); // top 値の配列
	var l = new Array(); // left 値の配列
	var y = new Array(); // ゆらぐ最大値の配列
	var s = new Array(); // 落下スピードの値の配列
	var g = new Array(); // 花びら1枚1枚用の id の配列 
	var c = new Array(); // ゆらぎのカウントの配列
 
	// スクロールした時に u の値を更新
	d.addEventListener('scroll',function(){u = d.documentElement.scrollTop || b.scrollTop;},false);
 
	// 花びら30枚用意する為のループ
	for(var i=0;i&lt;30;i++){
		var m = d.createElement(&#039;div&#039;); // div 用意
		m.id = &#039;hanabira&#039;+i; // 花びらの id
		t[i] = Math.random()*-1000+u; // 花びらの最初の top
		l[i] = Math.random()*w.innerWidth; // 花びらの最初の left
		m.setAttribute(&#039;class&#039;,&#039;hana&#039;); // class を追加
		m.setAttribute(&#039;style&#039;,&#039;z-index:&#039;+(z+i)+&#039;;top:&#039;+t[i]+&#039;px;left:&#039;+l[i]+&#039;px;&#039;); // style を追加
		q.appendChild(m); // 最初の div に花びらの div を追加
		y[i] = Math.random()*40+5; // ゆらぐ最大幅
		s[i] = Math.random()*5+2; // スピード
		g[i] = d.getElementById(&#039;hanabira&#039;+i); // id 指定
		c[i] = 0; // ゆらぎの初期値
	}
 
	// 花びらを繰り返し動かす部分
	setInterval(function(){
		for(var i=0;i&lt;30;i++){
			if(t[i]<u>=c[i]){ // ゆらぎの値が最大値以下なら
					l[i] = l[i]+0.5+Math.random()*0.5; // left を増やす
				}else{
					l[i] = l[i]-0.5-Math.random()*0.5; // left を減らす
				}
				if((y[i]*2)&lt;=c[i]){ // ゆらぎの折り返しの為にカウントを0に
					c[i] = 0;
				}
			}else{ // ウィンドウの下まで移動した場合
				t[i] = u-40; // top 指定で上に戻す
				l[i] = Math.random()*w.innerWidth; // left 指定
			}
			t[i] = t[i]+s[i]; // top の値を更新
			g[i].style.top = t[i]+&#039;px&#039;; // top をスタイルで更新
			g[i].style.left = l[i]+&#039;px&#039;; // left をスタイルで更新
			c[i]++; // カウンタに1プラス
		}
	},45);
})(window.document,window.document.body,window);

「あ!桜だ!」って捉えやすくはありますが、不自然さがチープに感じる部分もありますよね? これはこれでアリかなw デフォルメの度合いも好みですもんね〜!

花びらに角度をつけてみる!

角度をつけて落下させた桜の花びら

先程は花びらの方向が一定でしたけど、今度は角度をつけて不規則にしてみたいと思います!少し表情が変わってくると思います。

デモをみる
download

角度は transform の rotate で!

.type1{-webkit-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);}
.type2{-webkit-transform: rotate(60deg);-ms-transform: rotate(60deg);transform: rotate(60deg);}
.type3{-webkit-transform: rotate(120deg);-ms-transform: rotate(120deg);transform: rotate(120deg);}
.type4{-webkit-transform: rotate(180deg);-ms-transform: rotate(180deg);transform: rotate(180deg);}
.type5{-webkit-transform: rotate(240deg);-ms-transform: rotate(240deg);transform: rotate(240deg);}
.type6{-webkit-transform: rotate(300deg);-ms-transform: rotate(300deg);transform: rotate(300deg);}

class を6タイプ用意しています。

class をランダムに追加!

var clss = 'hana type'+(Math.floor(Math.random()*6)+1);
m.setAttribute('class',clss);

type1〜type6 の class をランダムにセットしています。

花びらの大きさを変えてみる!

大きさを変えて落下させた桜の花びら

今度は大きさをランダムに変更してみます!大きい花びらと小さい花びらが遠近感を演出してるように感じられるかもしれませんw 小さい花びらほど、色を薄くしてみたりぼかしてみたらもっとリアルなんでしょうね!

デモをみる
download

大きさは transform の scale で!

.type1{-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);}
.type2{-webkit-transform: scale(.9);-ms-transform: scale(.9);transform: scale(.9);}
.type3{-webkit-transform: scale(.8);-ms-transform: scale(.8);transform: scale(.8);}
.type4{-webkit-transform: scale(.7);-ms-transform: scale(.7);transform: scale(.7);}
.type5{-webkit-transform: scale(.6);-ms-transform: scale(.6);transform: scale(.6);}
.type6{-webkit-transform: scale(.5);-ms-transform: scale(.5);transform: scale(.5);}

先ほどと同様に class を6タイプ用意して scale に1〜0.5を指定してランダムにセットしてみました。

花びらの色味を変えてみる!

複数の色味指定してを落下させた桜の花びら

自然に考えれば一本の桜の木からは、一種類の色味の花びらなんですが、光の当たり方や角度によって違うじゃないですか!!(無理矢理ww)個人的には沢山の色と沢山の野菜を愛する人は内面も豊かなような気がしますw カラーは「0to255」から適当に6色ピックアップしました!

デモをみる
download

色味は単純に style を指定しただけ!

.type1{border-color:#ffecf7;}
.type2{border-color:#ffdbf0;}
.type3{border-color:#febae2;}
.type4{border-color:#fea9db;}
.type5{border-color:#fd77c6;}
.type6{border-color:#fd66bf;}
.type1::after{border-color:#ffecf7;}
.type2::after{border-color:#ffdbf0;}
.type3::after{border-color:#febae2;}
.type4::after{border-color:#fea9db;}
.type5::after{border-color:#fd77c6;}
.type6::after{border-color:#fd66bf;}

border の色を上書きしているだけですね〜!意外だったのは、after を別名の class から指定出来る事でした。当たり前と言えばそうなんですが、試した事なかったもので〜!

アニメーションでヒラヒラさせてみる!

ヒラヒラ動きながら落下した桜の花びら

花びらヒラヒラって演出するの難しいですよね〜!色々な動きあるしパターン化するのは簡単ではありません。って事で手抜きアニメーションにしてみましたw

デモをみる
download

ヒラヒラは animation の keyframes で!

.type1{animation:v1 6s infinite;}
.type2{animation:v2 6s infinite;}
.type3{animation:v2 5s infinite;}
.type4{animation:v2 5s infinite;}
.type5{animation:v2 4s infinite;}
.type6{animation:v2 4s infinite;}
@keyframes v1{
	from{transform: rotate(0deg);}
	50%{transform: rotate(270deg);}
	to{transform: rotate(1deg);}
}
@keyframes v2{
	from{transform: rotate(-90deg);}
	50%{transform: rotate(-360deg);}
	to{transform: rotate(-89deg);}
}
@keyframes v3{
	from{transform: rotate(0deg);}
	50%{transform: rotate(270deg);}
	to{transform: rotate(1deg);}
}
@keyframes v4{
	from{transform: rotate(-90deg);}
	50%{transform: rotate(-360deg);}
	to{transform: rotate(-89deg);}
}
@keyframes v5{
	from{transform: rotate(0deg);}
	50%{transform: rotate(270deg);}
	to{transform: rotate(1deg);}
}
@keyframes v6{
	from{transform: rotate(-90deg);}
	50%{transform: rotate(-360deg);}
	to{transform: rotate(-89deg);}
}

270度回転させてから270度反転を繰り返しています。あと逆回転の物も。アニメーションの秒数は4〜6を指定してちょっとでも不規則さを演出w もっと他のスタイル指定してパターンも増やすとクオリティ上がって面白いと思います!
(※ ベンダープレフィックス無しのみピックアップしています。)

たまには横風も欲しい!

横風で流れながら落下させた桜の花びら

「いつも優しいカレに、たまには冷たくされたい!!」みたいな、違いますねw ちょっと強めの風で流されていく桜も綺麗ですよね!!あぁ、なんか儚いw ちょっと CSS だけでは難しいので JavaScript で書いています!左右交互に風が吹くようにしていますよ!

デモをみる
download

たまに吹く横風は JavaScript で!

setInterval(function(){
	for(var i=0;i&lt;30;i++){
		if(t[i]<u+h-40){
			if(y[i]>=c[i]){l[i] = l[i]+0.5+Math.random()*0.5;}else{l[i] = l[i]-0.5-Math.random()*0.5;}
			if((y[i]*2)<=c[i]){c[i] = 0;}
		}else{
			t[i] = u-40;
			l[i] = Math.random()*w.innerWidth;
		}
 
/* ここから横風 */
		// 右に流す
		if(k>=100 && k<=105){l[i] = l[i]+3;} // kが100〜105なら3プラス
		else if(k>=106 && k<=120){l[i] = l[i]+5;} // kが106〜120なら5プラス
		else if(k>=121 && k<=290){l[i] = l[i]+8;} // kが121〜290なら8プラス
		else if(k>=291 && k<=320){l[i] = l[i]+4;} // kが291〜320なら4プラス
		else if(k>=321 && k<=330){l[i] = l[i]+2;} // kが321〜330なら2プラス
 
		// 左に流す
		else if(k>=500 && k<=505){l[i] = l[i]-3;} // kが500〜505なら3マイナス
		else if(k>=506 && k<=520){l[i] = l[i]-5;} // kが506〜520なら5マイナス
		else if(k>=521 && k<=790){l[i] = l[i]-8;} // kが521〜790なら8マイナス
		else if(k>=791 && k<=820){l[i] = l[i]-4;} // kが791〜820なら4マイナス
		else if(k>=821 && k<=830){l[i] = l[i]-2;} // kが821〜830なら2マイナス
 
		else if(k>=900){k = 0;} // kが900ならリセット
/* ここまで横風 */
 
		t[i] = t[i]+s[i];
		g[i].style.top = t[i]+'px';
		g[i].style.left = l[i]+'px';
		c[i]++;
	}
	k++;
},45);

風用のカウント変数「k」をループの中で増加させて行って、その数値が100〜105なら右に 3px 多めに動かす、みたいな事をしています。元々ゆらぎながら落下する仕様なので、そこに多めに数値を足して(引いて)いる感じです。細か目に条件指定して数値を足し引きしてるのは、風の滑らかさを出す為です。いきなり強く流したり止めたりするとかなり不自然な動きになる為でーす!

もっと細かく指定すると滑らかになってクオリティも上がると思います!色々試すと楽しいですよ〜w

全部のせのてんこ盛り!!

自然に近づけて落下させた桜の花びら

今までの要素を全て入れてみました!てんこ盛りは言いたかっただけですw せっかくなので色味、アニメーション、横風の数値など調節してみました!個人的には良い感じに仕上がったと思っていますw

デモをみる
download

ブックマークレットもどうぞ!

もしかしたら、もう花が散ってしまった地域とかあるんじゃないですか?って事で来年までのつなぎにこちらの桜のブックマークレットをどうぞ!ブックマークバー等にドラッグ&ドロップして登録して、お好きなサイトでお使いくださいませ!背景暗めのサイトなら夜桜だね!

桜のブックマークレット

ほぼひとりごと

たまに最後に「ほぼひとりごと」って見出し付けてどうでも良い様な内容書くんですが、かなり久しぶりな印象で見返してみたら長い間書いてませんでした。

う〜ん… この記事もっと早く公開したかったなー!
来年はもっとリアリティのあるスクリプトを書いてみたいと、思うのでしたw

記入ミス等ありましたら教えていただけるとうれしいです!m(__)mペコリ

サイトで使っていただけました!

早速スクリプトを導入していただけたので、ご紹介したいと思います〜!色々とカスタマイズされていると思いますので、実際に覗いてみてくださーい!

Ateitexe

Ateitexe http://ateitexe.com/
*youさんのブログ、Ateitexe で使っていただけました!ありがとうございます〜w すごく早かった…本当にすごくw 少し前にプチ整形されたそうですよ!(※ブログデザインを)

Kana-Lier カナリエ

Kana-Lier カナリエ http://kana-lier.com/
kanaさんのブログ、Kana-Lier カナリエ で使っていただけました!ありがとうございます〜w わたしの中では、かなさんと言えばガーリーだし、ガーリーと言えばかなさんな位定着していますw 花びらが少なめで上品な演出にされていますよ!

お花見会場 :. SQUEEZE .:

お花見会場 :. SQUEEZE .: http://squeeze.jp/webhanami/
SQUEEZEさんが急きょお花見会場を用意してくださいましたwww ツイートで教えていただいたのですがパッと分からなくて… よく見ると桜の花びらと三色団子が降ってきてるんです!!!こーゆうノリ出来る人って素敵ですね!ちなみに本日のお花見は15時からですよ♡ 「#webhanami」を付けてツイートすると会場に表示されますよ。ブルーシートがないよ!

pipilog

pipilog http://pipilog.com/
ぴぴるぴぃさんのブログ、pipilog でも使っていただけました!ありがとうございます!あ、デザイン変更されたんですね?前のブログデザインはブルーか水色主体で、すごくさわやかポップでした!(のはずw)今回は、ちょっとサイバー?で明るい印象を受けますw なんて言えばいいんでしょうね??

クリエイティブメモメモ

クリエイティブメモメモ http://creativememomemo.com/
桜クリエイティブメモメモきたー!桜メモメモw 井畑さんのブログ、クリエイティブメモメモでも使っていただけました!ありがとうございます!去年にデザインリニュされてたんですが、わたしは前の印象が強くのこっててニューデザイン見るたびに新鮮に感じますw 前のかわいくて好きでした!今のも素敵ですよ!

Design Color

Design Color http://designcolor-web.com/
さんのブログ Design Color でも使っていただけました!ありがとうございます!! Design Color は青緑が印象的な、海をテーマにデザインされていて、個人的には青緑色が好きなのでいつも落ち着くな〜、と感じながら記事読ませていただいてますww

一所懸命.net ~のぼんの章~

actywayさんの桜の花びら | 一所懸命.net ~のぼんの章~ http://isshokenmei.net/noblog/other1/
alegriaghostさんのブログ、一所懸命.net ~のぼんの章~にて使っていただけました&記事まで書いてくださいました!ありがとうございます!信長の野望onlineのブログ関連との事です!和風ぅ〜

キノめも

キノめも http://kinomemo.info/
キノティさんのブログ、キノめもにて使っていただけました!ありがとうございまーす!!めもって名前がついているだけにメモ帳っぽいデザインですね!更新頻度が高そうw

紹介していただけました!

どんなサイトでも桜散る風情を味わえるブックマークレット : ライフハッカー[日本版] http://www.lifehacker.jp/2013/03/130328sakura-bookmarklet.html

わたしから説明するのも失礼な位すごく有名なライフハッカー[日本版]で、どんなサイトでも桜散る風情を味わえるブックマークレットの記事で今回の桜のブックマークレットを紹介していただきました!ライフハッカーやギズモードにて沢山の記事を書かれているライターの安齋 慎平さんに書いていただきました。ありがとうございます〜m(__)mペコリ

安齋慎平さんの記事リスト

アップス!-iPhoneアプリやiOS系ニュースを配信

アップス!-iPhoneアプリやiOS系ニュースを配信 http://www.appps.jp/archives/2040611.html
以前にもソーシャルてんこ盛りのスマホ版をで紹介していただいた事があるのですが、今回ひきこもりにピッタリ! どんなサイトにも桜を舞い散らせるブックマークレットで擬似花見をしようにて、iPhoneから桜のブックマークレットを使う方法を紹介していただきました!ハンサムクロジさんありがとうございます!