当前位置：网站首页>Special effects - when the mouse moves, there will be a custom expression trail

Special effects - when the mouse moves, there will be a custom expression trail

2022-07-24 06:41:00 【Jie_ one thousand nine hundred and ninety-seven】

Mouse movement , There is a custom expression tailing

One . design sketch
Two . Implementation code

One . design sketch

Insert picture description here

Two . Implementation code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> A customized expression appears when the mouse moves </title>
    <style> * {
       margin: 0; padding: 0; } html {
       background-color: #c3ecff; } </style>
</head>

<body>
    <script> (function emojiCursor() {
       //  Custom expression  var possibleEmoji = ["️","🧡","",""]; 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, possibleEmoji[Math.floor(Math.random() * possibleEmoji.length)]); } } } function onMouseMove(e) {
       cursor.x = e.clientX; cursor.y = e.clientY; addParticle(cursor.x, cursor.y, possibleEmoji[Math.floor(Math.random() * possibleEmoji.length)]); } function addParticle(x, y, character) {
       var particle = new Particle(); particle.init(x, y, character); particles.push(particle); } function updateParticles() {
       // Updated for (var i = 0; i < particles.length; i++) {
       particles[i].update(); } // Remove dead particles 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(); } /** * Particles */ function Particle() {
       this.lifeSpan = 120; //ms this.initialStyles = {
       "position": "fixed", "top": "0", "display": "block", "pointerEvents": "none", "z-index": "10000000", "fontSize": "16px", "will-change": "transform" }; // Init, and set properties this.init = function (x, y, character) {
       this.velocity = {
       x: (Math.random() < 0.5 ? -1 : 1) * (Math.random() / 2), y: 1 }; this.position = {
       x: x - 10, y: y - 20 }; this.element = document.createElement('span'); this.element.innerHTML = 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); } } /** * Utils */ // Applies css `properties` to an element. function applyProperties(target, properties) {
       for (var key in properties) {
       target.style[key] = properties[key]; } } init(); })(); </script>
</body>

</html>