エフェクト

view source

JavaScript

$(function(){
  setTriangle();
  moveTriangle();

  $('#area').click(function(){
    setTriangle();
    moveTriangle();
  });
});


var setTriangle = function(){
  for(var i=0,len=9;i<len;i++){
    var tri = $('<div>').addClass('tri');
    $('#area').append(tri);
  }
  
}
var moveTriangle = function(){
  var tris = $('.tri');

  tris.each(function(i){
    var top = Math.floor(Math.random()*200);
    var left = Math.floor(Math.random()*200);
    $(this).css({
      top : top,
      left : left
    });
    top = $(this).position().top;
    left = $(this).position().left;
    //console.log(i+':'+left +':'+ top);
  });
  var cx = 100;
  var cy = 100;
  var timer  = setInterval(function(){
    tris.each(function(i){
      var top = cx + (($(this).position().top-cx)/10*9);
      var left = cy + (($(this).position().left-cy)/10*9);
      $(this).css({
        top : top,
        left : left
      })
    });
  }, 100);

  setTimeout(function(){
    clearInterval(timer);
    removeTriangle();
  }, 9000);
}

var removeTriangle = function(){
  console.log($('.tris:first-child').position().left +':'+ $('.tris:first-child').position().top);
  $('#area').empty();
}

CSS

#area{
  position:relative;
  left:0;
  top:0;
  width:200px;
  height:200px;
  border:1px solid #000000;
}
#area>*{
  position:absolute;
  left:0;
  top:0;
}


.tri{
    width:0;
    height:0;
    border:10px solid #000;
    border-color:transparent;
    border-top-color:#aa0;
    -webkit-animation:roll 200ms 99;
    -webkit-transform-origin:50% 5px;
}
@-webkit-keyframes roll{
  0%{
    -webkit-transform:rotate(0deg);
  }
  20%{
    -webkit-transform:rotate(30deg);
  }
  40%{
    -webkit-transform:rotate(60deg);
  }
  60%{
    -webkit-transform:rotate(120deg);
  }
  80%{
    -webkit-transform:rotate(160deg);
  }
  100%{
    -webkit-transform:rotate(240deg);
  }
}

HTML

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-effect/

ABOUT

hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。

プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

必要な機能の関数をコピペ利用したり勉強に活用できます。

プログラムの動作サンプル結果は画面上部に出力表示されています。

環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。

途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。