Tags: parallax



Wednesday, March 7th, 2018

Parallax scrolling with CSS variables | basicScroll

Don’t let the title fool you—this isn’t just for parallax scrolling (thank goodness!)—it’s for triggering any CSS updates based on scroll position. Using CSS custom properties makes a lot of sense. The JavaScript/CSS bridge enabled by custom properties is kind of their superpower. (That’s one of the reasons why I don’t like calling them “CSS variables” which makes them sound like Sass variables—they’re so much more than that!)

Thursday, March 1st, 2018

Your Interactive Makes Me Sick - Features - Source: An OpenNews project

Browsers have had consistent scrolling behavior for years, even across vendors and platforms. There’s an established set of physics, and if you muck with the physics, you can assume you’re making some people sick.

Guidelines to consider before adding swooshy parallax effects:

  1. Respect the Physics
  2. Remember that We Call Them “Readers”
  3. Ask for Consent

Given all the work that goes into a powerful piece of journalism—research, interviews, writing, fact-checking, editing, design, coding, testing—is it really in our best interests to end up with a finished product that some people literally can’t bear to scroll through?

Wednesday, August 6th, 2014

Pure CSS parallax scrolling websites | Keith Clark

This is clever: a way to achieve parallax scrolling without JavaScript—much more performant.

Of course, you might want to ask yourself why you want a parallax effect in the first place.

Wednesday, February 1st, 2012

GREY GOOSE® Vodka | The World’s Best Tasting Vodka

This beautiful site not only features the oh-so-trendy vertical parallax, but it’s responsive too. Impressive!