Hi everyone, I’m Steven. I finally feel winter is coming these days. I have a cold, so please keep warm.
BiliBili has also changed from the fall header to the winter header, which looks more elegant. When the cursor moves left and right, in addition to the displacement parallax effect of the background and foreground trees, the background also changes to different weather conditions, such as morning, afternoon and night:
The principle of production is similar to the autumn version, so we will realize the first picture of this winter in this episode.
This video version of the tutorial at www.bilibili.com/video/BV18h… , welcome the attention of three companies!
Before we start, we must make it clear that all the pictures and videos used in this teaching are from the official website of BiliBili. The copyright of the pictures and videos is owned by BiliBili, and it is only used for teaching demonstration purposes.
Part of the HTML
Open the CodePen editor, add the
The class is called evening, and the window cover effect is called window-cover.
There are three more pictures, which are the changes of trees under different weather conditions. They will be placed in the front of the picture to create a parallax effect with the background. Each class is called Morning, afternoon, and evening.
Ok, now we have 7 elements in total. First we group the part of the background with a
The parts of the tree are also grouped with a
Part of CSS
This is where the HTML part comes in, starting with the CSS part. Add the body selector, set margin to 0, then add the Header selector, set the height to 160px, position to Relative, and overflow to hidden.
Add the header. view and header. tree selectors. Set position to Absolute and set top right bottom left to 0. Then display is set to flex, and context-content and align-items are set to Center.
Add header IMG and header video selectors. Set position to Absolute and display to block. In order to support displacement, set the width to a bit larger, such as 120%, and the height to 100%, so that the proportion of the picture is not correct. If you add object-fit and set it to cover, the picture will be enlarged and filled in proportion.
Then we adjust the order of the image, when the cursor moves from left to right, it will change from morning, to afternoon, to evening, so. Morning should be at the top, followed by. Afternoon.
Add the header. morning selector and set the z-index to 20. Add the header. afternoon selector and set the Z-index to 10.
Note that since the class name is the same, the sorting here also applies to the tree, which is what we want, because the morning background should match the morning tree, and so on.
Part of the JavaScript
Ok, the CSS part is not complete yet, but let’s skip to the JavaScript part for a moment so we can explain the next steps more easily.
Define a constant to get the header back. Then add a Mousemove to listen for cursor movement events and first handle the parallax effects of the background and foreground trees. As we’ve always done, write as little JavaScript as you can to CSS.
Define a variable named Percentage and divide the cursor’s X position e. clientx by the width of the browser window window.outerWidth. So when the cursor moves to the far left it will be 0, and when it moves to the far right it will be 1. With this value, we can calculate the entire animation.
Using header.style.setProperty(), we write the percentage value to the CSS variable named –percentage so that we can reference the dynamic value in the CSS.
The adjustment of the CSS
Going back to the CSS section, first deal with the moving parallax effect of the background image and the foreground tree. Add the header. view and header. tree selectors and set the transform property to translatex() for the background.
Use var(–percentage) to get the value back, then add calc() to multiply the value by 100px, that is, the maximum displacement distance is 100px. Apply the same Settings to.tree and set the foreground value to 50px. The foreground should be out of focus. Add filter: blur(3px) to blur it.
Next, the background changes from morning to night. Since the morning images are now at the top and the afternoon images are in the middle, all you need to do is adjust their transparency to achieve the desired effect.
Add opacity property in header. morning, and the setting value can also be calculated using –percentage. Set this to calc() and subtract –percentage from 1 to 0.25, then divide by 0.25. In this way, the image will gradually become transparent at –percentage at 0.25, and then apply the same setting in header. afternoon, change 0.25 to 0.5. The image will gradually become transparent at –percentage 0.5.
The optimization effect
Now the effect is almost complete, but there are still areas to optimize. We will find that the cursor will jump suddenly when it is cut in different positions.
This is because we fixed the morning background to the far left and the evening background to the far right, and we can make a small change here so that it can support the starting point at any pointcut.
In the JavaScript section, define a variable called startingPoint, add the mouseEnter event listener, and assign startingPoint to e.clientx, which means that when the cursor enters the header, Let’s write down its X position.
Change the formula for percentage. Subtract startingPoint from E. clientx and add 0.5 to the end of percentage, which is the default position in the middle.
Back in the CSS section, in the header selector, set a default value of 0.5 for –percentage. Now we’ll see that at any point we cut in, we’ll start in the afternoon, which is exactly what we want, because we need the next change, which is that when the cursor leaves, it will return to its original position.
In the JavaScript section, add a mouseout event listener and set –percentage to 0.5 via header.style.setProperty().
Since the –percentage is reset to 0.5 after the cursor leaves, the effect is much more reasonable now.
Let’s add some animation transitions to this reset action. Let’s think about where we need animation transitions. This includes background and foreground with displacement, i.e..view and.tree, and morning and afternoon with adjusted transparency, i.e..morning and.afternoon.
Add the four selectors to a group and set transition to.2s all ease-in.
So we’re going to change it so that it doesn’t use transition when the cursor moves, copy the four selectors, add the.moving class after the header, and then transition is none, If the header has a.moving class, cancel transition.
Back in JavaScript, add the moving class to mouseEnter and remove the moving class from mouseout.
Ok, I also want to adjust one more detail, that is, the snow on the window frame of the background in the evening appears after the background appears in the evening. Setting opacity calc(), var(–percentage) minus 0.9, and then dividing by 0.1 makes the window snow appear at the end.
Let’s look at the completion of this case
Well, if you are careful, you will find that the snow effect is not achieved. Yes, because first of all, the snow effect is done with
Above, is this set to introduce all content.
The source code for this case is at codepen. IO /stevenlei/p…
Your support is my motivation, please pay attention to CodingStartup at least class, we come together!
- B station: space.bilibili.com/451368848
- YouTube: youtube.com/codingstart…
- The Denver nuggets: juejin. Cn/user / 249773…