Skip to content

Commit 5160425

Browse files
committed
Tweak scroll customization use cases
Moved scroll response effects out.
1 parent 7e5fc2f commit 5160425

File tree

1 file changed

+1
-20
lines changed

1 file changed

+1
-20
lines changed

scroll-customization-api/UseCases.md

+1-20
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11

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.
23

34
Hidey bars
45
----
@@ -8,15 +9,6 @@ Hidey bars
89
- When a scroll operation ends (eg. fingers lifted from touchpad), may animate to either fully shown or fully hidden
910
- Advanced: content may “hide” into a smaller version of itself, that is sticky positioned (e.g. iPhone Safari URL bar)
1011

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-
2012
Rubber banding
2113
----
2214
- 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.
4638
input: the scroll value, the limit of the rubber band
4739
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
4840

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-
6041
Custom scrollers
6142
-----
6243
- Rather than just translate the content on scroll, do something flashier like a 3D transform

0 commit comments

Comments
 (0)