参考网址：https://codepen.io/natewiley/pen/GJVOVw?depth=everything&order=popularity&page=2&q=Particle+Animation&show_forks=false
使用了 TweenMax 动画库
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html, body { height: 100%; } body { background: black; overflow: hidden; } .wrap { height: 100%;perspective: 200px; transform-style: preserve-3d; } .c { position: absolute; }
</style>
</head>
<body>
<div class="wrap">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>
<script>
//源码链接 https://codepen.io/anon/pen/goBRxj?depth=everything&order=popularity&page=2&q=Particle+Animation&show_forks=false
//js https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js
var $wrap = $(".wrap"),
w = $wrap.width(),
h = $wrap.height();
//添加 div
for (var i = 0;i < 30;i++) {
$("<div class=\"c\"></div>").appendTo($wrap);
// console.log($(".wrap").find('div').length);
}
// console.log($(".wrap"));
function random(min, max) {
return (Math.random() * (max - min)) + min;
}
$wrap.find(".c").each(function(i) {
var x = random(0, w),
y = random(0, h),
z = random(-1000, -200),
color = "#fff";
size = random(1, 6),
c = $(this);
c.css({
background: color,
height: size,
width: size,
borderRadius: "50%",
boxShadow: "0 0 " + size + "px " + color
})
//dom 速度 {初始时的样式} {结束时的样式}
TweenMax.fromTo(c, 10, {
opacity: 0,
x: x,
y: y,
z: z
}, {
opacity: 1,
z: 200,
repeat: -1,//是否重复执行
// delay: i * -.015
delay: i * -.3//延迟时间
});
});
// function touches(e){
// var x = e.touches ? e.touches[0].clientX : e.clientX,
// y = e.touches ? e.touches[0].clientY : e.clientY;
// TweenMax.to($wrap, 1, {
// webkitPerspectiveOrigin: x + "px " + y +"px",
// perspectiveOrigin: x + "px " + y +"px"
// });
// }
// window.addEventListener("mousemove", touches);
// window.addEventListener("touchstart", touches);
// window.addEventListener("touchmove", touches);
</script>
</body>
</html>
效果图
15.gif
具体的在公司页面上的实现
- PC 端
公司实现页面 PC 端 => 顶部 banner 效果
- 源码
banTopAnimate();
//顶部 ban 粒子效果
function banTopAnimate() {
var $con = $("#ban__animate"),
w = $con.width(),
h = $con.height();
//添加 div
for (var i = 0; i < 50; i++) {
$("<div class=\"animate__list\"></div>").appendTo($con);
// console.log($(".wrap").find('div').length);
}
// console.log($(".wrap"));
function random(min, max) {
return (Math.random() * (max - min)) + min;
}
$con.find(".animate__list").each(function (i) {
var x = random(0, w),
y = random(0, h),
z = random(-1000, -200),
color = "#fff";
size = random(1, 10),
c = $(this);
c.css({
background: color,
height: size,
width: size,
borderRadius: "50%",
boxShadow: "0 0 " + size + "px " + color
})
//dom 速度 {初始时的样式} {结束时的样式}
TweenMax.fromTo(c, 10, {
opacity: 0,
x: x,
y: y,
z: z
}, {
opacity: 1,
z: 200,
repeat: -1,//是否重复执行
// delay: i * -.015
delay: i * -.3//延迟时间
});
});
}
- 效果图
26.gif
- 手机端
公司实现页面 手机端 => 顶部 banner 效果
- 源码
//顶部 .main1 动画
this.mainTopAnimate = function () {
var _me = this;
var $con = $("#ban__animate"),
w = $con.width(),
h = $con.height();
//添加 div
for (var i = 0; i < 50; i++) {
$("<div class=\"animate__list\"></div>").appendTo($con);
// console.log($(".wrap").find('div').length);
}
// console.log($(".wrap"));
function random(min, max) {
return (Math.random() * (max - min)) + min;
}
$con.find(".animate__list").each(function (i) {
var x = random(0, w),
y = random(0, h),
z = random(-1000, -200),
color = "#fff";
size = random(1, 4),
c = $(this);
c.css({
background: color,
height: size,
width: size,
borderRadius: "50%",
boxShadow: "0 0 " + size + "px " + color
})
//dom 速度 {初始时的样式} {结束时的样式}
TweenMax.fromTo(c, 10, {
opacity: 0,
x: x,
y: y,
z: z
}, {
opacity: 1,
z: 200,
repeat: -1,//是否重复执行
// delay: i * -.015
delay: i * -.3//延迟时间
});
});
return _me;
};
- 效果图
22.gif
