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

Articles Tagged
scrolling

26 Articles
{
,

}
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?

Direct Link

Some baby bear thinking from Adam Silver.…

Avatar of Chris Coyier
Shared by 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
Direct link to the article Doom Damage Flash on Scroll
scrolling

Doom Damage Flash on Scroll

The video game Doom famously would flash the screen red when you were hit. Chris Johnson not only took that idea, but incorporated a bunch of the UI from Doom into this tounge-in-cheek JavaScript library called Doom Scroller. Get …

Avatar of Chris Coyier
Chris Coyier on Aug 25, 2020
Direct link to the article That’s Just How I Scroll
scrollbars scrolling ux

That’s Just How I Scroll

How do you know a page (or any element on that page) scrolls? Well, if it has a scrollbar, that’s a pretty good indication. You might still have to scrapple with your client about “the fold” or whatever, but I …

Avatar of Chris Coyier
Chris Coyier on Aug 14, 2020
Direct link to the article Memorize Scroll Position Across Page Loads
scrolling

Memorize Scroll Position Across Page Loads

Hakim El Hattab tweeted a really nice little UX enhancement for a static site that includes a scrollable sidebar of navigation. …

Avatar of Chris Coyier
Chris Coyier on Jul 9, 2020
Direct link to the article How I Put the Scroll Percentage in the Browser Title Bar
scrolling

How I Put the Scroll Percentage in the Browser Title Bar

Direct Link

Some nice trickery from Knut Melvær.

Ultimately the trick boils down to figuring out how far you’ve scrolled on the page and changing the title to show it, like:

document.title = `${percent}% ${post.title}`

Knut’s trick assumes React and installing an …

Avatar of Chris Coyier
Shared by Chris Coyier on May 12, 2020
Direct link to the article Indicating Scroll Position on a Page With CSS
scrolling sticky

Indicating Scroll Position on a Page With CSS

Scrolling is something we all know and do on the web to the extent that it’s an expectation or perhaps even a habit, like brushing our teeth. That’s probably why we don’t put too much thought into designing the scrolling …

Avatar of Preethi
Preethi on Mar 24, 2020
Direct link to the article Moving Rainbow Underlines
custom properties rainbow scrolling

Moving Rainbow Underlines

I absolutely love the design of the Sandwich site. Among many beautiful features are these headlines with rainbow underlines that move as you scroll. It’s not scroll-jacking — it’s just a minor design feature that uses scroll position to …

Avatar of Chris Coyier
Chris Coyier on Dec 23, 2019
Direct link to the article Need to scroll to the top of the page?
accessibility scrolling

Need to scroll to the top of the page?

Perhaps the easiest way to offer that to the user is a link that targets an ID on the <html></html> element. So like…

<html id="top">
  <body>
     <!-- the entire document -->
     <a href="#top">Jump to top of page</a>
  </body>
</html>

But …

Avatar of Chris Coyier
Chris Coyier on Sep 2, 2019
Direct link to the article Scroll-Linked Animations
animation scrolling

Scroll-Linked Animations

Direct Link

You scroll down to a certain point, now you want to style things in a certain way. A header becomes fixed. An animation triggers. A table of contents appears. To do anything based on scroll position, JavaScript is required right …

Avatar of Chris Coyier
Shared by Chris Coyier on Mar 29, 2019
  • 1
  • 2
  • 3
  • Older
Our Learning Partner
Frontend Masters logo
Frontend Masters

Need front-end development training?

Frontend Masters is the best place to get it. They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, and beyond with Node.js and Full Stack.

CSS-Tricks is created by Chris and a team of swell people.

Keep up to date on web dev

with our hand-crafted weekly newsletter

Tech
  • WordPress (CMS)
  • Jetpack (Search, Backup)
  • WooCommerce (eCommerce)
  • Local (Development)
Hosting
  • Flywheel
Family
  • CodePen
  • ShopTalk Show
Minisites
  • The Power of Serverless
  • Upcoming Conferences
  • Coding Fonts
Contact
  • Email
  • Sponsorship Info
  • Guest Writing
Buy
  • Posters & Swag
  • Membership
Follow
  • Twitter
  • Instagram
  • YouTube
  • CodePen
  • GitHub
  • iTunes
  • RSS
Back to Top