How to Implement the vivid effect of window glass raindrops with pure css _ javascript skills

Css achieves the effect of water drops on the window. The effect is extremely lifelike. The rain outside the window is flushed on the glass. It looks like a blurred window, with a steep drop of rain, next we will share with you how to use CSS technology to implement such a picture. Here we will share with you how to use pure css to achieve the vivid effect of window glass raindrops, happy audience of interested friends. Here we only use CSS technology to demonstrate such a scenario, which may not be very practical. However, this is the best opportunity to explore new CSS features. You can try new features and new tools. In addition, we will gradually practice it at work. HAML and Sass will be used in the creation of window raindrops.

Case Effect

View demo

Source code download

Seeing the above effect is not a bit like watching the night view in the rain outside the window, the rain on the window is so real, but the night view outside the window is so blurred. We are not going to be poetic. I would like to pay more attention to the technologies used to achieve such an effect.

Pre-processor

In this example, HAML and Sass are used to replace the HTML and CSS that we are familiar. It requires hundreds of raindrops.

Element, and hundreds

Write style, after all, every raindrops grow inconsistent. In addition to reducing the workload, you can also use loops and variables in the pre-processor. The most important thing is that we can use the random value generated by the random function, so that we do not need to process hundreds of raindrops separately.

You can view the syntax of HAML and Sass on its official website. If your local computer does not have such a development environment, you can directly create a DEMO in Codepen and select the corresponding pre-processor. In the HTML and CSS configurations, select the corresponding Preprocessor. For example, select HAML in HTML settings and SCSS in CSS settings.

For more Chinese tutorials on Sass, click here to read.

Structure

The structure of the window raindrops is not too complex. There are two main layers: Windows and raindrops. In this case, a. window is used to represent the window, and the above raindrops are placed in the. raindrops container. The raindrops are produced through. border and. drops. And the windows. window and raindrops. raindrops are placed in the container.

In container:

.container .window .raindrops .borders  - (1..120).each do  .border .drops  - (1..120).each do  .raindrop

Compiled structure:

Style

Styles are divided into three layers:

Blurred night views outside the window (can be understood as the window effect)
Raindrops Effect
Raindrops slide animation effect
Next, let's take a look at how these effects are achieved and what CSS new features are used.

Set Variables

The overall effect is written using Sass. If you have never understood or touched Sass, we recommend that you first have a simple understanding of it. This will help you quickly understand how the case works.

In the night view outside the window, I found an image at the beginning of the Light and made the window full screen. Here I declare three variables:

$image: "http://www.w3cplus.com/sites/default/files/blogs/2015/1506/huadenchushang.jpg";$width:100vw;$height:100vh；

In addition to this, you need to set the raindrops variable:

$raindrops:120;

Note that the variable value of raindrops is best matched with the raindrops structure in HTML.

Enable Windows to occupy full screen

The first thing to do is to make the Windows occupy full screen. In fact, it is to make the. window display in full screen. It is not difficult to achieve full screen effects. I want to know more about CSS, and you can do it in minutes. However, here we use the new CSS3 method and the viewport unit to achieve full screen effect:

.container{ position:relative; width:$width; height:$height; overflow:hidden;}.window{ position:absolute; width:$width; height:$height; background:url($image); background-size:cover; background-position:50%;}

Two key knowledge points are used:

The unit of viewport is vw and VL, so that the container. container and. window are as large as window windows. (For details about the Viewport unit, see here)
Use the background-size attribute of CSS3 to display the background image on full screen.

Blur effect (frosted glass)

The effect we want is not just as simple as the full screen background image, it looks like the image is blurred. Some people may say that using the software to make a full picture of a blurred back is just a matter of minutes. If you still use this method, it means you are Out.

CSS3 has a filter attribute and sets it to blur (). The effect is displayed.

.window{ ... filter:blur(10px);}

Rain and dew in real life

Before we continue, let's look at the effect of raindrops on windows in real life:

Image from: Wikipedia

Because of the refraction, the raindrops flip the image. In addition, the shape of the raindrops is more or less similar to that of the semi-sphere, and they look like black borders.

Raindrops

Based on the raindrops we see, let's try to make a separate raindrops effect.

HAML

.container .window .raindrop

SCSS

$drop-width:15px;$drop-stretch:1.1;$drop-height:$drop-width*$drop-stretch;.raindrop{ position:absolute; top:$height/2; left:$width/2; width:$drop-width; height:$drop-height; border-radius:100%; background-image:url($image); background-size:$width*0.05 $height*0.05; transform:rotate(180deg);}

This is simple. I used p. raindrop to draw an ellipse. In addition, the original background image is used for filling and an inverted effect is made.

Now, we need to add a small border to make the raindrops look more like rain points (it looks like a three-dimensional effect ).

HAML

.container .window .border .raindrop

SCSS

.border{ position:absolute; top:$height/2; left:$width/2; margin-left:2px;  margin-top:1px; width:$drop-width - 4; height:$drop-height; border-radius:100%; box-shadow:0 0 0 2px rgba(0,0,0,0.6);}

Please note that we have not only added a border, but also squeezed the border, so the raindrops look more natural.

The raindrops look okay. At this time, we can add hundreds of raindrops:

HAML

.container .window .raindrops .borders  - (1..120).each do  .border .drops  - (1..120).each do  .raindrop

We made 120 raindrops.

Next, use the Sass loop to write a style for each raindrops:

@for $i from 1 through $raindrops{ $x:random(); $y:random(); $drop-width:5px+random(11); $drop-stretch:0.7+(random()*0.5); $drop-height:$drop-width*$drop-stretch; .raindrop:nth-child(#{$i}){  left:$x * $width;  top:$y * $height;  width:$drop-width;  height:$drop-height;  background-position:percentage($x) percentage($y); } .border:nth-child(#{$i}){  left:$x * $width;  top:$y * $height;  width:$drop-width - 4;  height:$drop-height; }}

Here, the @ for loop of Sass is used to process the style of each raindrops, and random values are generated using the random function random (), so that the size and extrusion of each raindrops are inconsistent. At the same time, the percentage () function is used to make the background image of the raindrops adopt different positions.

The above results are static, in order to make it more rain effect. The animation effect of CSS3 can be used for the effect of raindrops.

@keyframes falling { from { } to { transform: translateY(500px); }}

After defining the falling animation, you only need to call it on the raindrops:

@for $i from 1 through $raindrops{ $x:random(); $y:random(); $drop-width:5px+random(11); $drop-stretch:0.7+(random()*0.5); $drop-delay: (random()*2.5) + 1; $drop-height:$drop-width*$drop-stretch; .raindrop:nth-child(#{$i}){  left:$x * $width;  top:$y * $height;  width:$drop-width;  height:$drop-height; background-position:percentage($x) percentage($y); animation: #{$drop-delay}s falling 0.3s ease-in infinite; } .border:nth-child(#{$i}){  left:$x * $width;  top:$y * $height;  width:$drop-width - 4;  height:$drop-height; animation: #{$drop-delay}s falling 0.3s ease-in infinite; }}

In this step, you can see the effect of the raindrops window at the beginning of the article. Is it really nice.

Summary

The article demonstrates step by step how to use the new CSS features to create a light shower window. The entire implementation process uses a pre-processor to write code. From the whole process, you can clearly perceive that if there are no pre-processors like HAML and Sass, you need to write style effects for hundreds of raindrops, that is definitely a very hard task. After use, they can easily use their features and some new features of CSS3.

We recommend that you use the Chrome browser to view this effect. Because some new features of CSS3 are used here, you should understand it. Never ask me how to break the Internet Explorer 6.

Pure css achieves the vivid effect of the raindrops in the window glass. So far, I hope you will like it.