By zhangxinxu from www.zhangxinxu.com/wordpress/?… This article can be reprinted in full, but with the written permission of the original author, while retaining the original author and source, the abstract drainage is optional.

The iPhone X’s bangs and derivative interactions

One notable feature of the iPhone X’s styling is its distinctive bangs.

Then there are some cool interactions.

For example, the following interaction:

Interactive video effects: t.cn/Rp01GKc

Lists are automatically arranged around the iPhone X’s bangs as the page scrolls.

In fact, it has been supported for a long time for CSS3 to surround this particular shape. Both CSS3 Shapes and CSS3 Regions are available. This article shows how element content automatically wraps around the iPhone X’s fringe as it scrolls using CSS3 Shapes.

Automatic element scrolling around iPhone X head bangs

See is believing, and you can click here: CSS3 Shapes Lists around iPhone X Bangs for demo

You can also scan the following QR code directly on your phone (if it is an iPhone) to experience:

Scroll through the list to see something like the following GIF:

Around qi bang rolling principle

A CSS property called Shape-outside enables inline elements to be arranged externally in irregular Shapes, with the following syntax (see MDN) :

/* keyword value */ shape-outside: none; shape-outside: margin-box; shape-outside: content-box; shape-outside: border-box; shape-outside: padding-box; /* function */ shape-outside: circle(); shape-outside: ellipse(); shape-outside: inset(10px 10px 10px 10px); shape-outside: polygon(10px 10px, 20px 20px, 30px 30px); /* <url> value */ shape-outside: url(image.png); /* Gradient */ shape-outside: Linear-gradient (45deg, Rgba (255, 255, 255, 0) 150px, red 150px);Copy the code

The shape-outside property itself needs to be a floating float element for it to work.

Shape-outside :polygon() is used to achieve the demo effect in this paper, and the polygon shape similar to the fringe shape is sketched by point coordinates. The CSS code is:

.shape {
  float: left;
  shape-outside: polygon(0 0, 0 150px, 16px 154px, 30px 166px, 30px 314px, 16px 326px, 0 330px, 0 0);
}Copy the code

The purple area is shown in the figure below:

At this point, list elements that are not followed by a BFC (block formatting context) are automatically arranged around this shape, avoiding the fringe area.

Then, just make a fake iPhone X image with a fringe and overlay it over the area.

At this point, a static list wraps around the bangs.

The next key question is how do you get the list elements to scroll around dynamically?

Because the shape-outside element is a floating element, it must scroll along with the container. We need the effect that we draw the bangs to be fixed. At this point, I’m doing it with JavaScript.

The principle is simple: listen for the container’s scroll event and let our shape-outside draw the area offset by the scroll size in real time. The shape-outside area is permanently fixed in the middle of the rolling container clientHeight.

The entire effect is thus implemented, and the relevant JS is as follows:

box.addEventListener('scroll', function () { var scrollTop = box.scrollTop; ShapeOutside = 'polygon(0 0, 0 '+ (150 + scrollTop) +'px, 16px '+ (154 + scrollTop) +'px, 30px '+ (166 + scrollTop) +'px, 30px '+ (314 + scrollTop) +'px, 16px '+ (326 + scrollTop) +'px, 0 '+ (330 + scrollTop) +'px, 0 0)'; });Copy the code

More detailed code is available on the demo page.

Other, easier ways to surround the iPhone X bangs

If our technology selection is more about simplicity than resource consumption, a similar effect can be achieved by using shape-outside: URL (image.png) syntax, where ‘image.png’ is the image to be circled based on the calculated alpha channel. In a simple sentence, it follows the opaque region of the image.

Since the shape calculation using URL () is based on image elements, and the calculation properties of basic shape methods such as inset(), circle(), ellipse() or polygon() are not the same, it can be directly offset by vertical margin. This is much easier to understand than polygon() computing coordinate positions in real time.

Take a look at the CSS and JS code as follows:

.shape {
  float: left;
  shape-outside: url(liu-outside.png);
  margin-top: 150px;
}Copy the code
box.addEventListener('scroll', function () { var scrollTop = box.scrollTop; Margin.style. marginTop = (150 + scrollTop) + 'px'; });Copy the code

As you can see, when we scroll through the container, we only have to change a marginTop; The shape-outside: Polygon () implementation requires changing multiple coordinates at the same time.

To see is to believe, you can click here: shape-outside URL implementation list around iPhone X Bangs demo

If you have an iPhone, you can also scan the code to experience it:

The effect is similar:

There is a detail description Here is a detail to be sure, that is the image as the surrounding area and the fringe image is not a picture shown earlier, because we need and the back of the fringe area of the word there is a gap, therefore, The ‘liu-outside. PNG ‘image in url(liu-outside. PNG) is filled with a special solid color (to expand the size of the surrounding area on the right) :

CSS Shapes compatibility and Concluding Remarks

CSS Shapes compatibility is supported for both Chrome and Safari (including iOS), which means we can use it on the iPhone, perfect. Note that in iOS10.2 and prior, CSS Shapes is made with WebKit Private prefix, but iPhone X is said to be at least iOS 11 by default, and bangs are designed for iPhone X, so it doesn’t matter.

This example shows the importance of breadth of knowledge. If we dig into the CSS and JS code used for the final implementation, it’s just a few lines of code, one keystroke, and a few minutes.

Then why the majority of the front end to see this effect feel cattle, and even think that “UI and the front end have been crying in the toilet”? CSS3 Shapes and CSS3 Regions are the CSS attributes associated with the surround layout.

So, when you go home from work, it’s important to always pay attention to cutting-edge technology, cutting-edge technology, not popular technology. Many cutting-edge technologies are not popular because of their niche use scenarios, and you may not even use them for several years on a project. If you want to get good at technology, get rid of your utility and take the time to understand it.

The above –

Writing in a hurry, if there are inaccurate expressions, welcome to correct.

Thank you for your precious time!

This article is an original article, and it will often update knowledge points and correct some mistakes. Therefore, please keep the original source for reprinting to facilitate traceability, avoid the misleading of old wrong knowledge and have a better reading experience. This paper addresses: www.zhangxinxu.com/wordpress/?…

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