Hello, I’m Steven.

In this issue, we’re going to do some more fancy effects, which are like the macOS Dock icon zoom in:

If you just zoom in one icon at a time, it’s not that difficult. However, our style is to do it carefully, when the cursor moves left and right on the same icon, it will affect the left and right icon size, to achieve a coherent effect, this is the difficulty of this time.

All right, let’s get started.

This video version of the tutorial at www.bilibili.com/video/BV1Sf… , welcome the attention of sanlian!

Part of the HTML

Open up the CodePen editor and add some ICONS in the HTML section, which I’ll use as emojis, add a list of

    tags, set class to the dock, and then use

  • to hold each Emoji, with a layer of
    over it. The class is glass.

Part of the CSS

Then for the CSS section, add the HTML selector and set the base text size to 15px. Add the body selector, set margin and padding to 0, display to flex, width to 100%, min-height minimum to 100vh, overflow to hidden.

Then to position it at the bottom of the page, set the align-items to flex-end.

Add the. Glass selector, set the width to 100%, height to 8REM, background color to light gray, display to Flex, and justify content to center.

Add the.dock selector and place the ICONS in the center and landscape, list-style to None, margin and padding to 0, display to Flex, Set center-content and align-items to center.

Then set the style of the icon and add the.dock Li selector. Since this is an emoji, you can adjust its size by setting the font-size to 6rem. I’m going to add some padding, and I’m going to set the left and right to 0.5rem, and I’m going to set the cursor to default, which is the default arrow.

Ok, that’s all for the styling, now it’s time to implement the effects.

The principle of animation

First, let’s see how this works. For example, when we move the cursor to the fourth icon, it will zoom in. In addition, the third and fifth ICONS next to it are both slightly larger, and when the cursor is positioned to the left, the third icon is slightly larger than the fifth icon, and vice versa.

So we need to know whether the cursor is on the left, middle, or right of an icon.

Part of the JavaScript

Go to the JavaScript section and retrieve all the.dock li using querySelectorAll(). Then add mousemove event listeners for each Li by loopback.

Define a variable item and assign the value e.t. get because it will be referenced many times later. And then to know the width of the icon’s li container, itemRect define a variable, assign a value of the item. GetBoundingClientRect ().

Next, calculate the cursor’s position on the icon, define the variable offset, and assign e.calientx minus ItemRect.left, which can be negative, so put math.abs () on it, and divide by itemRect.width.

Now when the cursor moves to the left of the icon, offset will approach 0, and when the cursor moves to the right, offset will approach 1.

With this value, we can calculate the magnification of the icon. Define two variables, prev and next, and get the icon of the current cursor through previousElementSibling and nextElementSibling, the preceding and the following Li elements.

I’ll define another variable scale, so if I want the icon to be at most 1.6 times, I’ll assign 0.6 here.

The ratio of amplification is then calculated and written to the CSS variable of the corresponding element. Prev is null when the cursor is on the first icon. Prev is null when the cursor is on the first icon. And then setProperty(), I’m going to set the scale to the CSS variable, so I’m going to set it to 1 plus scale times Math.abs(offset -1), offset -1 because I’m setting the left element, Therefore, the offset value is reversed, that is, changed from 0 to 1 to 1 to 0.

Then use the same logic to set the scale of the right element. The difference is that the offset is used directly, and the current icon is set to 1 + scale, which is the maximum.

Define a function called resetScale() to reset all li’s –scale to 1.

There are two places to execute this function: inside the mousemove event and when the cursor leaves the Dock. Add a mouseleave event listener and execute resetScale(), and you’re done.

Take a look at the change in –scale via developer tools:

When the cursor moves, the –scale of any li that is out of range is reset to 1, and when the cursor leaves the Dock, all the Li’s –scale is reset to 1.

The last step

All right, here we are, just one step away from finishing.

Going back to the CSS section, change the text size set to 6rem times var(–scale), and add a layer of calc() because it involves computation.

Initialize –scale to 1 in the.dock selector. Test it out:

We’ve got the amplification, but there’s a problem with the positioning. That’s not too hard to do, so I’m going to set position to relative. Then calculate the displacement of the top relative to the icon. Add a little bit more transition Settings.

Let’s do it all by the way. If you’re interested, pause and try it out yourself.

It’s easy to define an animation called loading, translateY() to move it up and down, and then insert the.dock li.loading selector to execute the animation when Li loading the class, And repeat it an infinite number of times.

In the JavaScript section, add a click event listener for Li and loading the loading class for the target element.

Let’s see how this case works

Above, is this issue to introduce all the content.

Source code for this case is at codepen. IO /stevenlei/p…

Your support is my motivation, please pay attention to CodingStartup at least, let’s work together!

  • B station: space.bilibili.com/451368848
  • YouTube: youtube.com/codingstart…
  • The Denver nuggets: juejin. Cn/user / 249773…