After a long delay, Apple’s spring press conference finally met us. Whether it was the iPad Pro loaded with M1 or the iMac successfully slimmed down into a super-sized iPad, it was both expected and surprising. But for a front-end enthusiast, the first time you visit the website after the event is not to buy, but to see what apple’s designers have come up with to make the page look amazing.

I have always liked @codingStartup’s tutorial, so I also looked at apple’s official website and learned some of the skills used in it. I hope I can summarize and share with you. Look forward to your encouragement, support and discussion, thanks ❤

Some giFs may stop because they hit the loop limit, but if you’re interested, click on the larger image

The article shared in the middle will not be excerpted for reasons of length, if you are interested, please read it to support the original author ~

Display animations as the page scrolls

With the scrolling of the page, the text and pictures on the page will also be changed, which can create a dynamic effect and enable users to purchase. Here is an example of text that can dynamically change its background color as it moves

First, you have a page structure with two 100vh tall Flexboxes in a 100vh*100% Container element. The first flexBox text id is PT1, and the text inside is centered horizontally and vertically.

    <div id="pt1" style="display: none;" class="module-content">
        <div class="section-content ">
            <p class="gradient-text">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi quo, tempora ipsa excepturi culpa quis possimus nisi, sed at hic assumenda.
            </p>  
        </div>    
    </div>
Copy the code
#pt1 {
    height: 100vh;
    display: flex;
    align-items: center;
}
.module-content .section-content {
    font-size: 48px;
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: -0.009 em;
    max-width: 590px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
Copy the code

Realize page scroll monitor

Before you start implementing it, you need to know how much the element has been scrolled so that you can adjust the percentage of animation that goes on. In this case, I’m listening for the entire page and then processing each element individually.

Gets the scrolling height of the element

First, use getBoundingClientRect to get the window coordinates of the element relative to the display window. Once you get the window coordinates of the element, the top attribute is the distance from the bottom to the top of the browser.

From element coordinates -javascript.info

Methods elem. GetBoundingClientRect () returns the smallest rectangle window coordinates of the rectangle elem as objects of built-in DOMRect).

Main DOMRect properties:

X/ y — The x/y coordinates of the rectangle’s origin relative to the window, width/height — The width/height of the rectangle (can be negative). In addition, there are derived attributes:

Top /bottom — Y coordinates of the top/bottom rectangle edge, left/right — X coordinates of the left/right rectangle edge.

Gets the element display height

Then, get the element height of the parent element PT1 and use clientHeight to get the height at which its actual content can be displayed. In this way, we can figure out how many percent of the elements scroll off the screen.

fromElement size and scrolling -javascript.info

Apply the calculated percentage to the CSS variable

Once you have the percentage, you can directly evaluate the element style and modify it directly, but instead of counting and modifying each attribute in turn, since all attributes change by percentage, you can use CSS variables directly to unify. It starts with — and is referenced with var(). Here, we define four variables a, B, C, and D that represent the position of each color in the gradient.

For tips on using CSS variables, see here

//pt1.js
function handlePt1Scroll(){
    const heightPt1 = pt1.clientHeight;
    let scrolledPt1 = Math.abs(pt1.getBoundingClientRect().top);
    if(scrolledPt1>heightPt1){
        return;
    }
    let scrollPercentPt1 =scrolledPt1/heightPt1;
    const textPt1 = pt1.querySelector(".gradient-text");
    textPt1.style.setProperty('--a', (-150+scrollPercentPt1*200) +The '%');
    textPt1.style.setProperty('--b', (-50+scrollPercentPt1*200) +The '%');
    textPt1.style.setProperty('--c', (75+scrollPercentPt1*200) +The '%');
    textPt1.style.setProperty('--d', (150+scrollPercentPt1*200) +The '%');
}
Copy the code

Implement text color background

Finally, let’s color the text.

  1. Using background – image: linear-gradient(to right, var(–mid) var(–a), var(–start) var(–b), var(–mid) var(–c), var(–end) var(–d)); Create a dynamic background with four CSS variables a, B, C and D in the middle so that it can be changed as you scroll.

  2. Use – its background – clip: text; background-clip: text; Create a mask with text to pass through the background content. Similarly, changing the background to video/image /canvas can do all sorts of nice text effects.

  3. Fill-color: transparent; -webkit-text-fill-color: transparent; Change the text to transparent, and you’re done! Of course, if you change the background to a black and white gradient and move it with background-position-x, you can make the text fade in and out.

To make the text effect reusable (for example, the Apple homepage has the same effect in several places, but with a different background color), you can put the gradient effect in a common class, and then specify the percentage and color as CSS variables for each element. Font-family: “Helvetica”, Helvetica, Sans-serif

The application of sticky

Since the effect of a page is based on scrolling, how do you keep elements that need to be permanently displayed, such as titles, from being rolled up when you adjust the display of elements according to the scrolling distance? In this case, use sticky + top to make the element stop at a certain height until the next element takes it to the top.

For example, the left side of the page is the normal scrolling text description list, while the right side of the computer needs to stop and change the display as the scrolling distance, so it can be designed like this:

Complete the structure of the text description

Used to set<p>The height gives it a rolling distance, which is usually designed to be100vhSo that each part can have more scrolling distance for the animation transition. I used the vertical center hereflexAnd then use plus the left-hand sidepaddingYou have a text area with full scroll height and left.

Let the text fade in near the middle of the window and fade out away

Again, use variable attributes, use element selectors to get each element, and then compute the percentages in turn. Use the will – change: opacity; To allow the browser to optimize.

#pt2 .pt2-list p{
    --opac:0;
    opacity: var(--opac);
    height:50vh;
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items: flex-start;
    padding-left: 100px;
    font-size: 28px;
    line-height: 1.14286;
    font-weight: 600;
    letter-spacing:.007em;
    will-change:opacity;
    font-family: "SF Pro Display"."SF Pro Icons"."Helvetica Neue"."Helvetica"."Arial",sans-serif;
}
Copy the code

Implement the contents of the display

Use sticky to stay on top. Top uses the CSS computing property CALc to center the display vertically. If the element itself has height, it does not leave the document flow, which means it pushes the text down. So you need to set the height to 0, and then add a container inside that is out of the document flow.

Because the image material is so wide, you can also set the width of the container, and overflow is set to Hidden to pull the display to the side and show only half of the effect. The display content is toggled using absolute positioning +CSS variables.

#pt2 .pt2-preview{
    position:sticky;
    top: calc(50vh - 250px);
}
#pt2 .pt2-preview img{
    width:633px;
    height:574px;
    position: absolute;
    top:0px;
    right: -150px;
}
.pt2-preview-container{
    width:485px;
    height:574px;
    position: absolute;
    top:0px;
    overflow-x:hidden ;
    right: 0px;
}
.pt2-preview-content{
position: absolute;
right: -135px;
top:17px;
width:602px;
height:365px;
background-color: red;
}
Copy the code

We’re done, but… The scrolling distance of text on apple’s official website is not as large (for example, 50vh in my case), and the moving distance of text does not vary depending on the size of the text (block height), which means you need to change your thinking. Apple official website effect:

Transformers – Transform: Matrix

In fact, it can be found from the analysis that the scrolling height of this part is not supported by the size of the text < P >, but by position:absolute container with a height of 100vh. The text is vertically centered, that is to say, the three words are overlapping, and the effect of fading in and out is realized by switching the transparency.



Fade-in and fade-out is easy, and it was done before, but what about scrolling up and down text? The answer is to dynamically switch up and down using transform. The following three articles have helped me in my study, and I would like to share them with you

I don’t want to write a line substitution. Why don’t I use absolute? What is the principle of hardware acceleration for performance optimization? Please refer here

It can be said that many effects in the middle are realized by deformation. For example, in the following video area, sticky is used to make the video top with scrolling, and then adjust the size according to the scrolling distance, so that iMac is zoomed from the outside of the screen to the middle.

Folding le

Just as exploding fireworks can be a pleasant surprise, stacking pieces of material together and then suddenly unfolding can be an amazing experience. Whether it is the introduction of product parts or the change of display content, by stacking materials and showing them separately, not only can the hierarchy be clear, but also can achieve more special animation effect.

To learn more about cascading context in CSS, see here

The following text effect is an example from today’s Apple Earth Day promotion page



It is actually a superposition of two words, the bottom of which is not processed as the base, and then the top of the added filter (blur) to achieve the effect of text drop shadow. The lines in the blur effect are more obvious when the child element is magnified 10x with translateX and then scaled back to 0.1 with a blur filter. In the comparison below, the left side is the effect of directly applying the filter, and the right side is the effect of stretching the X-axis 10 times before applying the filter.

// Shadow's parent elementposition: absolute;
    filter: blur(0.5 rem); // Add a blur filtertransform: translateY(-0.1 em) scaleX(0.1); // Zoom in ________________ // Shadow the text itselftransform: scaleX(10); / / to enlargedisplay: inline-block;
    opacity: 0.8;
Copy the code

Overlay + matrix transformation can be seen everywhere on the web. For example, the following image “sprayout” with scrolling iPad components is actually achieved by overlay + vertical transformation. Although this is a direct trigger of the entire animation, since the core of the script changes the style, how to implement is up to you.

gossip

One of the things that really struck me when I was browsing the web was the responsiveness of the page, taking into account many usage scenarios and changing the layout of the page depending on the operation. However, it can not be restored after switching, it is estimated that the main implementation of the script element class conversion, media query is only responsible for modifying the size of the element bar.

In fact, I would like to write how to enlarge the text -> switch from text to video/image background, but Steven has already written a post, which is very highly preferred -> here

In the same way, the middle iMac color switch is also described here

The same technology, with the picture of apple will be particularly high, for their own material is a long story, sure enough, a person, not only to see, but also to see (omitted)

This article just introduced the principle and some simple implementation, mainly or summary, if there are some other knowledge points worth saying please dig friends guidance, learning has been on the road, thank you very much!