加载中...
avatar

JS鼠标移动特效

前言

   前面给大家分享了一个JS的樱花背景特效,云开在这里又整理一个鼠标移动的特效分享给大家。

添加特效

   在\themes\next\source\js\src中新建fairyDustCursor.js文件,并添加以下代码

云开使用的是next主题,其它主题要放在相应的文件夹中(原主题为next,现改用Sakura主题)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
(function fairyDustCursor() {

var possibleColors = ["#D61C59", "#E7D84B", "#1B8798"]
var width = window.innerWidth;
var height = window.innerHeight;
var cursor = {x: width/2, y: width/2};
var particles = [];

function init() {
bindEvents();
loop();
}

// Bind events that are needed
function bindEvents() {
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('touchmove', onTouchMove);
document.addEventListener('touchstart', onTouchMove);

window.addEventListener('resize', onWindowResize);
}

function onWindowResize(e) {
width = window.innerWidth;
height = window.innerHeight;
}

function onTouchMove(e) {
if( e.touches.length > 0 ) {
for( var i = 0; i < e.touches.length; i++ ) {
addParticle( e.touches[i].clientX, e.touches[i].clientY, possibleColors[Math.floor(Math.random()*possibleColors.length)]);
}
}
}

function onMouseMove(e) {
cursor.x = e.clientX;
cursor.y = e.clientY;

addParticle( cursor.x, cursor.y, possibleColors[Math.floor(Math.random()*possibleColors.length)]);
}

function addParticle(x, y, color) {
var particle = new Particle();
particle.init(x, y, color);
particles.push(particle);
}

function updateParticles() {

for( var i = 0; i < particles.length; i++ ) {
particles[i].update();
}

for( var i = particles.length -1; i >= 0; i-- ) {
if( particles[i].lifeSpan < 0 ) {
particles[i].die();
particles.splice(i, 1);
}
}

}

function loop() {
requestAnimationFrame(loop);
updateParticles();
}

function Particle() {

this.character = "*";
this.lifeSpan = 200; //ms
this.initialStyles ={
"position": "fixed",
"top": "0", //必须加
"display": "block",
"pointerEvents": "none",
"z-index": "10000000",
"fontSize": "20px",
"will-change": "transform"
};

this.init = function(x, y, color) {

this.velocity = {
x: (Math.random() < 0.5 ? -1 : 1) * (Math.random() / 2),
y: 1
};

this.position = {x: x - 10, y: y - 20};
this.initialStyles.color = color;
console.log(color);

this.element = document.createElement('span');
this.element.innerHTML = this.character;
applyProperties(this.element, this.initialStyles);
this.update();

document.body.appendChild(this.element);
};

this.update = function() {
this.position.x += this.velocity.x;
this.position.y += this.velocity.y;
this.lifeSpan--;

this.element.style.transform = "translate3d(" + this.position.x + "px," + this.position.y + "px,0) scale(" + (this.lifeSpan / 120) + ")";
}

this.die = function() {
this.element.parentNode.removeChild(this.element);
}

}

function applyProperties( target, properties ) {
for( var key in properties ) {
target.style[ key ] = properties[ key ];
}
}

init();
})();

云开使用的是next主题,其它主题要根据主题进行相应的配置(原主题为next,现改用Sakura主题)

   然后在\themes\next\layout\_layout.swig 文件里<body></body>内部引用:

1
2
3
4
<!-- 樱花特效 -->
{% if theme.sakura.enable %}
<script async src="/js/src/sakura.js"></script>
{% endif %}

   最后在主题配置文件 .yml中配置:

1
2
3
# 樱花飘落动特效
sakura:
enable: true

效果

hexo三连部署到github上看一下效果

鼠标移动特效

文章作者: 云开、见月明
文章链接: https://chenyunxin.cn/posts/1151675629.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 云开の博客
打赏
  • 微信
    微信
  • 支付寶
    支付寶

评论