Posted at

ランダムにキューブを動かす

More than 5 years have passed since last update.

人のソースみて勉強したやつの技術を使ってよくわかんないのを作ってみた。

よくわかんないの

sample5.gif

キューブの動くタイミングや動き方はCSS、色や大きさをランダムで変えるのはJSの方に書いてる。


CSS

body {

background: #F9F9F9;
margin: 15px;
}
.item {
float: left;
width: 3rem;
height: 3rem;
backface-visibility: hidden;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
}

動かすセンスがなさすぎて、タイミングの設定とかどうすればいい感じにできるのかさっぱりわからん。


JS

$(function() {

//マテリアルデザインチックな配色
var myColors = [
'#224687',
'#2ABFD4',
'#FFCD40',
'#E61875',
'#8BC34A',
'#AB47BC'
];

//描画
function draw(){

var color = myColors[Math.floor(Math.random() * myColors.length)];

//DIV生成
var item = $("<div>",{
"class" : "item",
css : {
backgroundColor: color,
transform: "scale(0)"
}
}).appendTo(document.body);

//ランダムで色、大きさ変える
setInterval((function() {
item.css ({
backgroundColor: myColors[Math.floor(Math.random() * myColors.length)],
transform: "scale(" + Math.random() +")",
borderRadius: "10%",
opacity: 1
})
}), Math.random() * 500 + 500);

};

//量産して描画
for (var i = 0; i < 81; i++) {
draw();
}

//微妙なhover処理
$(".item").hover(
function(){
$(this).stop().animate({
borderRadius: "50%",
transform: "scale(1)",
opacity: 0.5
}, 100);
}
);

});

scaleで拡大させてるから、

キューブが小さいときにhoverしても大きくならないのが微妙すぎる。

もうちょっと頑張ってインタラクティブなのを作りたい。