particles实现透明点线粒子变换canvas效果代码
代码语言：html
所属分类：粒子
代码描述：particles实现透明点线粒子变换canvas效果代码，点击可生成新的粒子线条。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<style>
@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Lato:400,300,100);
body {
font-family: "Lato";
background: #417bff;
overflow: hidden;
height: 100%;
width: 100%;
-webkit-font-smoothing: antialiased;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#particles-js, #parallax, .layer, .some-space, .some-more-space {
height: 100%;
position: absolute;
width: 100%;
}
#particles-js {
opacity: 0.6;
}
h1 {
color: white;
font-size: 5em;
font-weight: 100;
letter-spacing: 0.2em;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
a {
color: white;
border: 1px solid white;
display: table;
position: absolute;
top: 60%;
left: 50%;
letter-spacing: 0.05em;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
text-decoration: none;
transition: all 200ms ease;
padding: 10px 15px;
}
a:hover {
background: white;
color: black;
}
.some-space {
animation: rotate 18s 0.5s infinite linear reverse;
}
.some-more-space {
-webkit-animation: rotate 15s 0.1s infinite linear;
animation: rotate 15s 0.1s infinite linear;
}
@-webkit-keyframes rotate {
0% {
-webkit-transform: rotateZ(0deg) translate3d(0, 1.5%, 0) rotateZ(0deg);
transform: rotateZ(0deg) translate3d(0, 1.5%, 0) rotateZ(0deg);
}
100% {
-webkit-transform: rotateZ(360deg) translate3d(0, 1.5%, 0) rotateZ(-360deg);
transform: rotateZ(360deg) translate3d(0, 1.5%, 0) rotateZ(-360deg);
}
}
@keyframes rotate {
0% {
-webkit-transform: rotateZ(0deg) translate3d(0, 1.5%, 0) rotateZ(0deg);
transform: rotateZ(0deg) translate3d(0, 1.5%, 0) rotateZ(0deg);
}
100% {
-webkit-transform: rotateZ(360deg) translate3d(0, 1.5%, 0) rotateZ(-360deg);
transform: rotateZ(360deg) translate3d(0, 1.5%, 0) rotateZ(-360deg);
}
}
</style>
</head>
<body>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/particles-min.js"></script>
<div id="parallax">
<div class="layer" data-depth="0.6">
<div class="some-space">
<h1>bfw.wiki</h1>
</div>
</div>
<div class="layer" data-depth="0.4">
<div id="particles-js"></div>
</div>
</div>
<script>
;(function($, window, document, undefined) {
// Strict Mode
'use strict';
// Constants
var NAME = 'parallax';
var MAGIC_NUMBER = 30;
var DEFAULTS = {
relativeInput: false,
clipRelativeInput: false,
calibrationThreshold: 100,
calibrationDelay: 500,
supportDelay: 500,
calibrateX: false,
calibrateY: true,
invertX: true,
invertY: true,
limitX: false,
limitY: false,
scalarX: 10.0,
scalarY: 10.0,
frictionX: 0.1,
frictionY: 0.1,
originX: 0.5,
originY: 0.5,
pointerEvents: true,
precision: 1
};
function Plugin(element, options) {
// DOM Context
this.element = element;
// Selections
this.$context = $(element).data('api', this);
this.$layers = this.$context.find('.layer');
// Data Extraction
var data = {
calibrateX: this.$context.data('calibrate-x') || null,
calibrateY: this.$context.data('calibrate-y') || null,
invertX: this.$context.data('invert-x') || null,
invertY: this.$context.data('invert-y') || null,
limitX: parseFloat(this.$context.data('limit-x')) || null,
limitY: parseFloat(this.$context.data('limit-y')) || null,
scalarX: parseFloat(this.$context.data('scalar-x')) || null,
scalarY: parseFloat(this.$context.data('scalar-y')) || null,
frictionX: parseFloat(this.$context.data('friction-x')) || null,
frictionY: parseFloat(this.$context.data('friction-y')) || null,
originX: parseFloat(this.$context.data('origin-x')) || null,
originY: parseFloat(this.$context.data('origin-y')) || null,
pointerEvents: this.$context.data('pointer-events') || true,
precision: parseFloat(this.$context.data('precision')) || 1
};
// Delete Null Data Values
for (var key in data) {
if (data[key] === null) delete data[key];
}
// Compose Settings Object
$.extend(this, DEFAULTS, options, data);
// States
this.calibrationTimer = null;
this.calibrationFlag = true;
this.enabled = false;
this.depthsX = [];
this.depthsY = [];
this.raf = null;
// Element Bounds
this.bounds = null;
this.ex = 0;
this.ey = 0;
this.ew = 0;
this.eh = 0;
// Element Center
this.ecx = 0;
this.ecy = 0;
// Element Range
this.erx = 0;
this.ery = 0;
// Calibration
this.cx = 0;
this.cy = 0;
// Input
this.ix = 0;
this.iy = 0;
// Motion
this.mx = 0;
this.my = 0;
// Velocity
this.vx = 0;
this.vy = 0;
// Callbacks
this.onMouseMove = this.onMouseMove.bind(this);
this.onDeviceOrientation = this.onDeviceOrientation.bind(this);
this.onOrientationTimer = this.onOrientationTimer.bind(this);
this.onCalibrationTimer = this.onCalibrationTimer.bind(this);
this.onAnimationFrame = this.onAnimationFrame.bind(this);
this.onWindowResize = this.onWindowResize.bind(this);
// Initialise
this.initialise();
}
Plugin.prototype.transformSupport = function(value) {
var element = document.createElement('div');
var propertySupport = false;
var propertyValue = null;
var featureSupport = false;
var cssProperty = null;
var jsProperty = null;
for (var i = 0, l = this.vendors.length; i < l; i++) {
if (this.vendors[i] !== null) {
cssProperty = this.vendors[i][0] + 'transform';
jsProperty = this.vendors[i][1] + 'Transform';
} else {
cssProperty = 'transform';
jsProperty = 'transform';
}
if (element.style[jsProperty] !== undefined) {
propertySupport = true;
break;
}
}
switch(value) {
case '2D':
featureSupport = propertySupport;
break;
case '3D':
if (propertySupport) {
var body = document.body || document.createElement('body');
var documentElement = document.documentElement;
var documentOverflow = documentElement.style.overflow;
var isCreatedBody = false;
if (!document.body) {
isCreatedBody = true;
documentElement.style.overflow = 'hidden';
documentElement.appendChild(body);
body.style.overflow = 'hidden';
body.style.background = '';
}
body.appendChild(element);
element.style[jsProperty] = 'translate3d(1px,1px,1px)';
propertyValue = window.getComputedStyle(element).getPropertyValue(cssProperty);
featureSupport = propertyValue !== undefined && propertyValue.length > 0 && propertyValue !== "none";
documentElement.style.overflow = documentOverflow;
body.removeChild(element);
if ( isCreatedBody ) {
body.removeAttribute('style');
body.parentNode.removeChild(body);
}
}
break;
}
return featureSupport;
};
Plugin.prototype.ww = null;
Plugin.prototype.wh = null;
Plugin.prototype.wcx = null;
Plugin.prototype.wcy = null;
Plugin.prototype.wrx = null;
Plugin.prototype.wry = null;
Plugin.prototype.portrait = null;
Plugin.prototype.desktop = !navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|BB10|mobi|tablet|opera mini|nexus 7)/i);
Plugin.prototype.vendors = [null,['-webkit-','webkit'],['-moz-','Moz'],['-o-','O'],['-ms-','ms']];
Plugin.prototype.motionSupport = !!window.DeviceMotionEvent;
Plugin.prototype.orientationSupport = !!window.DeviceOrientationEvent;
Plugin.prototype.orientationStatus = 0;
Plugin.prototype.transform2DSupport = Plugin.prototype.transformSupport('2D');
Plugin.prototype.transform3DSupport = Plugin.prototype.transformSupport('3D');
Plugin.prototype.propertyCache = {};
Plugin.prototype.initialise = function() {
// Configure Styles
if (this.$context.css('position') === 'static') {
this.$context.css({
position:'relative'
});
}
// Pointer events
if(!this.pointerEvents){
this.$context.css({
pointerEvents: 'none'
});
}
// Hardware Accelerate Context
this.accelerate(this.$context);
// Setup
this.updateLayers();
this.updateDimensions();
this.enable();
this.queueCalibration(this.calibrationDelay);
};
Plugin.prototype.updateLayers = function() {
// Cache Layer Elements
this.$layers = this.$context.find('.layer');
this.depthsX = [];
this.depthsY = [];
// Configure Layer Styles
this.$layers.css({
position:'absolute',
display:'block',
left: 0,
top: 0
});
this.$layers.first().css({
position:'relative'
});
// Hardware Accelerate Layers
this.accelerate(this.$layers);
// Cache Depths
this.$layers.each($.proxy(function(index, element) {
//Graceful fallback on depth if depth-x or depth-y is absent
var depth = $(element).data('depth') || 0;
this.depthsX.push($(element).data('depth-x') || depth);
this.depthsY.push($(element).data('depth-y') || depth);
}, this));
};
Plugin.prototype.updateDimensions = function() {
this.ww = window.innerWidth;
this.wh = window.innerHeight;
this.wcx = this.ww * this.originX;
this.wcy = this.wh * this.originY;
this.wrx = Math.max(this.wcx, this.ww - this.wcx);
this.wry = Math.max(this.wcy, this.wh - this.wcy);
};
Plugin.prototype.updateBounds = function() {
this.bounds = this.element.getBoundingClientRect();
this.ex = this.bounds.left;
this.ey = this.bounds.top;
this.ew = this.bounds.width;
this.eh = this.bounds.height;
this.ecx = this.ew * this.originX;
this.ecy = this.eh * this.originY;
this.erx = Math.max(this.ecx, this.ew - this.ecx);
this.ery = Math.max(this.ecy, this.eh - this.ecy);
};
Plugin.prototype.queueCalibration = function(delay) {
clearTimeout(this.calibrationTimer);
this.calibrationTimer = setTimeout(this.onCalibrationTimer, delay);
};
Plugin.prototype.enable = function() {
if (!this.enabled) {
this.enabled = true;
if (this.orientationSupport) {
this.portrait = null;
window.addEventListener('deviceorientation', this.onDeviceOrientation);
setTimeout(this.onOrientationTimer, this.supportDelay);
} else {
this.cx = 0;
this.cy = 0;
this.portrait = false;
window.addEventListener('mousemove', this.onMouseMove);
}
window.addEventListener('resize', this.onWindowResize);
this.raf = requestAnimationFrame(this.onAnimat.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0