Skip to main content
CSS-Tricks
  • Articles
  • Alamanac
  • Guides
  • Videos
  • Books
  • Newsletter
Search

Articles Tagged
scrolling

35 Articles
{
,

}
Direct link to the article Scroll Shadows? Pure CSS Parallax? Game Back On.
background-attachment cross-browser safari scrolling

Scroll Shadows? Pure CSS Parallax? Game Back On.

Chris calls scroll shadows one his favorite CSS-Tricks of all time. Lea Verou popularized the pure CSS approach using four layered background gradients with some clever background-attachment magic. The result is a slick scrolling interaction that gives users a hint …

Avatar of Geoff Graham
Geoff Graham on Jul 29, 2022
Direct link to the article How to Make a “Raise the Curtains” Effect in CSS
mix-blend-mode scrolling sticky

How to Make a “Raise the Curtains” Effect in CSS

“Raise the curtains” is what I call an effect where the background goes from dark to light on scroll, and the content on top also goes from light to dark while in a sticky position.…

Avatar of Silvestar Bistrović
Silvestar Bistrović on Mar 2, 2022
Direct link to the article Scroll Shadows With JavaScript
scrolling shadow

Scroll Shadows With JavaScript

Scroll shadows are when you can see a little inset shadow on elements if (and only if) you can scroll in that direction. It’s just good UX. You can actually pull it off in CSS, which I think is …

Avatar of Chris Coyier
Chris Coyier on Oct 5, 2021 (Updated on Jul 28, 2022)
Direct link to the article 2021 Scroll Survey Report
scroll-snap scrolling

2021 Scroll Survey Report

Here’s a common thought and question: how do browsers prioritize what they work on? We get little glimpses of it sometimes. We’re told to “star issues” in bug trackers to signal interest. We’re told to get involved in GitHub threads …

Avatar of Chris Coyier
Chris Coyier on Sep 15, 2021
Direct link to the article The Fixed Background Attachment Hack
background-attachment fixed position scrolling

The Fixed Background Attachment Hack

What options do you have if you want the body background in a fixed position where it stays put on scroll? background-attachment: fixed in CSS, at best, does not work well in mobile browsers, and at worst is not even …

Avatar of Murtuzaali Surti
Murtuzaali Surti on Aug 27, 2021
Direct link to the article Going “Meta GSAP”: The Quest for “Perfect” Infinite Scrolling
GreenSock GSAP infinite scroll scroll-snap scrolling ScrollTrigger

Going “Meta GSAP”: The Quest for “Perfect” Infinite Scrolling

I‘m not sure how this one came about. But, it‘s a story. This article is more about grokking a concept, one that’s going to help you think about your animations in a different way. It so happens that this particular …

Avatar of Jhey Tompkins
Jhey Tompkins on Apr 14, 2021
Direct link to the article How to Create a Shrinking Header on Scroll Without JavaScript
navigation scrolling sticky

How to Create a Shrinking Header on Scroll Without JavaScript

Imagine a header of a website that is nice and thick, with plenty of padding on top and bottom of the content. As you scroll down, it shrinks up on itself, reducing some of that padding, making more screen real …

Avatar of Håvard Brynjulfsen
Håvard Brynjulfsen on Feb 16, 2021 (Updated on Jun 7, 2021)
Direct link to the article “Cancelable” Smooth Scrolling
scroll-behavior scrolling

“Cancelable” Smooth Scrolling

Here’s the situation: Your site offers a “scroll back to top” button, and you’ve implemented smooth scrolling. As the page scrolls back to the top, users see something that catches their eye and they want to stop the scrolling, so …

Avatar of Chris Coyier
Chris Coyier on Feb 1, 2021
Direct link to the article How to Use the Locomotive Scroll for all Kinds of Scrolling Effects
scrolling

How to Use the Locomotive Scroll for all Kinds of Scrolling Effects

I was recently looking for a way to perform scrolling effects on a project and I stumbled on the Locomotive Scroll library. It lets you perform a variety of scrolling effects, like parallax and triggering/controlling animations at scroll …

Avatar of King Nelson
King Nelson on Dec 16, 2020
Direct link to the article Bidirectional scrolling: what’s not to like?
horizontal scrolling scrolling

Bidirectional scrolling: what’s not to like?

Some baby bear thinking from Adam Silver.…

Avatar of Chris Coyier
Chris Coyier on Nov 6, 2020
Direct link to the article How to Make an Unobtrusive Scroll-to-Top Button
buttons scroll-behavior scrolling

How to Make an Unobtrusive Scroll-to-Top Button

A button to return to the top of the page allows the user to quickly return to the top of the page without making too much effort. This can be very useful when the page has a lot of content …

Avatar of Marcel Rojas
Marcel Rojas on Oct 5, 2020
  • 1
  • 2
  • 3
  • ...
  • 4
  • Older

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways hosting
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Write for us!
  • Advertise with us
  • Contact us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • X
Back to Top