Hi, I’m Steven.

Apple’s website is always a good way to learn about the front end. The introduction page for the newly released iPhone 12 has a text in effect, and this time we’ll explain how it works.

The teaching video version at www.bilibili.com/video/BV1n5. , welcome a key three and attention!

Part of the HTML

Open the CodePen editor and add a header to the HTML section.

Part of the CSS

Then you can focus on the CSS section, add the body selector, set the background color to black, margin to 0, display to flex, context-content and align-items to Center, Set min-height to 100vh and center content up, down, left and right on the page. !

Then add h1 selector and set font family to… Yes, you guessed it, Helvetica. Margin and padding are set to 0, the text size is 48px, and the color is white.

Adjust the spacing between characters again, setting letter-spacing to 0.3px.

Then the key is here, set a gradient color background, background-image is set to Linear-gradient (), gradient gradient gradient is 75deg, and the color is divided into four sections:

Two whites and two completely transparent whites. Then set background-size to 300% horizontal and 100% vertical.

This means that we pull the gradient color of the background to three times the width, and then we adjust its position through background-position-x.

0%If so, you’ll see that the entire line of text is covered in white, so that the background is gradually layered0% 至 33.3%The color of the paragraph between:

Set to50%In the case of33.3% 至 66.67%So it’s a gradient from white to transparent:

Set to100%, it is66.67% 到 100%The color between. Transparent color to transparent color, the result is also transparent:

So we just need to take thisbackground-position-xBy the100%Dynamically change to0%, you can achieve the effect of text in.

Ok, once you understand the principle of gradient color, you can apply gradient color to the text. Set background-clip to text, and set the color of the text itself to transparent.

Then add the H1 :hover selector and set background-position-x to 0%. Finally, add the animation transition: 2s background-position-x ease-in-out.

To test this, you can now do the text fade in effect:

If you want the fade in effect to be triggered only when the page scrolls, we can make some changes.

Triggered when the page is rolled

Add a

title with sticky class name to your HTML:

Then in the Body selector, remove the Flex Settings and set the page height to say 3x, 300vh.

Add the. Sticky selector and set position to sticky and top to 0, i.e. trigger when sticky

is close to the top of the page. Set height to 100vh, display to flex, context-content and align-items to Center:

In the part of JavaScript, join the document. The addEventListener () to monitor the page scroll scroll event, and then create a variable, To the document. The documentElement. ScrollTop divided by scrollHeight minus clientHeight, it is up in the scrolled page scrolling is 1, scroll to be 0:

And then how do I update background-position-x when I scroll? Add const h1, assign it to document.querySelector(‘h1’) and get the h1 back. Use h1.style.setProperty() to set -percentage. This is our custom CSS variable name. The value is ${scrolled * 100}% :

In the CSS, add the root selector, initialize -percentage to 0%, and background-position-x to calc(100%-var (–percentage)). Remove transition and H1 :hover:

Let’s look at the completion of this case

Above, is this set to introduce all content.

Please pay attention to CodingStartup at least:

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