Every year when a new Apple product is released, its official website will update the corresponding single-page scrolling product introduction page. The animation effects are very interesting, and this year's iPhone 14 Pro introduction page is no exception.
Recently, a friend just happened to ask that he was particularly interested in the special effects of a paragraph of text on the official website. The application is simple but he doesn’t know where to start. Let’s take a look:
The entire animation is roughly that, as the page scrolls down, the entire text appears from scratch, then undergoes a round of gradient color changes, and finally disappears gradually.
In this article, we will introduce 2 ways to use CSS to achieve this effect.
Use background-clip to achieve
The first way is to borrow background-clip.
background-clip:background-clip sets whether the element's background (background image or color) extends below the border, padding box, or content box.
Instead, background-clip: text the background can be clipped into the foreground color of the text. Using this attribute means that the text in the block is used as the cropping area to crop outward, the background of the text is the background of the block, and the area outside the text will be cropped.
Take a look at the simplest Demo, without using background-clip:text :
<div>Clip</div>
<style>
div {
font-size: 180px;
font-weight: bold;
color: deeppink;
background: url($img) no-repeat center center;
background-size: cover;
}
</style>
The effect is as follows:
use background-clip:text
Let's slightly modify the above code and add background-clip:text:
div {
font-size: 180px;
font-weight: bold;
color: deeppink;
background: url($img) no-repeat center center;
background-size: cover;
background-clip: text;
}
The effect is as follows:
Seeing this, some people may wonder, what the hell, isn't this just setting color attributes for text.
make text transparent color: transparent
Don't worry! Of course, there is something more interesting. Because the text is set in color, the background of the div block is blocked. What if the text is set to be transparent? Text can be set to be transparent color: transparent .
div {
color: transparent;
background-clip: text;
}
The effect is as follows:
CodePen Demo - background-clip: text
By setting the text to be transparent, the background of the original div appears, and the area other than the text is all cropped, which is the background-clip: text function of the div.
Therefore, for the above effect, we only need to implement a gradient background from transparent to gradient color to transparent , and move the background with the scrolling of the mouse background-position !
With the above foreshadowing, we can easily realize the above-mentioned text effect of Apple's official website. (If you don't consider scrolling first)
Take a look at the code:
<div class="g-wrap">
<p>灵动的 iPhone 新玩法，迎面而来。重大的安全新功能，为拯救生命而设计。创新的 4800 万像素主摄，让细节纤毫毕现。更有 iPhone 芯片中的速度之王，为一切提供强大原动力。
</p>
</div>
.g-wrap {
background: #000;
p {
width: 800px;
color: transparent;
background: linear-gradient(-4deg, transparent, transparent 25%, #ffb6ff, #b344ff,transparent 75%, transparent);
background-clip: text;
background-size: 100% 400%;
background-position: center 0;
animation: textScroll 6s infinite linear alternate;
}
}
@keyframes textScroll {
100% {
background-position: center 100%;
}
}
Our core here is to use linear-gradient(-4deg, transparent, transparent 25%, #ffb6ff, #b344ff,transparent 75%, transparent) this gradient background to realize a gradient background from transparent to gradient color to transparent , which matches background-clip: text.
Using animation to control the background background-position, such a text animation that fades in and out of text is realized:
CodePen Demo -- iPhone 14 Pro Text Animation | background-clip: text
Implemented using mix-blend-mode
The above method is very good, and here is another mix-blend-mode way to use the mixed mode.
Suppose, we first implement such a structure of white characters on a black background:
<div class="text">灵动的 iPhone 新玩法，迎面而来。重大的安全新功能，为拯救生命而设计。创新的 4800 万像素主摄，让细节纤毫毕现。更有 iPhone 芯片中的速度之王，为一切提供强大原动力。
</div>
.text {
color: #fff;
background: #000;
}
Also implement such a gradient background, from black to gradient (#ffb6ff to #b344ff) to black gradient :
<div class="g-wrap">
<div class="text">灵动的 iPhone 新玩法，迎面而来。重大的安全新功能，为拯救生命而设计。创新的 4800 万像素主摄，让细节纤毫毕现。更有 iPhone 芯片中的速度之王，为一切提供强大原动力。
<div class="bg"></div>
</div>
</div>
.text {
position: relative;
color: #fff;
background: #000;
}
.bg {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 400%;
background: linear-gradient(-3deg, #000, #000 25%, #ffb6ff 30%, #ffb6ff, #b344ff, #b344ff 70%, #000 75%, #000);
}
.bg It looks like this, relative to .text it, its height is 4 times:
What will happen when these two graphics are superimposed? There shouldn't be much chemistry :
Let's .bg add an animation that moves up and down, and let's see the effect:
There seems to be nothing? Text is also blocked. but! If we use the upper blending mode here, the effect will be completely different. Here, we will use it mix-blend-mode: darken.
.bg {
//...
mix-blend-mode: darken
}
Look at the effect again:
Wow, with different blending modes, we can achieve different color overlay effects. The effect here mix-blend-mode: darken is that only the white text part will show .bg the color of the upper layer, while the superimposed color of the black background part and the upper background is still black, which is background-clip: text similar to the above.
With simple help overflow: hidden, the background movement outside the element is cut out .text , and the entire animation is realized.
The complete code is as follows:
<div class="g-wrap">
<div class="text">灵动的 iPhone 新玩法，迎面而来。重大的安全新功能，为拯救生命而设计。创新的 4800 万像素主摄，让细节纤毫毕现。更有 iPhone 芯片中的速度之王，为一切提供强大原动力。
<div class="bg"></div>
</div>
</div>
.g-wrap {
width: 100vw;
height: 100vh;
background: #000;
.text {
position: relative;
color: transparent;
color: #fff;
background: #000;
overflow: hidden;
}
.bg {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 400%;
background: linear-gradient(-3deg, #000, #000 25%, #ffb6ff 30%, #ffb6ff, #b344ff, #b344ff 70%, #000 75%, #000);
mix-blend-mode: darken;
animation: textScroll 6s infinite linear alternate;
}
}
@keyframes textScroll {
100% {
transform: translate(0, -75%);
}
}
In this way, with the help of the blending mode, we also realized the text effects of the title:
CodePen Demo -- iPhone 14 Pro Text Animation | mix-blend-mode
Animation combined with scrolling
Of course, the realization of the original animation is realized in combination with the scrolling of the page.
Before, I introduced the latest features of CSS @scroll-timeline, such as these two articles:
- Revolutionary innovation, animation killer @scroll-timeline
- Super cool transition animation? CSS easy take!
@scroll-timeline Ability to set the start and end of an animation to be determined by the scroll progress within the scroll container, rather than by time.
Meaning, we can define an animation effect whose start and end can be controlled by scrolling the container.
but! Sadly, this nice feature has recently been deprecated by the specification and is no longer recommended :
Here, if we use the traditional method, we must use JavaScript. The part of JavaScript combined with scrolling is not the focus of this article. For page scrolling combined with animation timeline, we usually use GSAP.
We can easily get the complete code combined with page scrolling by combining the above mixed mode methods:
<div class="g-wrap">
<div class="text">灵动的 iPhone 新玩法，迎面而来。重大的安全新功能，为拯救生命而设计。创新的 4800 万像素主摄，让细节纤毫毕现。更有 iPhone 芯片中的速度之王，为一切提供强大原动力。
<div class="bg"></div>
</div>
</div>
<div class="g-scroll"></div>
.g-wrap {
position: fixed;
top: 0;
left: 0;
display: flex;
width: 100vw;
height: 100vh;
background: #000;
.text {
position: relative;
width: 800px;
color: #fff;
background: #000;
overflow: hidden;
}
.bg {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 400%;
background: linear-gradient(-3deg, #000, #000 25%, #ffb6ff, #b344ff, #000 75%, #000);
mix-blend-mode: darken;
}
}
.g-scroll {
position: relative;
width: 100vw;
height: 400vw;
}
gsap.timeline({
scrollTrigger: {
trigger: ".g-scroll",
start: "top top",
end: "bottom bottom",
scrub: 1
}
}).fromTo(".bg", { y: 0 }, { y: "-75%" }, 0);
As you can see, the only difference is that gsap.timeline the animation is triggered by combining the scrolling container.
The effect is as follows: