//-----------------------------------------
// number to digit str
var number2Str = function(n){
  var dgt = String(maxPetalNumber - 1).length;
  var retStr = String(n);
  var len = dgt - retStr.length;
  for(var i = 0; i < len; i++){
    retStr = "0" + retStr;
  }
  return retStr;
};

//-----------------------------------------
// get petal id
var getPetalId = function(n){
  return "id_ptl_" + number2Str(n);
};

//-----------------------------------------
// set append styles
function setStyles(){
  var appenStyles = document.createElement("style");
  appenStyles.id = "id_append_style";
  var cssTxt = "#spring_canvas { position: fixed; top: 0px; left 0px; overflow: visible;}\n\n";
  cssTxt += ".petalParent { position: absolute; overflow: visible; z-index: 9999;}\n\n";
  cssTxt += ".petal { width: 15px; height: 10px;}\n\n";
  cssTxt += ".petalBase { border-radius: 6px 0px 0px 0px; position: absolute; top: 0px; left: 3px; width: 9px; height: 6px;}\n\n";
  cssTxt += ".petalLeft { background: -webkit-gradient( linear, left top, right bottom, from(rgba(224, 176, 192, 1)), to(rgba(255, 240, 240, 1))); -webkit-transform: skew(-30deg) scale(1.2, 1) rotate(12deg);}\n\n";
  cssTxt += ".petalRight { top: 4px; background: -webkit-gradient( linear, left bottom, right top, from(rgba(224, 176, 192, 1)), to(rgba(255, 240, 240, 1))); -webkit-transform: skew(30deg) scale(1.2, -1) rotate(12deg);}\n\n";
  cssTxt += ".petalRotate { -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear;}\n\n";
  cssTxt += ".petalTrans { -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear;}\n\n";

appenStyles.textContent = cssTxt;
  document.getElementsByTagName("head")[0].appendChild(appenStyles);
}

//-----------------------------------------
// display area size adjust
function initDisplayArea(){
  var displayArea = document.createElement("div");
  displayArea.id = "spring_canvas";
  var targetObj = document.body.firstChild;
  document.body.insertBefore(displayArea, targetObj);
  //document.body.appendChild(displayArea);
  displayArea.style.width = "0px";
  displayArea.style.height = "0px";
}

//-----------------------------------------
// make a petal
var makePetal = function(n){
  /* 花びらの外側のフレーム: 座標移動アニメーション対象 */
  var outbox = document.createElement("div");
  outbox.className = "petalParent";
  outbox.id = getPetalId(n) + "_parent";
  outbox.style.display = "none";

/* 花びらフレーム: 3D回転アニメーション対象 */
  var ptl = document.createElement("div");
  ptl.id = getPetalId(n);
  ptl.className = "petal";

var ptlL = document.createElement("div");
  ptlL.className = "petalBase petalLeft";
  var ptlR = document.createElement("div");
  ptlR.className = "petalBase petalRight";

ptl.appendChild(ptlL);
  ptl.appendChild(ptlR);

outbox.appendChild(ptl);
  elm("spring_canvas").appendChild(outbox);
};

//-----------------------------------------
// 花びら maxPetalNumber 枚生成
function makePetals(){
  for(var i = 0; i < maxPetalNumber; i++){
    makePetal(i);
  }
}

//-----------------------------------------
// maxPetalNumber パターンの舞い散りルート(アニメーションキーフレーム)を生成
function addKeyFrames(){
  var areaWidth = document.body.clientWidth;
  var areaHeight = window.innerHeight;

for(var i = 0; i < maxPetalNumber; i++){
    // ルート
    var sx = (Math.floor(Math.random() * 15) * 10) + 10;  /* 21 - 150% */
    var ex = Math.floor(Math.random() * (sx - 20)); /* 0 - 130% */
    var keyframe = "@-webkit-keyframes transxy" + i + " {\n";
    var tops = 0 - Math.round(areaHeight * 0.05);
    var tope = Math.round(areaHeight * 1.05);
    var lefts = Math.round(areaWidth * sx / 100);
    var lefte = Math.round(areaWidth * ex / 100);
        
    keyframe += "   0% {top: " + tops + "px; left: " + lefts + "px;}\n";
    keyframe += "   5% {top: " + tops + "px; left: " + lefts + "px;}\n";
    keyframe += "  95% {top: " + tope + "px; left: " + lefte + "px;}\n";
    keyframe += " 100% {top: " + tope + "px; left: " + lefte + "px;}\n";
    keyframe += "}\n\n";

elm("id_append_style").textContent += keyframe;

// 回転
    var tmpx = (areaWidth * (sx - ex) / 100);
    var tmpy = areaHeight;
    var hypotenuse = Math.sqrt(Math.pow(tmpx, 2) + Math.pow(tmpy, 2));
    hypotenuse /= tmpx;
    var deg = Math.round((Math.atan(hypotenuse) / Math.PI) * 180);

if(tmpx > tmpy){
      deg = deg - 90;
    }else{
      deg = 0 - deg;
    }

keyframe = "@-webkit-keyframes rotateX" + i + " {\n";
    keyframe += "   0% {-webkit-transform: rotate(" + deg + "deg) rotateX(0deg);}\n";
    keyframe += " 100% {-webkit-transform: rotate(" + deg + "deg) rotateX(360deg);}\n";
    keyframe += "}\n\n";

elm("id_append_style").textContent += keyframe;
  }
}

//-----------------------------------------
// 舞開始
function startDance(){
  var setRotateTime = function(){
    /* 0.8 - 1.2s */
    return ((Math.floor(Math.random() * 4) + 8) / 10) + "s";
  };

var setTransTime = function(){
    /* 9 - 13s */
    return (Math.floor(Math.random() * 4) + 9) + "s";
  };

var delayBase = 300;

// タイミングずらして舞い始める
  var setAnimationFunc = function(n){
    var tid = getPetalId(n);
    var pid = tid + "_parent";
    var tobj = elm(tid);
    var pobj = elm(pid);
    var rotateAnimationName = "rotateX" + String(n);
    var transAnimationName = "transxy" + String(n);
    var delay = i * delayBase;

setTimeout(function(){
      pobj.style.display = "block";
      tobj.className += " petalRotate";
      tobj.style.webkitAnimationDuration = setRotateTime();
      tobj.style.webkitAnimationName = rotateAnimationName;
      pobj.className += " petalTrans";
      pobj.style.webkitAnimationDuration = setTransTime();
      pobj.style.webkitAnimationName = transAnimationName;
    }, delay);
  };

for(var i = 0; i < maxPetalNumber; i++){
    setAnimationFunc(i);
  }
}

//-----------------------------------------
// onload start
function onloadStart(){
  // settings
  setStyles();
  initDisplayArea();
  addKeyFrames();
  makePetals();

// run
  startDance();
}

onloadStart();

桜ひらひらbookmarklet（forked from: さーくらー　ひらーひらー）

それでも春は来るこれでhttp://jsdo.it/piyotori/kRZD.jsだけ呼べばたいていのWebサイトに被せられるようになるかな…？ ※webkit限定 ※ここ（jsdo.it）で使うとなんかいろいろボタンやリンクが効かなくなります ※といったようにサイトによっては操作が効かなくなる問題をはらんでいます →花びらエリアをbody末尾に追加していたのを、bodyの先頭に（bodyのfirstChildに対してinsertBefore）することで解決（でもまだ相性悪いサイトはある） →さらに修正し問題少なくしましたこんなブックマークレットでたいていのサイトでいけるはず。 javascript:var%20d=document,u='http://jsdo.it/piyotori/kRZD.js';s=d.createElement('script');s.type='text/javascript';s.src=u;d.body.appendChild(s);/* 回転は花びらのdivに. 移動は花びらをdivで囲ってそれに適用. 花びら自身もdiv2つ張り合わせ. webkit-keyframesをjsでゴリゴリ書き出し. 背景カラーを朝から晩の空みたいにアニメさせてもよし（でもやってない） Safariでたまに止まる奴がいるのが直らない */ /* forked: jsだけ呼べば桜舞うように変更. jQuery使わないよう変更. 3/17 amnimation位置計算を修正し花びら配置用divでサイト全体を被わないように修正 */ //----------------------------------------- // common alias var elm = function(arg){return document.getElementById(arg);}; //----------------------------------------- // setting: var maxPetalNumber = 48; //----------------------------------------- // utils for this script //----------------------------------------- // number to digit str var number2Str = function(n){ var dgt = String(maxPetalNumber - 1).length; var retStr = String(n); var len = dgt - retStr.length; for(var i = 0; i < len; i++){ retStr = "0" + retStr; } return retStr; }; //----------------------------------------- // get petal id var getPetalId = function(n){ return "id_ptl_" + number2Str(n); }; //----------------------------------------- // set append styles function setStyles(){ var appenStyles = document.createElement("style"); appenStyles.id = "id_append_style"; var cssTxt = "#spring_canvas { position: fixed; top: 0px; left 0px; overflow: visible;}\n\n"; cssTxt += ".petalParent { position: absolute; overflow: visible; z-index: 9999;}\n\n"; cssTxt += ".petal { width: 15px; height: 10px;}\n\n"; cssTxt += ".petalBase { border-radius: 6px 0px 0px 0px; position: absolute; top: 0px; left: 3px; width: 9px; height: 6px;}\n\n"; cssTxt += ".petalLeft { background: -webkit-gradient( linear, left top, right bottom, from(rgba(224, 176, 192, 1)), to(rgba(255, 240, 240, 1))); -webkit-transform: skew(-30deg) scale(1.2, 1) rotate(12deg);}\n\n"; cssTxt += ".petalRight { top: 4px; background: -webkit-gradient( linear, left bottom, right top, from(rgba(224, 176, 192, 1)), to(rgba(255, 240, 240, 1))); -webkit-transform: skew(30deg) scale(1.2, -1) rotate(12deg);}\n\n"; cssTxt += ".petalRotate { -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear;}\n\n"; cssTxt += ".petalTrans { -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear;}\n\n"; appenStyles.textContent = cssTxt; document.getElementsByTagName("head")[0].appendChild(appenStyles); } //----------------------------------------- // display area size adjust function initDisplayArea(){ var displayArea = document.createElement("div"); displayArea.id = "spring_canvas"; var targetObj = document.body.firstChild; document.body.insertBefore(displayArea, targetObj); //document.body.appendChild(displayArea); displayArea.style.width = "0px"; displayArea.style.height = "0px"; } //----------------------------------------- // make a petal var makePetal = function(n){ /* 花びらの外側のフレーム: 座標移動アニメーション対象 */ var outbox = document.createElement("div"); outbox.className = "petalParent"; outbox.id = getPetalId(n) + "_parent"; outbox.style.display = "none"; /* 花びらフレーム: 3D回転アニメーション対象 */ var ptl = document.createElement("div"); ptl.id = getPetalId(n); ptl.className = "petal"; var ptlL = document.createElement("div"); ptlL.className = "petalBase petalLeft"; var ptlR = document.createElement("div"); ptlR.className = "petalBase petalRight"; ptl.appendChild(ptlL); ptl.appendChild(ptlR); outbox.appendChild(ptl); elm("spring_canvas").appendChild(outbox); }; //----------------------------------------- // 花びら maxPetalNumber 枚生成 function makePetals(){ for(var i = 0; i < maxPetalNumber; i++){ makePetal(i); } } //----------------------------------------- // maxPetalNumber パターンの舞い散りルート(アニメーションキーフレーム)を生成 function addKeyFrames(){ var areaWidth = document.body.clientWidth; var areaHeight = window.innerHeight; for(var i = 0; i < maxPetalNumber; i++){ // ルート var sx = (Math.floor(Math.random() * 15) * 10) + 10; /* 21 - 150% */ var ex = Math.floor(Math.random() * (sx - 20)); /* 0 - 130% */ var keyframe = "@-webkit-keyframes transxy" + i + " {\n"; var tops = 0 - Math.round(areaHeight * 0.05); var tope = Math.round(areaHeight * 1.05); var lefts = Math.round(areaWidth * sx / 100); var lefte = Math.round(areaWidth * ex / 100); keyframe += " 0% {top: " + tops + "px; left: " + lefts + "px;}\n"; keyframe += " 5% {top: " + tops + "px; left: " + lefts + "px;}\n"; keyframe += " 95% {top: " + tope + "px; left: " + lefte + "px;}\n"; keyframe += " 100% {top: " + tope + "px; left: " + lefte + "px;}\n"; keyframe += "}\n\n"; elm("id_append_style").textContent += keyframe; // 回転 var tmpx = (areaWidth * (sx - ex) / 100); var tmpy = areaHeight; var hypotenuse = Math.sqrt(Math.pow(tmpx, 2) + Math.pow(tmpy, 2)); hypotenuse /= tmpx; var deg = Math.round((Math.atan(hypotenuse) / Math.PI) * 180); if(tmpx > tmpy){ deg = deg - 90; }else{ deg = 0 - deg; } keyframe = "@-webkit-keyframes rotateX" + i + " {\n"; keyframe += " 0% {-webkit-transform: rotate(" + deg + "deg) rotateX(0deg);}\n"; keyframe += " 100% {-webkit-transform: rotate(" + deg + "deg) rotateX(360deg);}\n"; keyframe += "}\n\n"; elm("id_append_style").textContent += keyframe; } } //----------------------------------------- // 舞開始 function startDance(){ var setRotateTime = function(){ /* 0.8 - 1.2s */ return ((Math.floor(Math.random() * 4) + 8) / 10) + "s"; }; var setTransTime = function(){ /* 9 - 13s */ return (Math.floor(Math.random() * 4) + 9) + "s"; }; var delayBase = 300; // タイミングずらして舞い始める var setAnimationFunc = function(n){ var tid = getPetalId(n); var pid = tid + "_parent"; var tobj = elm(tid); var pobj = elm(pid); var rotateAnimationName = "rotateX" + String(n); var transAnimationName = "transxy" + String(n); var delay = i * delayBase; setTimeout(function(){ pobj.style.display = "block"; tobj.className += " petalRotate"; tobj.style.webkitAnimationDuration = setRotateTime(); tobj.style.webkitAnimationName = rotateAnimationName; pobj.className += " petalTrans"; pobj.style.webkitAnimationDuration = setTransTime(); pobj.style.webkitAnimationName = transAnimationName; }, delay); }; for(var i = 0; i < maxPetalNumber; i++){ setAnimationFunc(i); } } //----------------------------------------- // onload start function onloadStart(){ // settings setStyles(); initDisplayArea(); addKeyFrames(); makePetals(); // run startDance(); } onloadStart();

Play on jsdo.it games
Share
Embed
QR
Tag
Download

Complete!

Description どんなゲームですか？

Control Device

	スマートフォンコントローラー jsdo.it WebSocket Controller»
	マウス
	キーボード
	タッチデバイス

Fullscreen

有効
無効

jsdo.it games から削除する Submit

style

Design view
Code view

code

<script type="text/javascript" src="http://jsdo.it/blogparts/kRZD/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/piyotori/kRZD" title="桜ひらひらbookmarklet（forked from: さーくらー　ひらーひらー）">桜ひらひらbookmarklet（forked from: さーくらー　ひらーひらー） - jsdo.it - share JavaScript, HTML5 and CSS</a></p>

QR Code