You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: scroll-customization-api/UseCases.md
+1-20
Original file line number
Diff line number
Diff line change
@@ -1,4 +1,5 @@
1
1
2
+
The [https://github.com/w3c/css-houdini-drafts/blob/master/composited-scrolling-and-animation/UseCases.md](Composited Scrolling) use cases include effects that respond to and are synchronized with scroll position. Below are additional use cases which require more control over exactly how scrolling behaves.
2
3
3
4
Hidey bars
4
5
----
@@ -8,15 +9,6 @@ Hidey bars
8
9
- When a scroll operation ends (eg. fingers lifted from touchpad), may animate to either fully shown or fully hidden
9
10
- Advanced: content may “hide” into a smaller version of itself, that is sticky positioned (e.g. iPhone Safari URL bar)
10
11
11
-
Scroll header
12
-
----
13
-
- A header at the top of the document
14
-
- When approaching scrollTop=0 header smoothly animates into a more substantial one. Eg. images, opacity, text size animate with scroll position.
15
-
- May also only be shown when scrolling down (like hidey bars)
16
-
- Examples:
17
-
- The top bar on [Twitter user pages](https://twitter.com/LEGO_Group)
18
-
- Polymer's [core-scroll-header-panel](http://polymer.github.io/core-scroll-header-panel/components/core-scroll-header-panel/demos/demo9.html) and [paper-scroll-header-panel](https://elements.polymer-project.org/elements/paper-scroll-header-panel?view=demo:demo/index.html)
19
-
20
12
Rubber banding
21
13
----
22
14
- scroll is normal until it hits limits (input scroll amount -> output scroll amount)
@@ -46,17 +38,6 @@ This means the effect has a number of inputs and outputs.
46
38
input: the scroll value, the limit of the rubber band
47
39
output: the final scroll position, control over the refresh drawing animation, the ability to move the content by a certain amount, the ability to cancel the effect
48
40
49
-
Parallax
50
-
-----
51
-
- the position of elements on the page is related to the scroll position of their container (or maybe another container)
52
-
- not a direct link between scroll offset and position. Rather it is some factor, possibly with damping or a curve.
53
-
- postion is the most common output, but it could also be opacity or a filter effect such as blur (or really any rendering property)
54
-
55
-
Video sync
56
-
-----
57
-
- Video whose time point is determined as a function of the scroll offset.
58
-
- Must be synced perfectly with scrolling, eg. scrolling down one pixel may advance the video by one frame, and that video frame may move everything up one pixel to counter the scroll. To the user it must appear as if the content didn't move with the scroll.
59
-
60
41
Custom scrollers
61
42
-----
62
43
- Rather than just translate the content on scroll, do something flashier like a 3D transform
0 commit comments