Hello everyone, I am Han Cao 😈, a grass code ape 🐒. Intermittent blood 🔥, continuous sand sculpture 🌟 if you like my article, you can pay attention to ➕ point like, grow with me ~ wechat: Hancao97, plus my wechat free to see the front-end early chat 10.23 vUE special live
This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.
A prelude to 🎵
A few days ago I saw some code love letters on Zhihu, like this:
# If you look back at me
ifyou.turn_round_aguang()
# I will always be behind you
I.behind(you).forever()
# Keeping an eye on you
see(you)
Copy the codeIn fact, the initiation of a summary of the front end of the idea of showing love, but looked for a long time, feel that it is ordinary, and even a lot of small programs to show love to give me a feeling of the 2000s, such as this:
So I came up with an idea, do it yourself, cold grass design and hands-on implementation of the front-end engineer special.
Make 🎵
This chapter covers the following:
- Look at design from effect
- Describe the implementation of the effect
Next, we begin the main content of this article.
Design 🤔
The page is divided into two parts:
- Class terminal window on the left
- The effect display area on the right
Class terminal window:
- Want to have egg
- Echo the effect area on the right
Effect display area:
- The countdown ⏰
- Heart ❤ ️
- Strange barrage 📖
- The moon 🌛
- Rain ripples on the water 🌧️
- Colorful rain 🌈
Develop 😪
Chain events together — Deferred
First, I need to concatenate events, and the events in this animation are complicated, so I need to concatenate events. You can’t nest them with setTimeout callbacks, because that would be disgusting and unmanageable, so I use Deferred:
function Deferred() {
if (typeof (Promise) != 'undefined' && Promise.defer) {
return Promise.defer();
} else if (this && this instanceof Deferred) {
this.resolve = null;
this.reject = null;
const _this = this;
this.promise = new Promise((resolve, reject) = > {
_this.resolve = resolve;
_this.reject = reject;
});
Object.freeze(this);
} else {
throw new Error();
}
}
Copy the codeTo put it bluntly, I take resolve and reject out of a promise and use them to create a coherent sequence of events:
stepWord('cause 9.15'.'rgb(228, 231, 12)')
.then(() = > stepWord('Start the countdown'.'#c1e8fa'))
.then(() = > stepWord('start the countdown'.'#db61ac'))
.then(() = > stepSpace())
.then(() = > stepWord('🌟 🌟 🌟 🌟 🌟 🌟'))
.then(() = > stepSpace())
.then(() = > stepTime())
.then(() = > stepWord('Heart rate quickens, Tibetan mastiff begins to evolve'.'#c1e8fa'))
.then(() = > stepWord('The heart rate quickens and the Tibetan mastiff begins to evolve.'.'#db61ac'))
.then(() = > stepSpace())
.then(() = > stepWord('🐶 🐶 🐶 🐶 🐶 🐶'))
.then(() = > stepSpace())
.then(() = > stepDown())
.then(() = > stepWord('cause 9.21'.'rgb(228, 231, 12)'))
.then(() = > stepWord('We wish each other a long life, even as miles apart.'.'#c1e8fa'))
.then(() = > stepWord('you are my fairy forever'.'red'))
.then(() = > stepSpace())
.then(() = > stepWord('🌛 🌛 🌛 🌛 🌛 🌛'))
.then(() = > stepSpace())
.then(() = > stepMoon())
.then(() = > stepWord('Big Baby'.'#c1e8fa'))
.then(() = > stepWord('big zaizai'.'#db61ac'))
.then(() = > stepSpace())
.then(() = > stepWord('☀ ️ ☀ ️ ☀ ️ ☀ ️ ☀ ️ ☀ ️'))
.then(() = > stepSpace())
.then(() = > stepRemove())
.then(() = > stepWord('But I hope the storm will come and stay you here.'.'#c1e8fa'))
.then(() = > stepWord("Don't leave me!".'#db61ac'))
.then(() = > stepSpace())
.then(() = > stepWord('🌧 ️ 🌧 ️ 🌧 ️ 🌧 ️ 🌧 ️ 🌧 ️'))
.then(() = > stepSpace())
.then(() = > stepRain())
.then(() = > stepWord('Leave you here to enjoy the colorful rain.'.'#c1e8fa'))
.then(() = > stepWord("I'll create more surprises for you".'red'))
.then(() = > stepSpace())
.then(() = > stepWord('🌈 🌈 🌈 🌈 🌈 🌈'))
.then(() = > stepColorFulRain())
.then(() = > stepHanzi())
Copy the codeWrite it down from front to back in one breath, paving the way for a long string of animation connections behind.
Unified processing method of terminal copy — stepWord & stepSpace
The stepWord method can configure the terminal text and font color
function stepWord(str, color) {
const step = str;
const deferred = new Deferred();
const len = step.length;
let site = 0;
content.appendChild(document.createElement('div'));
const child = content.children[content.children.length - 1];
if (color) {
child.style.color = color;
}
const timer = setInterval(() = > {
child.innerHTML = step.slice(0, site + 1);
if (site == len) {
clearInterval(timer);
deferred.resolve();
} else{ site++; }},100)
return deferred.promise;
}
Copy the codeThe stepSpace method adds blank lines
function stepSpace() {
content.appendChild(document.createElement('br'));
return Promise.resolve();
}
Copy the codeCountdown — stepTime
Simply replace the content of the DOM element and let the text color gradually darken.
function stepTime() {
const deferred = new Deferred();
const time = document.getElementsByClassName('time') [0];
time.style.opacity = 1;
const number = time.children[3];
const list = ['二'.'三'.'four'.'five'];
let site = 0;
const timer = setInterval(() = > {
if (site == list.length) {
document.getElementsByClassName('heart') [0].style.opacity = 1;
clearInterval(timer);
time.style.opacity = 0;
deferred.resolve();
} else {
number.innerHTML = list[site];
number.style.color = `rgba(233, 62, 59, ${(site + 2) * 0.2}) `; site++; }},1000)
return deferred.promise;
}
Copy the codestepColorFulRain
In this case, the spread of the ripples is simply a frame animation, followed by the generation of DOM elements in random locations through JS.
css
@keyframes rain {
from {
transform: scale(1.1);
opacity: 1;
}
50% {
opacity: 1;
}
to {
transform: scale(100.100);
opacity: 0; }}.rain {
height: 3px;
width: 3px;
background: radial-gradient(rgba(255.255.255.0.1), rgba(255.255.255.0.1), rgba(0.0.0.0.3));
border-radius: 50%;
transform-origin: 50% 50%;
opacity: 0;
animation: rain 5s linear;
position: absolute;
z-index: 999;
}
Copy the codejs
function stepColorFulRain() {
const deferred = new Deferred();
view.style.background = '#0E2744';
view.style.overflow = 'auto';
function Rain() {
this.rain = document.createElement('div');
this.rain.className = 'rain';
this.rain.style.top = Math.random() * window.innerHeight * 0.9 + 0.1 * window.innerHeight + 'px';
this.rain.style.left = Math.random() * window.innerWidth * 0.9 + 0.1 * window.innerWidth + 'px';
this.rain.style.background = 'radial-gradient(Rgba (255, 255, 255, 0.1), rgba(The ${Math.random() * 155 + 100}.The ${Math.random() * 155 + 100}.The ${Math.random() * 155 + 100}`, 0.5));
this.rain.style.animation = 'rain 6s linear'
document.body.appendChild(this.rain);
const timer2 = setTimeout(() = > {
clearTimeout(timer2);
document.body.removeChild(this.rain);
}, 6000)}let starTimer = setInterval(() = > {
new Rain();
}, 300)
setTimeout(() = > {
deferred.resolve();
}, 2000)
return deferred.promise;
}
Copy the codeOther code
The rest of the code is very simple CSS.
The heart-shaped background uses Codepen’s heart ❤️
Copywriting eggs
to9.15Start the countdown 🌟🌟🌟🌟 precipice The Tibetan mastiff begins to evolve The heart rate quickens and The Tibetan mastiff begins to evolve. 🐶🐶🐶🐶 college9.21Wishing you are my fairy forever 🌛🌛🌛🌛🌛🌛 big Zaizai ☀ ☀ ☀ ☀ ☀ ☀️ but looking forward to the rain, can leave you here Do not leave me! 🌧 ️ 🌧 ️ 🌧 ️ 🌧 ️ 🌧 ️ 🌧 ️ leave you here, enjoy colorful rain I will create more surprisesforYou 🌈 🌈 🌈 🌈 🌈 🌈Copy the codeCold grass’s declaration of love 📖
The picture for this chapter is from the movie “Side Ear.”
Because of you, I would like to become a better person, do not want to be your burden, so work hard, just want to prove that I am good enough to match you.
Actually when I was a child will be numerous works shape the love, whether it is “digital baby 3” ignorant of love, people save trees li and Kiel beast in the form of evolution is true red-violet red-violet knight beasts, or feed the dreamer “in their respective convention” to complete the dream wedding “after their hard work, don’t like reality, or… Our marriage rate is going to… , to see recently “listen” in the above sentence, in my eyes are very beautiful and pure.
I’ve been confused, I’ve been anxious, I’ve been moving forward, I don’t know where I’m going, I’ve been stuck with things and nightmares.
And now, there are 84 days before the end of 2021, 84 days before the new five years, the new 10-year plan to open, you can cut the old shackles, slaughter the nightmare dragon, step on the colorful auspicious clouds, hold the magic needle of the sea… Well, the more I talk, the worse I feel…
Well, again
Now, with 84 days to go until the end of 2021 and the start of a new five-year and 10-year plan, you can pack your bags and get ready for the future
I wonder if I could rewrite the above:
Because of you, I aspire to be a better person, I want to give you a hot heart, I want to give you gorgeous feathers, I want to present a more youthful self. Therefore, I not only want to work hard, but also want to stay, just to prove that I am the only right choice, just to convey that I want to be the one you want to embrace.
Tail plays 🎵
Love is very precious, cold grass to work hard 🌿 know that they are not good enough but want to “Dream Eater” as pure dream and love: complete the dream to get married and “listen” in: because of you, I would like to become a better person.
And this quote from Zhihu:
I think the best relationship is one where two people work hard, experience all kinds of fun together, and also tolerate and encourage each other. When someone opens up a new world for you, you don’t turn down the whole world because you like one person.
– Hancao Design, to be continued-
Write in the last
If the gods would listen to my wishes, then I miss you good night, may there always be stars in your dreams. This mountain long water far road, I want to go with you
Ah, hu, cold grass oil, xin Xiangyang light, heartache like xin move.
Add my wechat: HancAO97, invite you to join the group, learn to communicate front end together, become a better engineer ~ can also watch the front end early chat for free on October 23 vUE special live, there is especially big share oh ~