This is the seventeenth day of my participation in Gwen Challenge
Quote:
In many cases, we need to achieve the effect of clicking the mouse to appear patterns or words, for users, this experience is very extreme. In fact, the implementation is also very simple, let’s learn together. Attached at the end of the article is the complete code, you can copy the key parts directly to use on your own page
Implementation effect
The effect == is very common and is found in many web blogs
Implementation approach
- First we need to get the current mouse click position
- A label needs to be generated at the current location
- You need to add random custom content to the tag
- Random text color
- Add a fade effect for the text
- Clear faded labels
The implementation process
The following code has been broken up for separate explanations, and the complete code is at the end of the article
1. Generate random text
let content = ["Go live your life. ❤"."❤ The Sun Never Sets "❤"."❤ Yige ❤"."❤ The Forest Bus ❤"."❤ Love is a Word ❤"."❤ The Sea of Stars ❤"."❤ Millions and Millions "❤"."❤ I'm Waiting ❤"."❤ As One ❤"."❤ Convergence ❤"."❤ "Distance "❤"."❤ "Earlier Earlier "❤"."❤ Gulf of Alaska ❤"."Peace&Love "❤"."❤ Grey "❤"."❤ Take You Home "❤"."❤ wait for me to Come Home "❤"."❤《0919》❤"."❤ I'm Fine ❤"."❤ Will It or Won't it ❤"."❤ Economy Class "❤"."❤ After I'm Gone ❤"."❤ Undeleted "❤."❤ Girls "❤"."❤《Let Her Go》❤"."❤ About Your Dream "❤"."❤ Slowly ❤"."❤ rainy Day ❤"."❤ Wings "❤"."❤ 'Get Closer' ❤"."❤ Wings "❤"."❤《This Is Love》❤"."❤ Do-Over ❤"."❤ sunny Day ❤"."❤ Blank Grid ❤"."❤ Love You 3000 ❤"."❤ Whereabouts Unknown ❤"."❤ I Want ❤"."❤ Evening Star "❤"."How about you?" ❤"."❤ 50 Feet "❤"."❤《COCO》❤".❤ NUMB ❤"."❤ Reenactment ❤"."❤ All You Think about is the Stars ❤"
] // An array of custom content
let randContent = Math.ceil(Math.random() * content.length);
Copy the codeFirst of all, I need to define an array, store the content is the content of the mouse click, I used here is my favorite music (one by one, really hard), and then obtain a random array index, to achieve random text.
2. Randomly generate a color
Text.prototype.getRandom = function() {
let allType = '0,1,2,3,4,5,6,7,8,9, a, b, c, d, e, f'; // Hexadecimal color
let allTypeArr = allType.split(', '); // Split into arrays with ','
let color = The '#';
for (var i = 0; i < 6; i++) {
// Generate a random number from 0 to 16
var random = parseInt(Math.random() * allTypeArr.length);
color += allTypeArr[random];
}
return color; // Returns a randomly generated color
}
Copy the codeThis is also useful in the previous blog post, this time directly copied, by randomly retrieving the values from 0 to 16, to achieve a hexadecimal color, here we need to know that the color like #000fff is actually six hexadecimal numbers.
3. Text rising effect
let i = 0
setInterval(() = > {
_this.style.top = this.y - 20 - i + 'px'
i++
}, 10);
Copy the codeBecause the style of animation frame directly operated in native JS is more complex, timer is used to achieve the same function, and the top value of the label is gradually reduced, so that the label will achieve the effect of rising
4. Fading effect of text
@keyframes remove {
100% {
opacity: 0; }}Copy the codeThe fading effect is achieved by cSS3 animation, which is very simple. The animation is bound to the element by JS
5. Clear labels
Text.prototype.out = function (_this) {
_this.remove()
}
setTimeout(function () {
text.out(span)
}, 1900)
Copy the codeSince the animation length is two seconds, the countdown is used here, and the label is deleted at about 1.9 seconds ~
6. Click the instantiate TAB and generate it at the click position
body.addEventListener('click'.function (e) {
let x = e.pageX;
let y = e.pageY; // Current coordinates
let randContent = Math.ceil(Math.random() * content.length);// Get a random number
let text = new Text(x, y, randContent);/ / instantiate
let span = document.createElement('span')// Create a new label
span.style.color = text.getRandom();// Add random colors
text.create(span);// Add text content
setTimeout(function () {
text.out(span)// Clear the label
}, 1900)})Copy the codeHere we add styles and methods to text labels by instantiating them to display them on the page
The complete code
Here is the complete code, you can change the contents of the array to achieve your own effect
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Click to display custom text</title>
<style>
body {
height: 100vh;
background-color: black;
}
.text {
position: absolute;
z-index: 9999999;
font-weight: bold;
user-select: none;
}
@keyframes remove {
100% {
opacity: 0; }}</style>
</head>
<body>
</body>
<script>
window.addEventListener('load'.function () {
let body = document.body;
let content = ["Go live your life. ❤"."❤ The Sun Never Sets "❤"."❤ Yige ❤"."❤ The Forest Bus ❤"."❤ Love is a Word ❤"."❤ The Sea of Stars ❤"."❤ Millions and Millions "❤"."❤ I'm Waiting ❤"."❤ As One ❤"."❤ Convergence ❤"."❤ "Distance "❤"."❤ "Earlier Earlier "❤"."❤ Gulf of Alaska ❤"."Peace&Love "❤"."❤ Grey "❤"."❤ Take You Home "❤"."❤ wait for me to Come Home "❤"."❤《0919》❤"."❤ I'm Fine ❤"."❤ Will It or Won't it ❤"."❤ Economy Class "❤"."❤ After I'm Gone ❤"."❤ Undeleted "❤."❤ Girls "❤"."❤《Let Her Go》❤"."❤ About Your Dream "❤"."❤ Slowly ❤"."❤ rainy Day ❤"."❤ Wings "❤"."❤ 'Get Closer' ❤"."❤ Wings "❤"."❤《This Is Love》❤"."❤ Do-Over ❤"."❤ sunny Day ❤"."❤ Blank Grid ❤"."❤ Love You 3000 ❤"."❤ Whereabouts Unknown ❤"."❤ I Want ❤"."❤ Evening Star "❤"."How about you?" ❤"."❤ 50 Feet "❤"."❤《COCO》❤".❤ NUMB ❤"."❤ Reenactment ❤"."❤ All You Think about is the Stars ❤"
] // An array of custom content
body.addEventListener('click'.function (e) {
let x = e.pageX;
let y = e.pageY; // Current coordinates
let randContent = Math.ceil(Math.random() * content.length);
let text = new Text(x, y, randContent);
let span = document.createElement('span')
span.style.color = text.getRandom();
text.create(span);
setTimeout(function () {
text.out(span)
}, 1900)})function Text(x, y, rand) {
this.x = x;
this.y = y;
this.rand = rand;
}
Text.prototype.create = function (_this) {
let body = document.body;
_this.innerHTML = content[this.rand - 1];
_this.className = 'text'
_this.style.top = this.y - 20 + 'px'
_this.style.left = this.x - 50 + 'px'
_this.style.animation = 'remove 2s'
body.appendChild(_this);
let i = 0
setInterval(() = > {
_this.style.top = this.y - 20 - i + 'px'
i++
}, 10);
}
Text.prototype.out = function (_this) {
_this.remove()
}
// Set a random color
Text.prototype.getRandom = function () {
let allType = '0,1,2,3,4,5,6,7,8,9, a, b, c, d, e, f'; // Hexadecimal color
let allTypeArr = allType.split(', '); // Split into arrays with ','
let color = The '#';
for (var i = 0; i < 6; i++) {
// Generate a random number from 0 to 16
var random = parseInt(Math.random() * allTypeArr.length);
color += allTypeArr[random];
}
return color; // Returns a randomly generated color}})</script>
</html>
Copy the codeThe end of today’s sharing liao ~, quickly open your compiler implementation!!