为WordPress增加动态html5、css3、canvas、jQuery的背景特效

  • 2018-12-15
  • 19,115
  • 3,110

前言

最近感觉站点的背景有点单调,看到有些大佬的博客非常的好看,比如二次元背景、跟随鼠标变换的动态背景等,我就寻思着自己的站点能不能也添加一下背景,多点活力,折腾了几天终于成功啦,现在把教程写下,防止自己忘记。

烟花特效
几何图形
悬浮原点

准备工作

首先呢当然是选择好自己喜欢的背景啦,小哆啦为大家上传了三款动态背景,不定时更新,有愿意分享的小伙伴也可以留言或者私聊我一起分享哦,具体效果请参照上面的GIF动图。

烟花效果点击下载
几何图形点击下载
基于canvas绘制悬浮圆点背景动画特效点击下载

开始替换

打开刚刚下载好的效果文件,文件一般分为三种,html、js、css文件,小哆啦为大家讲解下基于canvas绘制悬浮圆点背景动画特效的添加方法:

提取html中<style></style>中间部分.canvas{}函数

<style>
.canvas {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
}
</style>

提取canvas

<canvas id="canvas" class="canvas"></canvas

提取script

<script>
'use strict';
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.proto = superClass; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var mouse, originx, originy, int, cvs;
/* Safari doesn't support EventTarget 😒 */
var EventTarget = EventTarget || false;
if (EventTarget) {
EventTarget.prototype.evt = function (event, callback) {
return this.addEventListener(event, callback);
};
} else {
window.evt = function (event, callback) {
return this.addEventListener(event, callback);
};
document.evt = function (event, callback) {
return this.addEventListener(event, callback);
};
Element.prototype.evt = function (event, callback) {
return this.addEventListener(event, callback);
};
}
function $(elemId) {
return document.getElementById(elemId);
}
function init() {
cvs = $("canvas");
resizeCanvas(cvs);window.evt('resize', resizeCanvas, false);window.evt("mousemove", function (e) { mouse = getMousePos(cvs, e); originx = mouse.x; originy = mouse.y;});// window.evt("touchmove", function (e) {// originx = e.originalEvent.touches[0].pageX;// originy = e.originalEvent.touches[0].pageY;// });var network = new Field(0, 0, 50);var emit = new Emitter(0, 0, 50);animateCanvas(cvs, function () { network.animate(); emit.animate();});
}
var Point = function () {
function Point(x, y, canvas, dia) {
_classCallCheck(this, Point);
this.canvas = canvas || cvs; this.x = x || 0; this.y = y || 0; this.vx = 0; this.vy = 0; this.speed = Math.random() * .5 + .2; this.angle = Math.random() * 360; this.diaSet = dia || 2 + Math.random() * 10; this.dia = this.diaSet; this.age = 0; var hue = Math.floor(Math.random() * 360); this.fill = 'hsl(' + hue + ', 95%, 70%)'; this.line = Math.random() > .5 ? true : false;}_createClass(Point, [{ key: 'emit', value: function emit(life) { var s = this.speed * 2; this.angle += Math.random() * 10 - 5; this.x += s * Math.cos(this.angle * Math.PI / 180); this.y += s * Math.sin(this.angle * Math.PI / 180); this.age += 1 / life; this.boundary(); }}, { key: 'boundary', value: function boundary() { if (this.x < 0) { this.x = this.canvas.width; } if (this.x > this.canvas.width) { this.x = 0; } if (this.y < 0) { this.y = this.canvas.height; } if (this.y > this.canvas.height) { this.y = 0; } }}, { key: 'field', value: function field(life) { var s = this.speed; this.angle += Math.random() * 10 - 5; this.x += s * Math.cos(this.angle * Math.PI / 180); this.y += s * Math.sin(this.angle * Math.PI / 180); this.age += 1 / life; this.boundary(); }}, { key: 'shrink', value: function shrink(life) { this.dia = (1 - this.age) * this.diaSet; }}, { key: 'draw', value: function draw() { var ctx = this.canvas.getContext('2d'), x = this.x, y = this.y, dia = this.dia, age = this.age; ctx.beginPath(); ctx.fillStyle = this.fill; ctx.strokeStyle = this.fill; ctx.lineWidth = 2; ctx.arc(x, y, dia, 0, 2 * Math.PI); ctx.closePath(); this.line !== true ? ctx.fill() : ctx.stroke(); }}]);return Point;
}();
var Particle = function () {
function Particle() {
_classCallCheck(this, Particle);
}
_createClass(Particle, [{ key: 'setPosition', value: function setPosition(x, y) { this.x = x; this.y = y; }}, { key: 'getPosition', value: function getPosition(x, y) { return { x: this.x, y: this.y }; }}, { key: 'spawn', value: function spawn(x, y, amount, dia) { var arr = []; dia = dia || false; amount = amount || 1; if (amount > 1) { for (var i = 0; i < amount; i++) { if (dia) { arr.push(new Point(x, y, cvs, dia)); } else { arr.push(new Point(x, y, cvs)); } } } else { arr = new Point(x, y, cvs, dia); } return arr; }}]);return Particle;
}();
// Particle Emitter
var Emitter = function (_Particle) {
_inherits(Emitter, _Particle);
function Emitter(x, y, life, mouse, dia) { _classCallCheck(this, Emitter); var _this = _possibleConstructorReturn(this, (Emitter.__proto__ || Object.getPrototypeOf(Emitter)).call(this)); if (mouse === undefined) { _this.mouse = true; } else { _this.mouse = mouse; } _this.particles = []; _this.x = x || 0; _this.y = y || 0; _this.life = life || 20; _this.canvas = cvs; _this.dia = dia || false; return _this;}_createClass(Emitter, [{ key: 'animate', value: function animate() { var particles = this.particles; if (this.mouse) { this.setPosition(originx, originy); } var mul = 1; for (var i = 0; i < mul; i++) { particles.push(this.spawn(this.x, this.y, 1)); } if (particles.length > this.life * mul) { for (var _i = 0; _i < mul; _i++) { particles.shift(); } } this.render(this.canvas); }}, { key: 'render', value: function render() { var life = this.life; var ctx = this.canvas.getContext('2d'); var particles = this.particles; for (var i = 0; i < particles.length; i++) { var p = particles[i]; p.draw(); p.emit(this.life); p.shrink(); } }}]);return Emitter;
}(Particle);
// Particle Field
var Field = function (_Particle2) {
_inherits(Field, _Particle2);
function Field(x, y, life) { _classCallCheck(this, Field); var _this2 = _possibleConstructorReturn(this, (Field.__proto__ || Object.getPrototypeOf(Field)).call(this)); _this2.particles = []; _this2.canvas = cvs; _this2.x = x || 0; _this2.y = y || 0; _this2.life = life; for (var i = 0; i < _this2.life; i++) { var _x = Math.random() * cvs.width, _y = Math.random() * cvs.height; _this2.particles.push(_this2.spawn(_x, _y, 1)); } return _this2;}_createClass(Field, [{ key: 'animate', value: function animate() { this.render(canvas); }}, { key: 'render', value: function render(canvas) { var ctx = this.canvas.getContext('2d'); var particles = this.particles; for (var i = 0; i < particles.length; i++) { var p = particles[i]; p.draw(); p.field(this.life); } }}]);return Field;
}(Particle);
function getMousePos(cvs, evt) {
var rect = cvs.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
//
function animateCanvas(canvas, callback) {
var ctx = canvas.getContext('2d');ctx.clearRect(0, 0, canvas.width, canvas.height);callback();requestAnimationFrame(animateCanvas.bind(null, canvas, callback));
}
//Update canvas size to fill window
function resizeCanvas(canvas) {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
originx = canvas.width / 2;
originy = canvas.height / 2;
}
init();</script>

找到当前WordPress主题目录下的footer.php文件,一般为/wp-content/themes/您的主题/,在<?php wp_footer();?>字段之前插入上述提取的代码,保存文件。刷新就可以看到效果啦。

大家有问题的话可以在下面留言哦,小哆啦看到第一时间为大家解答!赶快为你的站点添加您喜欢的背景效果吧~

评论