This article was posted on Wednesday, 06, 2018 at 00:35 and is classified as a JS instance. Read 447 times, 22 times today

By zhangxinxu from www.zhangxinxu.com/wordpress/?… This article can be reproduced in full, but the original author and source should be retained.

1. The floating window interaction effect of wechat

After updating wechat, we found a suspension window function. Public account reading, web browsing back after the default will appear. Click again to go back to where you were reading. No longer will I have to reply to my wife’s message and then switch back to find what I just read. I personally find it a very useful feature.

Its interactive effect has been praised by many people.

For example, the window will shrink into the hover button, which can be dragged to the bottom right to cancel the float window.

These interactions are also possible with web front-end technology.

This is not, I tried, write demo and debug in one hour.

You can click here ruthlessly: wechat web suspension window interactive demo

Interactive instructions

If you are accessing a page from a desktop browser, open developer Tools and view it in mobile mode.

Swipe right to see something like the following:

At this point, release your finger (or mouse) and the moving page shrinks into the float button.

Click the hover button again, and the page will unfold in a mask. GIF:

Second, the key to the realization of the effect

The key to this effect is to shrink the page into the hover button.

The CSS3 clip-path attribute is used.

For a primer on the CSS3 Clip-path attribute, see my previous article “Introduction to THE CSS3/SVG Clip-Path Mask Attribute”.

In one of the demos, the “shape” of this contraction effect is almost implemented.

GIF:

In the simulation of wechat demo, I also used circular clipping with the syntax as follows:

.example {
  clip-path: circle(radius at x, y);
}Copy the code

Radius indicates the clipping radius. X and y indicate the center coordinates of the clipping.

In this demo, because the clipping is relative to the center of the levitating button, the page itself will also drag with the finger. Therefore, RADIUS, X and Y are all dynamic, which is the difficulty of interaction.

Specific implementation can see the demo page source code, very good learning materials, code is very clean, designed to achieve this effect written, no redundancy, also with annotations.

There’s a twist here

Later, I looked at the effect implementation in wechat carefully, and found that I used it wrong. It seems that ellipse clipping is used instead of circle clipping. In other words, ellipse should be used, and the syntax is as follows:

.example {
  clip-path: ellipse(radius-x, radius-y at x, y);
}Copy the code

I don’t want to change it, but it’s just a hint. It is good to use the circle, and then use it in the actual project. When being scolded by others, plagiarism can be scolded slightly, because there are still different places after all.

Realization of other interactive effects

The above demo provides the main interaction, the whole hover box effect also includes some other effects, including hover button drag, including moving to the bottom right corner can cancel the float box, don’t worry, it is also easy to fix.

1. Hover buttons drag around and suck edges

Those of you who are following my article will know that I have previously shared an even better implementation of the hover draw button interaction, which looks like this – with physical collision.

Screenshots off frames, visit this address: m.qidian.com/, mobile mode, you can personally feel the next.

The code is open source: github.com/yued-fe/ine…

It’s also easy to use:

Import JS files, for example:

<script src="Inertia.js"></script>Copy the code

(2) binding.

new Inertia(ele);Copy the code

And congratulations, there you go!

2. Drag and drop the cancel floating window button and an interactive response appears

This effect was introduced before, or should I say appeared, in the article “Implementing drag, insert, sort, and delete modules based on HTML5 Drag/Drop”.

The deletion is very similar to the float box deletion in wechat.

Drag, the delete button appears, move to the delete button, delete button has interactive changes:

Drag and drop to implement module insertion sort deletion

The interactive JS code can be found in the page source code.

Finally, a summary

At the beginning of 1 main demo, plus 1 open source widget, plus 1 deleted demo, these three examples can basically cover the interaction effect of wechat hover box, I believe that everyone will not have any pressure to realize the function, the code is available, and everyone can do a good job following the logic modification.

However, although there are functions, but the final animation details you have to do wechat, tell you, you have to spend an extra half of the time, and this extra half of the time, in fact, is the level of the experience of front-end technical staff watershed.

For example, the demo at the beginning of this article took an hour to build, but if you really want to use it online, it will probably take another hour or two, if you are a person who is very interested in interaction and user experience.

I’ll just mention two random things:

  1. When the page shrinks to the float window button, the page itself actually has an animation that gradually turns medium gray. This can be achieved by covering the page with a gray mask and changing the opacity from 0 to 1. When I implemented it, I got lazy and just used a grayscale filter. In terms of the effect, it is ok, if not particularly keen users, the effect is ok. But if you are looking for a very natural animation effect, the color should also be a perfect transition, it is really necessary to find a way to make the whole page gray, not gray, usually, the more the pursuit of effect, the most pursuit of detail, the more time and energy it takes. 50% of the time and effort will get you 80% of the results, and it takes another 50% of the effort to get 10-20% of the perfect results.
  2. When the page resumes from the hover button, wechat’s implementation has only a black or dark gray bottom layer behind it. And I realized when lazy, page diffusion, the corner is transparent, directly hollow out the following page information. Implementation is not wechat meticulous.

What is a good interaction? It’s an imperceptive interaction that the user takes for granted, and that’s how it should be. But very difficult to do this, take the interactive animation effects, a page shrinking into a small button, finally achieve to the effect of “course”, whether it’s location, size, or transparency, tonal, the transition effect is very natural, only behind it will cost a lot of time and energy, especially the effect of other people don’t realize before.

Therefore, when we praise a good interactive experience of a product, it must be the result of a lot of effort behind it. The product pays attention to and is promoted, and the development has technology and pursuit. From this point of view, the product experience itself is a difficult point of competition for competitors to overcome.

Thanks for reading and welcome to exchange!

CSS World
Click to display the purchase code

// Want a tip? Click here. Got something to say? Click here.

    clip-path
    drag
    drop
    grayscale
    transition
    interaction
    Image clipping
    WeChat