Effect snow is just a class effect of the name, you can be the effect of some of the free fall movement of red rain, etc., this is pure cssanalog snow effects, more effects you can play on their own.
1 Introduction
Since the activity of the company's products, we need to simulate a similar effect snow. Achieve animation is nothing more than a browser css3and canvas(there are gif), compared to the lower css3and canvasthe advantages and disadvantages:
- Animation freedom:
canvaswins; - Complexity:
canvaswins; - Compatibility:
canvaswins; - Performance:
css3wins (requestAnimationFrameand hardware acceleration).
Because there are certain requirements for performance, canvascontrast css3will lead to more computational performance may not be good, so use css3simulate snow effect (ps: can be used cssto solve the problem would not javascriptsolve ha ha).
Small partners interested in the web front end to this technology can be added to our study circle, because I am not a 211, 985, just an ordinary undergraduate students, English is not particularly good, mathematics is not particularly good. So I chose the front end. Work sixth year, and I am glad he chose this path. 767-273-102 autumn dress. In the goose factory done, along with entrepreneurial leader to stay there. I want to share their technology to everyone, if you're still confused, I hope to enter a number of modest means, to help you. Are a group of people with a dream, we may be in different cities, but we will walk together with the front tip of the tip
2. Principle
It is used herein css3to animation. To domadd elements animationattribute animation can be simulated, e.g. w3school of example:
<!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, that's who will be, but there is a problem, not a mechanical snow falling, but be fast or slow, swings, indefinite periods of time, the focus here is the need to construct randomness, under rational analysis.
- The starting point of the snow in your browser randomly;
- Snow random velocity;
- Snow to fall to the ground from the start time of random (random random delay time and the entire process of snow);
- Snow during the swing random.
We can find these points randomness of the corresponding property in the css:
- Starting point:
positionThe left and right orientation (animation we generally use positioning, because they can reduce unnecessary reflows and redrawn); - Speed:
animation-timing-function(speed provides a wealth of property); - Time:
animation-durationandanimation-delay; - Swing:
transform: translateX()(displacement in the horizontal direction).
Some may ask, these attributes are not random Yeah, not as Math.randomrandom as function. We change the direction of thinking, the paper said random random snow, snow is not random properties. Each time the snow falling, falling speed, swings are fixed, the time between the falling snow and the snow falling speed, swings are different, then achieve the desired effect.
Aware of this, leaving the last question, how different to each snow fall time, falling speed, swings it? Here we use a truly random function Math.random, the use of data with custom properties Math.randomand attributes match css rules, you can determine the animation effects.
3. The structure shape snow
3.1 a linear gradient
.linear{
width: 100px;
height: 100px;
background: linear-gradient(0, green 40%, red 40%, red 60%, green 60%);
}
More than 320 pieces draw a 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%);
}
4. The structure of snow animation
I sasswrote cssto construct animated, in fact, the language does not matter, focusing on principles.
4.1 starting point
@for $i from 1 through 100 {
.animation[data-animation-position='#{$i}'] {
left: #{$i}vw;
}
}
Here the use sassof loop function to create matching 1-100 of classthe name animationand attribute selectors for the [data-animation-position=1~100vw]value of such elements we want leftto 50vw, directly add classname data-animation-position=50vw. There are two caveats:
- Range 1 to 100
vw: Note that the unit isvw, we want the starting point of snowflakes appear anywhere in the horizontal direction, andvwis to screen divided into100parts,100vwthat is, the full screen; - Why should 1 to 100 all out cycle: the only way to match the value in the range we need.
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 include animation exercise 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 consists of two animations, namely the falling falland swinging swing, falling animation is fixed, only need to swing random, so I customized the property matching rules, you can randomly swayed.
@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. randomness
Here use reactto demonstrate the code, then again once you understand the principle, the language is really not too important.
5.1 snowflake elements
<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 snow element contains several property values a few:
data-animation-position: Start bit;data-animation-timing: Snow speed;data-animation-delay: Delay;data-animation-duration: Total time of snow;data-animation-name: Drop animation and swing animations.
5.1 scope random function
random(min, max){
return Math.floor(Math.random() * (max - min + 1) + min)
}
5.2 Properties of random assignment
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)]
}