小圖形下落,類似雪花飄落,原生js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Balls Motions</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
background-color: #999;
/* 33~CC, 51~204 */
}
.ball {
width: 100px;
height: 100px;
background: #fff;
border-radius: 50%;
/* border-radius: 100% 0 100% 0; */
position: fixed;
/* transition: all .1s; */
/* animation: turn 12s infinite linear; */
}
@keyframes turn {
to {
transform: rotate(360deg);
}
}
@keyframes aturn {
to {
transform: rotate(-360deg);
}
}
</style>
</head>
<body>
<div id="desktop"></div>
<script>
// 屏幕寬高
var maxw = window.innerWidth;
var maxh = window.innerHeight;
// 動態取屏幕寬高值
function winfo() {
maxw = window.innerWidth;
maxh = window.innerHeight;
}
window.onresize = winfo;
// 隨機函數
function rand(a, b) {
return Math.round(Math.random() * (b - a) + a);
}
var max = 200;
document.querySelector(‘#desktop‘).innerHTML =
(new Array(max + 1)).join(‘<div class="ball"></div>‘);
var objs = document.querySelectorAll(‘.ball‘);
var balls = [];
objs.forEach(function (el) {
var d = rand(1, 2);
balls.push({
obj: el,
d: d,
x: rand(0, maxw - d),
y: -d,
dx: 1, //rand(0, 1) ? 1 : -1,
dy: 1,
sx: rand(1, 2),
sy: rand(5, 20),
bg:
"rgba(" +
rand(51, 204) + ", " +
rand(51, 204) + ", " +
rand(51, 204) + ", " +
rand(30, 80) / 100 + ")"
});
// d = rand(0, 1) ? "" : "a";
// el.style.animation =
// d + "turn " + rand(10, 20) + "s infinite linear";
});
console.log("all balls:", balls);
// 運動
function motion() {
//balls.forEach(function (el, index, arr) {
for (var i = 0; i < balls.length; i++) {
var rs = rand(1, 3);
var rd = rand(-1, 1);
var el = balls[i];
// el.x += el.dx * el.sx;
el.x += rd * rs;
el.y += el.dy * el.sy;
if (el.x > maxw && el.dx > 0) {
el.x = -el.d;
// el.dy = rand(0, 1) ? 1 : -1;
}
if (el.x < -100 && el.dx < 0) {
el.x = maxw;
}
if (el.y > maxh) {
el.y = -el.d;
// el.dx = rand(0, 1) ? 1 : -1;
el.sy = rand(10, 30);
// el.obj.style.display = "none";
}
// 設置外觀
el.obj.style.width = el.d + ‘px‘;
el.obj.style.height = el.d * 5 + ‘px‘;
el.obj.style.left = el.x + ‘px‘;
el.obj.style.top = el.y + ‘px‘;
}
// });
// 預約下次
setTimeout(motion, 50);
}
motion();
</script>
</body>
</html>
小圖形下落,類似雪花飄落,原生js