Slide Through Unlimited Dimensions With CSS Scroll Timelines

The original design philosophy of CSS, whose creators had imagined that it would become the main technology for web behavior control, and scripting languages ​​are only an alternative when CSS cannot implement functions declaratively. This methodology of priority use of CSS is based on the concept that "scripts are programming, but programming is difficult". Since the introduction of the ：hover pseudo-class, CSS has been standardizing patterns created by developers in JavaScript and "included" them into the CSS standard. From this perspective, JavaScript is almost like a "workaround", and CSS is the official approach.

Therefore, using CSS to implement script-like behavior makes us feel less "awkish", and it is no surprise that features like the new scroll-timeline feature appear. Many developers implement clever parallax scrolling websites, which prevents us from putting this CSS feature "sprite" back into the bottle. If you don't want the stuttering main thread animation in the next parallax scrolling site, you must now turn to the "dark side" of CSS hackers. (Just kidding), if you prefer imperative programming, there is also a new JavaScript API for scrolling association animations.

Migrate JavaScript examples to CSS

Modify the parallax scroll animation example before Chris Coyier, replace the CSS used by Chris to control the animation with a line of scroll-timeline CSS code, and completely remove the JavaScript code, which is satisfactorily simple.

Using the

body, .progress, .cube {
  animation-timeline: scroll();
}

function without parameters will set an "anonymous scrolling progress timeline", which means that if our writing mode is in English, the browser will animate based on the recent ancestor elements that can scroll vertically. Unfortunately, it would be very useful to have only a choice to animate based on scrolling on the x-axis or y-axis of a particular element, not both. As a function we can pass parameters to

which gives better control over how we want the scroll to run the animation. scroll() scroll()Multi-dimensional experiment

Better is the

attribute. Applying it to a container element means we can animate the attributes on any selected ancestor element based on any scrollable element with the same assigned scope. This got me thinking... Since CSS Houdini allows us to register animation-friendly, inheritable properties in CSS, we can combine animations on the same element based on multiple scrollable areas on the page. This opens the door to interesting teaching design possibilities, such as my experiment below.

Scrolling the horizontal narrative on the light green card will rotate the 3D NES console horizontally, and scrolling the vertical narrative on the dark green card will rotate the NES console vertically. In my previous post, I mentioned that my past CSS tricks always boil down to the possibility of hiding and showing limited possibilities with CSS. What I'm interested in this roll-based experiment is the combination explosion of vertical and horizontal rotations of combinations. Animated timelines provide pure CSS interactivity that was impossible in the past.

Implementation details are not as important as timeline-scope's use and custom properties. We register two custom angle properties:

body, .progress, .cube {
  animation-timeline: scroll();
}

Then we "borrow" NES 3D models from the examples in Julian Garner's amazing CSS 3D modeling application. We update the .scene class to make 3D rotation based on our new variables as follows:

@property --my-y-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

@property --my-x-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: -35deg;
}</angle></angle>

Next, we provide a body element with two custom named scopes. scroll-scope

.scene {
  transform: rotateY(var(--my-y-angle)) rotateX(var(--my-x-angle));
}

I don't see any official documentation on passing in multiple scopes, but it does work in Google Chrome and Edge. If it's not a formally supported feature, I hope it will be part of the standard as it's very convenient.

Next, we define the named timeline for the two scrollable cards and the axis we want to trigger the animation.

body {
  scroll-scope: --myScroller,--myScroller2; 
}

and add the animation to the scene:

.card:first-child {
  scroll-timeline-axis: x;
  scroll-timeline-name: --myScroller;
}

.card:nth-child(2) {
  scroll-timeline-axis: y;
  scroll-timeline-name: --myScroller2;
}

Since the 3D model inherits the x and y angles of the document body, the scrolling card now rotates the model in a combination of vertical and horizontal angle changes.

User control animation beyond scrollbar

Think about it carefully, this behavior is not only useful for scroll-driven animations. In the above experiment, we use the scrollable area more as a slider to control the properties of the 3D model. After finishing my work, I went out for a walk and fantasized how cool it would be if the actual range input could control the animation timeline. Then I found that they can! At least in Chrome. Pure CSS CMS?

While we requisitioned the 3D model from Julian Garner, let's see if we can use range input to control his X-wing model.

Incredible that we can do this by simply using CSS, and we can do it with any number of properties. For me, that's not enough. I would like to see other input controls that can manipulate the animation timeline. Imagine that the text field pushes the animation as you fill it in, or that the button can play or reverse the animation. The latter can be implemented to some extent by combining the

pseudo-class with the :active attributes. But in my experience, the browser may be confused when you try to use it to animate multiple custom properties. In contrast, the animation timeline was designed with this use case in mind, so it ran smoothly and exactly what I expected. animation-play-state

I'm not the only one who noticed the potential of this emerging CSS feature. Someone has implemented this clever Doom clone by combining scroll-timeline and checkbox tricks. My problem is that it is still not enough. We have enough resources in Chrome to implement the avatar builder using scrollbars and range inputs as game controls. I am happy to try an unpredictable, complex experience that was unprecedented in the era before the appearance of the scroll-timeline features. After all, if you have to explain the definition of video games to aliens, wouldn't you say it's just a super interactive animation?

The above is the detailed content of Slide Through Unlimited Dimensions With CSS Scroll Timelines. For more information, please follow other related articles on the PHP Chinese website!