Scroll Effects

Parallax, progress, pinning and reveal effects in a virtual scrolling page; the pointer drives the scroll position and progress is read out live.

Tech: 虚拟滚动, scroll 进度, parallax, Canvas 2D

• Parallax Layers — The mountains in the middle of reality seem to be moving slowly and the trees in the vicinity move fast.
• Reading Progress — Progress = Scroll distance ÷ Rollable total distance.
• Pinned Sections — The title of the chapter is normally scrolled along with the contents, and once it touches the top of the view, it remains " sticky" at the top; it is not pushed away from the next chapter until all the contents of the chapter have been rolled out.
• Fade-in Reveal — The card is transparent and biased when it's not in sight; when it's in sight from the bottom, progress e from 0 to 1, transparency becomes 1, Bit
• Scale In — The closer the cards are to the centre, the greater the light, and when they leave the centre, they become darker.
• Horizontal Gallery — When the page scrolls vertically, converts the scroll progress to a horizontal orbit (translateX), and the card moves from right to left over the screen.
• Stacked Cards — Each card is position: sticky Sovereignty, nailed a bit lower (top = base + i) · Shige
• Text Wipe — Each line of Contrary Text is painted in dark colour, followed by a linear gradient from left to right (light) Colour → Transparent) coverage.
• Scroll Path Drawing — A snake-shaped SVG path runs through the entire page.
• Count Up — Statistics, which enter the view, are rolled from 0 to target values, often in the "data flash" area of the official network.
• Background Shift — The page is divided into paragraphs, each of which specifies a background colour.
• Split-screen Wipe — The screen is split in half, and the contents are moving in the opposite direction -- one side. Let' Acknowledging, One side down (or one side left), To the right side ACP 2011/12 3/
• Scroll Snap — Sets the rolling container scroll-snap-type: y mandatory, each paragraph sets the scroll-sn
• TOC Highlight — A directory next to a long document automatically highlights the current chapter as you read it.
• Cover Reveal — The page starts with a big cover.
• Scroll Timeline — A vertical line runs through the page and each event is a node and a card on the line.
• Lazy Image Reveal — The pictures on the page show the grey spaces first, and only when they are close to the viewer (less than "loading") do they actually start downloading, and when they are finished, they fade from the
• Staggered Grid — It's not like it's all together, but it's one place after another.
• Back-to-top Bubble — When the page scrolls more than a certain distance, a circle button emerges at the lower right corner, and the progress loop in the outer circle of the button shows how much.
• Scrollytelling — On one side is a static illustration (sticky) and on the other side is a paragraph text.