Snowfall effect is just the name of a kind of effect. It can be the movement effect of some free falling bodies, such as red envelope rain. This paper simulates the effect of snow with pure css, and more effects can be exerted by ourselves.
1. Preface
Due to the activities of the company's products, it is necessary to simulate the effect of snow. Browser animation is nothing more than css3 and canvas (and gif). Comparing the advantages and disadvantages of css3 and canvas:
- Freedom of animation: canvas wins;
- Complexity: canvas wins;
- Compatibility: canvas wins;
- Performance: css3 wins (request Animation Frame and hardware acceleration).
Because there are certain requirements for performance, canvas will have more computational load than css3, which may lead to poor performance, so CSS3 is chosen to simulate snowfall effect (ps: problems solved by CSS need not be solved by javascript).
2. Principles
The animation of css3 is used in this paper. Adding animation attributes to dom elements can simulate animation, such as the example of w3school:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>animation</title>
<style>
.animation{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite;
}
@keyframes mymove{
from {
left:0px;
}
to {
left:200px;
}
}
</style>
</head>
<body>
<div class="animation"></div>
</body>
</html>
Of course, everyone will, but there is a problem that snow is not a mechanical fall, but there are fast or slow, swing amplitude, time uncertainty, the focus here is the need to construct randomness, rational analysis.
- The starting point of snow is random in the browser.
- The speed of snow is random.
- The time of snow falling from the beginning to the ground is random (the time of delay is random and the time of the whole snow process is random).
- It sways randomly during the snowfall.
We can find the corresponding properties of these randomness in css:
- Starting point: the left and right orientation of position (we usually use positioning in animation, because it can reduce unnecessary rearrangement and redrawing);
- Speed: animation-timing-function (provides rich speed attributes);
- Time: animation-duration and animation-delay;
- Swing: transform: translateX() (displacement in horizontal direction).
Some may ask that these attributes are not random, unlike Math.random random random functions. Let's change our thinking direction. Random snow in this paper is random snow, not random snow. The falling time, falling speed and swing amplitude of each snow are fixed. The falling time, falling speed and swing amplitude between snow and snow are different, so the effect is achieved.
Aware of this, there is only one last question left. How to give each snow a different falling time, falling speed, swing range? Here we use the real random function Math.random, using data custom attributes with Math.random and css attributes matching rules, we can determine the animation effect.
Small partners who are interested in web front-end technology can join our learning circle. They have been working for the sixth year. They can share some learning methods and details of practical development. 767-273-102 autumn skirt. How to learn the front-end from the zero foundation? They are all people with dreams. We may be in different cities, but we will travel together. Front end, front end, front end
3. Structural snow shape
3.1 A Linear Gradient
.linear{
width: 100px;
height: 100px;
background: linear-gradient(0, green 40%, red 40%, red 60%, green 60%);
}
3.2 Multiple Linear Gradient Snowflakes
.linear{
width: 100px;
height: 100px;
border-radius: 50%;
background-image: linear-gradient(0, rgba(255,255,255,0) 40%, #fff 40%, #fff 60%, rgba(255,255,255,0) 60%),
linear-gradient(45deg, rgba(255,255,255,0) 43%, #fff 43%, #fff 57%, rgba(255,255,255,0) 57%),
linear-gradient(90deg, rgba(255,255,255,0) 40%, #fff 40%, #fff 60%, rgba(255,255,255,0) 60%),
linear-gradient(135deg, rgba(255,255,255,0) 43%, #fff 43%, #fff 57%, rgba(255,255,255,0) 57%);
}
web Front-end development learning Q-q-u-n: 767273102 ，Share learning methods and small details that need attention, and keep updating the latest teaching and learning methods (detailed front-end project teaching video)
4. Constructing Snow Animation
I use the css written by sass to construct animation. In fact, the language is indifferent, and the emphasis is on the principle.
4.1 Starting Point
@for $i from 1 through 100 {
.animation[data-animation-position='#{$i}'] {
left: #{$i}vw;
}
}
Here we use the circular function of sass to create the matching class name animation of 1 to 100 and the value of attribute selector [data-animation-position=1 to 100vw]. For example, if we want the left of the element to be 50vw, we add the class name data-animation-position=50vw directly. Here are two points to be explained:
- Scope 1-100vw: Notice that the unit is vw. We want the starting point of snowflakes to appear at any position in the horizontal direction. The VW divides the screen into 100 parts, and the 100vw is full screen.
- Why recycle 1 to 100: Only in this way can we match the values we need in the range.
4.2 Speed
$timing: (
linear: linear,
ease: ease,
ease-in: ease-in,
ease-out: ease-out,
ease-in-out: ease-in-out
);
@each $key, $value in $timing {
.animation[data-animation-timing='#{$key}'] {
transition-timing-function: $value;
}
}
4.3 Time
Time includes animation motion time and delay time.
@for $i from 1 through 4 {
.animation[data-animation-delay='#{$i}'] {
animation-delay: #{$i}s;
}
}
@for $i from 4 through 8 {
.animation[data-animation-duration='#{$i}'] {
animation-duration: #{$i}s;
}
}
4.4 Swing
Snow is composed of two animations, fall and swing. The animation of fall is fixed, only the swing needs randomness, so I customized the attribute matching rules to swing randomly.
@for $i from 1 through 4 {
.animation[data-animation-name='#{$i}'] {
animation-name: fall, swing#{$i};
}
}
@for $i from 1 through 4 {
@keyframes swing#{$i}{
25% {
transform: translateX(-#{$i * 10}px);
}
50% {
transform: translateX(#{$i * 10}px);
}
75%{
transform: translateX(-#{$i * 10}px);
}
100%{
transform: translateX(#{$i * 10}px);
}
}
}
5. Randomicity
Here we use react to demonstrate the code, or that sentence as long as we understand the principle, language is not really important.
5.1 Snow Element
web Front-end development learning Q-q-u-n: 767273102 ，Share learning methods and small details that need attention, and keep updating the latest teaching and learning methods (detailed front-end project teaching video)
<div className='page'>
{
Array(10).fill().map((v, i) => (
<span
key={i}
className='animation span'
data-animation-position={this.position()}
data-animation-timing={this.timing()}
data-animation-delay={this.delay()}
data-animation-duration={this.duration()}
data-animation-name={this.name()}
/>
))
}
</div>
Our snowflake element contains several attribute values:
- data-animation-position: start bit;
- data-animation-timing: Snow speed;
- data-animation-delay: delay;
- data-animation-duration: total snowfall time;
- data-animation-name: Drop animation and rocking animation.
5.1 Random Range Function
random(min, max){
return Math.floor(Math.random() * (max - min + 1) + min)
}
5.2 Random assignment of attributes
position(){
return this.random(1, 100)
}
delay(){
return this.random(1, 4)
}
duration(){
return this.random(4, 8)
}
name(){
return this.random(1, 4)
}
timing(){
return ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out'][this.random(0, 4)]
}