http://preview.codecanyon.net/item/vc-particleground-for-prestashop/full_screen_preview/13922144
请检查链接并根据需要下载所有代码，让我知道是否可以使用自定义SVG图像文件或其他图标更改点
/*!
* Particleground
*
* @author Jonathan Nicol - @mrjnicol
* @version 1.1.0
* @description Creates a canvas based particle system background
*
* Inspired by http://requestlab.fr/ and http://disruptivebydesign.com/
*/
! function(t, e) {
"use strict";
function i(t) {
t = t || {};
for (var e = 1; e < arguments.length; e++) {
var i = arguments[e];
if (i)
for (var a in i) i.hasOwnProperty(a) && ("object" == typeof i[a] ? deepExtend(t[a], i[a]) : t[a] = i[a])
}
return t
}
function a(a, n) {
function r() {
if (S) {
y = e.createElement("canvas"), y.className = "pg-canvas", y.style.display = "block", a.insertBefore(y, a.firstChild), g = y.getContext("2d"), h();
for (var i = Math.round(y.width * y.height / n.density), s = 0; i > s; s++) {
var o = new x;
o.setStackPos(s), b.push(o)
}
t.addEventListener("resize", function() {
l()
}, !1), e.addEventListener("mousemove", function(t) {
w = t.pageX, P = t.pageY
}, !1), T && !k && t.addEventListener("deviceorientation", function() {
F = Math.min(Math.max(-event.beta, -30), 30), C = Math.min(Math.max(-event.gamma, -30), 30)
}, !0), p(), m("onInit")
}
}
function h() {
y.width = a.offsetWidth, y.height = a.offsetHeight, g.fillStyle = n.dotColor, g.strokeStyle = n.lineColor, g.lineWidth = n.lineWidth
}
function p() {
if (S) {
X = t.innerWidth, Y = t.innerHeight, g.clearRect(0, 0, y.width, y.height);
for (var e = 0; e < b.length; e++) b[e].updatePosition();
for (var e = 0; e < b.length; e++) b[e].draw();
H || (v = requestAnimationFrame(p))
}
}
function l() {
h();
for (var t = a.offsetWidth, e = a.offsetHeight, i = b.length - 1; i >= 0; i--)(b[i].position.x > t || b[i].position.y > e) && b.splice(i, 1);
var s = Math.round(y.width * y.height / n.density);
if (s > b.length)
for (; s > b.length;) {
var o = new x;
b.push(o)
} else s < b.length && b.splice(s);
for (i = b.length - 1; i >= 0; i--) b[i].setStackPos(i)
}
function f() {
H = !0
}
function d() {
H = !1, p()
}
function x() {
switch (this.stackPos, this.active = !0, this.layer = Math.ceil(3 * Math.random()), this.parallaxOffsetX = 0, this.parallaxOffsetY = 0, this.position = {
x: Math.ceil(Math.random() * y.width),
y: Math.ceil(Math.random() * y.height)
}, this.speed = {}, n.directionX) {
case "left":
this.speed.x = +(-n.maxSpeedX + Math.random() * n.maxSpeedX - n.minSpeedX).toFixed(2);
break;
case "right":
this.speed.x = +(Math.random() * n.maxSpeedX + n.minSpeedX).toFixed(2);
break;
default:
this.speed.x = +(-n.maxSpeedX / 2 + Math.random() * n.maxSpeedX).toFixed(2), this.speed.x += this.speed.x > 0 ? n.minSpeedX : -n.minSpeedX
}
switch (n.directionY) {
case "up":
this.speed.y = +(-n.maxSpeedY + Math.random() * n.maxSpeedY - n.minSpeedY).toFixed(2);
break;
case "down":
this.speed.y = +(Math.random() * n.maxSpeedY + n.minSpeedY).toFixed(2);
break;
default:
this.speed.y = +(-n.maxSpeedY / 2 + Math.random() * n.maxSpeedY).toFixed(2), this.speed.x += this.speed.y > 0 ? n.minSpeedY : -n.minSpeedY
}
}
function c(t, e) {
return e ? void(n[t] = e) : n[t]
}
function u() {
console.log("destroy"), y.parentNode.removeChild(y), m("onDestroy"), o && o(a).removeData("plugin_" + s)
}
function m(t) {
void 0 !== n[t] && n[t].call(a)
}
var y, g, v, X, Y, O, M, S = !!e.createElement("canvas").getContext,
b = [],
w = 0,
P = 0,
k = !navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|BB10|mobi|tablet|opera mini|nexus 7)/i),
T = !!t.DeviceOrientationEvent,
C = 0,
F = 0,
H = !1;
return n = i({}, t[s].defaults, n), x.prototype.draw = function() {
g.beginPath(), g.arc(this.position.x + this.parallaxOffsetX, this.position.y + this.parallaxOffsetY, n.particleRadius / 2, 0, 2 * Math.PI, !0), g.closePath(), g.fill(), g.beginPath();
for (var t = b.length - 1; t > this.stackPos; t--) {
var e = b[t],
i = this.position.x - e.position.x,
s = this.position.y - e.position.y,
o = Math.sqrt(i * i + s * s).toFixed(2);
o < n.proximity && (g.moveTo(this.position.x + this.parallaxOffsetX, this.position.y + this.parallaxOffsetY), n.curvedLines ? g.quadraticCurveTo(Math.max(e.position.x, e.position.x), Math.min(e.position.y, e.position.y), e.position.x + e.parallaxOffsetX, e.position.y + e.parallaxOffsetY) : g.lineTo(e.position.x + e.parallaxOffsetX, e.position.y + e.parallaxOffsetY))
}
var r = !1;
if (n.grabHover) {
var i = O - a.offsetLeft - this.position.x,
s = M - a.offsetTop - this.position.y,
o = Math.sqrt(i * i + s * s).toFixed(2);
o < n.grabDistance && (r = !0, g.moveTo(this.position.x + this.parallaxOffsetX, this.position.y + this.parallaxOffsetY), g.lineTo(O - a.offsetLeft, M - a.offsetTop))
}
g.stroke(), g.closePath(), n.grabHover && r && (g.beginPath(), g.arc(O - a.offsetLeft, M - a.offsetTop, n.particleRadius / 4, 0, 2 * Math.PI, !0), g.closePath()), g.fill()
}, x.prototype.updatePosition = function() {
if (n.parallax) {
if (T && !k) {
var t = (X - 0) / 60;
O = (C - -30) * t + 0;
var e = (Y - 0) / 60;
M = (F - -30) * e + 0
} else O = w, M = P;
this.parallaxTargX = (O - X / 2) / (n.parallaxMultiplier * this.layer), this.parallaxOffsetX += (this.parallaxTargX - this.parallaxOffsetX) / 10, this.parallaxTargY = (M - Y / 2) / (n.parallaxMultiplier * this.layer), this.parallaxOffsetY += (this.parallaxTargY - this.parallaxOffsetY) / 10
} else n.grabHover && (O = w, M = P);
var i = a.offsetWidth,
s = a.offsetHeight;
switch (n.directionX) {
case "left":
this.position.x + this.speed.x + this.parallaxOffsetX < 0 && (this.position.x = i - this.parallaxOffsetX);
break;
case "right":
this.position.x + this.speed.x + this.parallaxOffsetX > i && (this.position.x = 0 - this.parallaxOffsetX);
break;
default:
(this.position.x + this.speed.x + this.parallaxOffsetX > i || this.position.x + this.speed.x + this.parallaxOffsetX < 0) && (this.speed.x = -this.speed.x)
}
switch (n.directionY) {
case "up":
this.position.y + this.speed.y + this.parallaxOffsetY < 0 && (this.position.y = s - this.parallaxOffsetY);
break;
case "down":
this.position.y + this.speed.y + this.parallaxOffsetY > s && (this.position.y = 0 - this.parallaxOffsetY);
break;
default:
(this.position.y + this.speed.y + this.parallaxOffsetY > s || this.position.y + this.speed.y + this.parallaxOffsetY < 0) && (this.speed.y = -this.speed.y)
}
this.position.x += this.speed.x, this.position.y += this.speed.y
}, x.prototype.setStackPos = function(t) {
this.stackPos = t
}, r(), {
option: c,
destroy: u,
start: d,
pause: f
}
}
var s = "particleground",
o = t.jQuery;
t[s] = function(t, e) {
return new a(t, e)
}, t[s].defaults = {
minSpeedX: .1,
maxSpeedX: .7,
minSpeedY: .1,
maxSpeedY: .7,
directionX: "center",
directionY: "center",
density: 1e4,
dotColor: "#666666",
lineColor: "#666666",
particleRadius: 7,
lineWidth: 1,
curvedLines: !1,
proximity: 100,
parallax: !0,
parallaxMultiplier: 5,
grabHover: !0,
grabDistance: 100,
onInit: function() {},
onDestroy: function() {}
}, o && (o.fn[s] = function(t) {
if ("string" == typeof arguments[0]) {
var e, i = arguments[0],
n = Array.prototype.slice.call(arguments, 1);
return this.each(function() {
o.data(this, "plugin_" + s) && "function" == typeof o.data(this, "plugin_" + s)[i] && (e = o.data(this, "plugin_" + s)[i].apply(this, n))
}), void 0 !== e ? e : this
}
return "object" != typeof t && t ? void 0 : this.each(function() {
o.data(this, "plugin_" + s) || o.data(this, "plugin_" + s, new a(this, t))
})
})
}(window, document),
/**
* requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
* @see: http://paulirish.com/2011/requestanimationframe-for-smart-animating/
* @see: http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
* @license: MIT license
*/
function() {
for (var a = 0, b = ["ms", "moz", "webkit", "o"], c = 0; c < b.length && !window.requestAnimationFrame; ++c) window.requestAnimationFrame = window[b[c] + "RequestAnimationFrame"], window.cancelAnimationFrame = window[b[c] + "CancelAnimationFrame"] || window[b[c] + "CancelRequestAnimationFrame"];
window.requestAnimationFrame || (window.requestAnimationFrame = function(b) {
var c = (new Date).getTime(),
d = Math.max(0, 16 - (c - a)),
e = window.setTimeout(function() {
b(c + d)
}, d);
return a = c + d, e
}), window.cancelAnimationFrame || (window.cancelAnimationFrame = function(a) {
clearTimeout(a)
})
}();
/**
* Particleground demo
* @author Jonathan Nicol - @mrjnicol
*/
$(document).ready(function() {
// Full
var selector = $('#intro_particle');
var bgColor = selector.data('bgcolor');
var minSpeedX = selector.data('minspeedx');
var maxSpeedX = selector.data('maxspeedx');
var minSpeedY = selector.data('minspeedy');
var maxSpeedY = selector.data('maxspeedy');
var directionX = selector.data('directionx');
var directionY = selector.data('directiony');
var density = selector.data('density');
var dotColor = selector.data('dotcolor');
var lineColor = selector.data('linecolor');
var particleRadius = selector.data('particleradius');
var lineWidth = selector.data('linewidth');
var proximity = selector.data('proximity');
var parallax = selector.data('parallax');
var parallaxMultiplier = selector.data('parallaxmultiplier');
var grabHover = selector.data('grabhover');
var grabDistance = selector.data('grabdistance');
selector.particleground({
minSpeedX: minSpeedX/10,
maxSpeedX: maxSpeedX/10,
minSpeedY: minSpeedY/10,
maxSpeedY: maxSpeedY/10,
directionX: directionX,
directionY: directionY,
density: density,
dotColor: dotColor,
lineColor: lineColor,
particleRadius: particleRadius,
lineWidth: lineWidth,
proximity: proximity,
parallax: parallax,
parallaxMultiplier: parallaxMultiplier,
grabHover: grabHover,
grabDistance: grabDistance
});
$('#intro').css({
'margin-top': -($('#intro_particle').height() / 2 + $('#intro').height() / 2)
});
// Feature
selector = $('#feature_particle');
bgColor = selector.data('bgcolor');
minSpeedX = selector.data('minspeedx');
maxSpeedX = selector.data('maxspeedx');
minSpeedY = selector.data('minspeedy');
maxSpeedY = selector.data('maxspeedy');
directionX = selector.data('directionx');
directionY = selector.data('directiony');
density = selector.data('density');
dotColor = selector.data('dotcolor');
lineColor = selector.data('linecolor');
particleRadius = selector.data('particleradius');
lineWidth = selector.data('linewidth');
proximity = selector.data('proximity');
parallax = selector.data('parallax');
parallaxMultiplier = selector.data('parallaxmultiplier');
grabHover = selector.data('grabhover');
grabDistance = selector.data('grabdistance');
selector.particleground({
minSpeedX: minSpeedX/10,
maxSpeedX: maxSpeedX/10,
minSpeedY: minSpeedY/10,
maxSpeedY: maxSpeedY/10,
directionX: directionX,
directionY: directionY,
density: density,
dotColor: dotColor,
lineColor: lineColor,
particleRadius: particleRadius,
lineWidth: lineWidth,
proximity: proximity,
parallax: parallax,
parallaxMultiplier: parallaxMultiplier,
grabHover: grabHover,
grabDistance: grabDistance
});
$('#feature').css({
'margin-top': -($('#feature_particle').height() / 2 + $('#feature').height() / 2)
});
// Custom
selector = $('#custom_particle');
bgColor = selector.data('bgcolor');
minSpeedX = selector.data('minspeedx');
maxSpeedX = selector.data('maxspeedx');
minSpeedY = selector.data('minspeedy');
maxSpeedY = selector.data('maxspeedy');
directionX = selector.data('directionx');
directionY = selector.data('directiony');
density = selector.data('density');
dotColor = selector.data('dotcolor');
lineColor = selector.data('linecolor');
particleRadius = selector.data('particleradius');
lineWidth = selector.data('linewidth');
proximity = selector.data('proximity');
parallax = selector.data('parallax');
parallaxMultiplier = selector.data('parallaxmultiplier');
grabHover = selector.data('grabhover');
grabDistance = selector.data('grabdistance');
selector.particleground({
minSpeedX: minSpeedX/10,
maxSpeedX: maxSpeedX/10,
minSpeedY: minSpeedY/10,
maxSpeedY: maxSpeedY/10,
directionX: directionX,
directionY: directionY,
density: density,
dotColor: dotColor,
lineColor: lineColor,
particleRadius: particleRadius,
lineWidth: lineWidth,
proximity: proximity,
parallax: parallax,
parallaxMultiplier: parallaxMultiplier,
grabHover: grabHover,
grabDistance: grabDistance
});
$('#custom').css({
'margin-top': -($('#custom_particle').height() / 2 + $('#custom').height() / 2)
});
// Custom color
selector = $('#custom_color_particle');
bgColor = selector.data('bgcolor');
minSpeedX = selector.data('minspeedx');
maxSpeedX = selector.data('maxspeedx');
minSpeedY = selector.data('minspeedy');
maxSpeedY = selector.data('maxspeedy');
directionX = selector.data('directionx');
directionY = selector.data('directiony');
density = selector.data('density');
dotColor = selector.data('dotcolor');
lineColor = selector.data('linecolor');
particleRadius = selector.data('particleradius');
lineWidth = selector.data('linewidth');
proximity = selector.data('proximity');
parallax = selector.data('parallax');
parallaxMultiplier = selector.data('parallaxmultiplier');
grabHover = selector.data('grabhover');
grabDistance = selector.data('grabdistance');
selector.particleground({
minSpeedX: minSpeedX/10,
maxSpeedX: maxSpeedX/10,
minSpeedY: minSpeedY/10,
maxSpeedY: maxSpeedY/10,
directionX: directionX,
directionY: directionY,
density: density,
dotColor: dotColor,
lineColor: lineColor,
particleRadius: particleRadius,
lineWidth: lineWidth,
proximity: proximity,
parallax: parallax,
parallaxMultiplier: parallaxMultiplier,
grabHover: grabHover,
grabDistance: grabDistance
});
$('#custom_color').css({
'margin-top': -($('#custom_color_particle').height() / 2 + $('#custom_color').height() / 2)
});
// Custom proximity
selector = $('#custom_proximity_particle');
bgColor = selector.data('bgcolor');
minSpeedX = selector.data('minspeedx');
maxSpeedX = selector.data('maxspeedx');
minSpeedY = selector.data('minspeedy');
maxSpeedY = selector.data('maxspeedy');
directionX = selector.data('directionx');
directionY = selector.data('directiony');
density = selector.data('density');
dotColor = selector.data('dotcolor');
lineColor = selector.data('linecolor');
particleRadius = selector.data('particleradius');
lineWidth = selector.data('linewidth');
proximity = selector.data('proximity');
parallax = selector.data('parallax');
parallaxMultiplier = selector.data('parallaxmultiplier');
grabHover = selector.data('grabhover');
grabDistance = selector.data('grabdistance');
selector.particleground({
minSpeedX: minSpeedX/10,
maxSpeedX: maxSpeedX/10,
minSpeedY: minSpeedY/10,
maxSpeedY: maxSpeedY/10,
directionX: directionX,
directionY: directionY,
density: density,
dotColor: dotColor,
lineColor: lineColor,
particleRadius: particleRadius,
lineWidth: lineWidth,
proximity: proximity,
parallax: parallax,
parallaxMultiplier: parallaxMultiplier,
grabHover: grabHover,
grabDistance: grabDistance
});
$('#custom_proximity').css({
'margin-top': -($('#custom_proximity_particle').height() / 2 + $('#custom_proximity').height() / 2)
});
// Custom parallax
selector = $('#custom_parallax_particle');
bgColor = selector.data('bgcolor');
minSpeedX = selector.data('minspeedx');
maxSpeedX = selector.data('maxspeedx');
minSpeedY = selector.data('minspeedy');
maxSpeedY = selector.data('maxspeedy');
directionX = selector.data('directionx');
directionY = selector.data('directiony');
density = selector.data('density');
dotColor = selector.data('dotcolor');
lineColor = selector.data('linecolor');
particleRadius = selector.data('particleradius');
lineWidth = selector.data('linewidth');
proximity = selector.data('proximity');
parallax = selector.data('parallax');
parallaxMultiplier = selector.data('parallaxmultiplier');
grabHover = selector.data('grabhover');
grabDistance = selector.data('grabdistance');
selector.particleground({
minSpeedX: minSpeedX/10,
maxSpeedX: maxSpeedX/10,
minSpeedY: minSpeedY/10,
maxSpeedY: maxSpeedY/10,
directionX: directionX,
directionY: directionY,
density: density,
dotColor: dotColor,
lineColor: lineColor,
particleRadius: particleRadius,
lineWidth: lineWidth,
proximity: proximity,
parallax: parallax,
parallaxMultiplier: parallaxMultiplier,
grabHover: grabHover,
grabDistance: grabDistance
});
$('#custom_parallax').css({
'margin-top': -($('#custom_parallax_particle').height() / 2 + $('#custom_parallax').height() / 2)
});
});.contain-to-grid{
background: #5cbdaa;
}
.top-bar{
background: none;
}
.top-bar .name h1 a {
color: #FFF;
}
.top-bar-section ul li, .top-bar-section li:not(.has-form) a:not(.button){
background: none;
}
.top-bar-section ul, .top-bar-section a:not(.button){
background: none;
}
.top-bar-section li:not(.has-form) a:hover:not(.button){
background: none;
text-decoration: underline;
color: #005544;
}
.top-bar-section a:hover:not(.button){
background: none;
text-decoration: underline;
color: #005544;
}
.top-bar-section ul li > a{
color: #FFF;
font-weight: bold;
}
.top-bar-section ul > a{
color: #FFF;
font-weight: bold;
padding: 0 8px;
vertical-align:middle;
position:relative;
}
.active{
text-decoration: underline;
font-weight: bold !important;
}
.row:before {
display: block;
content: " ";
margin-top: -90px;
height: 90px;
visibility: hidden;
}
section{
}
.envato{
margin-top: 10px;
}
.copyright{
background: #fff;
padding: 10px 0;
}
.copyright p{
color: #0E0684;
margin-bottom: 0;
}
.copyright a{
color: #0E0684;
}
ul, ol, dl {
list-style: none;
}
.th{
border: none;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0);
border-radius: 150px;
}
#intro {
position: absolute;
left: 0;
width: 100%;
}
#intro_particle {
background: #e7e7e7;
width: 100%;
height: 100%;
overflow: hidden;
}
#custom {
position: absolute;
left: 0;
width: 100%;
}
#custom_particle {
background: #B17111;
width: 100%;
height: 25%;
overflow: hidden;
}
#custom_color {
position: absolute;
left: 0;
width: 100%;
}
#custom_color_particle {
background: #B17111;
width: 100%;
height: 25%;
overflow: hidden;
}
#custom_proximity {
position: absolute;
left: 0;
width: 100%;
}
#custom_proximity_particle {
background: #B17111;
width: 100%;
height: 25%;
overflow: hidden;
}
#custom_parallax {
position: absolute;
left: 0;
width: 100%;
}
#custom_parallax_particle {
background: #B17111;
width: 100%;
height: 25%;
overflow: hidden;
}
#feature {
position: absolute;
left: 0;
width: 100%;
}
#feature_particle {
background: #110B63;
width: 100%;
height: 100%;
overflow: hidden;
}
#envato {
margin-top: 10px;
margin-bottom: 5px;
padding-bottom: 5px;
}
.f-topbar-fixed{
padding-top: 0 !important;
}
.social a{
padding: 0 5px !important;
font-size: 1.5em !important;
}
button, .button{
background-color: transparent;
border: 2px solid #fff;
text-transform: uppercase;
letter-spacing: 0.015em;
font-size: 18px;
font-weight: 700;
line-height: 1;
color: #fff;
text-decoration: none;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
button:hover, .button:hover{
background-color: transparent;
color: #005544;
border-color: #005544;
}
h1, h2, h3, h5, h6 {
text-transform: uppercase;
color: #FFF;
}
a, p {
color: #FFF;
}
a:hover{
color: #000;
}
.top-bar .toggle-topbar.menu-icon a span:after {
box-shadow: 0 0 0 1px #FFF, 0 7px 0 1px #FFF, 0 14px 0 1px #FFF;
}
.top-bar .toggle-topbar.menu-icon a {
padding: 0 30px 0 15px;
}
.top-bar .toggle-topbar.menu-icon {
background: #fff;
margin-right: 5px;
border-radius: 5px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="intro_particle" data-bgColor="#000" data-minSpeedX="10" data-maxSpeedX="10" data-minSpeedY="10" data-maxSpeedY="10" data-directionX="center" data-directionY="center" data-density="10000" data-dotColor="#000" data-lineColor="#000" data-particleRadius="7" data-lineWidth="1" data-proximity="100" data-parallax="false" data-parallaxMultiplier="5" data-grabHover="true" data-grabDistance="200"></div>