14 ms·

A grouped pure CSS parallax demo

129 points by huntermeyer 12y ago

0x0 12y ago
Unfortunately, on iOS the scrolling feels very fake with no native easing. Does it have some sort of javascript hijacking scroll/swipe events?
- 13 12y ago
  There's no JavaScript on that page outside of Google Analytics. You're right though, it feels pretty terrible without the native scrolling momentum.
- sjs382 12y ago
  Worked really well for me on Android. Native easing worked as I would expect.
- deleted 12y ago
  [deleted]
- mariusc23 12y ago
  Try adding -webkit-overflow-scrolling: touch; to enable elastic/momentum scrolling on the .parallax div. EDIT: Nevermind, just tried it in the simulator and it seems to break everything. Although it is smooth... :)
- TD-Linux 12y ago
  Works OK on Firefox OS. The base layer scrolls perfectly, but the other ones update at a lower framerate. Desktop Firefox has the same behavior when APZ is enabled.
Senkwich 12y ago
Using this while developing my website. It works pretty well, although seems to have issues on various browsers (like Safari) where there is no scrolling. The main issue I had was that smooth scrolling libraries (for jumping to various places on the same page) didn't work until I referenced the element to scroll as a specific div (that contained all of my parallax) instead of "body" or "html, body" like suggested online. Overall, I like the flexibility and the ability to inspect the layers using simple translations and rotations.
- tambourine_man 12y ago
  Works fine in Safari here.
Kronopath 12y ago
The associated article gives a good description of how this effect is achieved: http://keithclark.co.uk/articles/pure-css-parallax-websites/ http://keithclark.co.uk/articles/pure-css-parallax-websites/ I find it interesting that parallax was initially a way to fake 3d-like effects, and now we're using 3d effects to implement parallax!
nicwolff 12y ago
Both the demo and the blog post stutter badly while scrolling on this 2.5GHz i5 iMac running Safari 7.0.5.
nkozyra 12y ago
This is one recent design trend (along with the windowed images that scroll through their viewport) I wish would die in a hurry. I'm not a UX/UI guy, but it feels like terrible UX/UI.
- romanovcode 12y ago
  I think it's already dying. I see less and less parallax sites whereas two years ago every startup had their site as parallax. :)
  - ntaso 12y ago
    I tried to buy a theme from themeforest and it's extremely hard to fine one that is NOT completely polluted with CSS animations and parallax effects. I wish you were right, but just from the top-selling themes of marketplaces like themeforest, it seems that the trend is still quite big, unfortunately.
  - at-fates-hands 12y ago
    One of the reasons is probably because parallax on mobile is a horrendous experience and people have started to catch on to this. I've only seen a handful of companies who can pull it off well. This is probably one of five I feel does it well: http://www.extreme-sensio.com/ http://www.extreme-sensio.com/
    - talmand 12y ago
      That's because it is simply done. For the most part the only thing that really happens in a big way is that the background changes out based on scroll position. Any other element that animates on scroll does so in a minor and subtle way. The actual scrolling of the page is not altered in any way. I agree, this is one of the better ways to handle such things if it has to be done.
- dave5104 12y ago
  I am a UX/UI guy, and I wish it would be used properly. What a lot of parallax sites like to do is mess with the scrolling of the page. ("Scrolljacking" is a term I've thrown around for stuff like this.) Don't do that. Ever. The user should always be able to scroll normally and not have their browser screen clunking along because they're not scrolling at a speed that is optimal for the animations at hand. Here's a decently bad offender for a visual of what I'm talking about: http://www.apple.com/mac-pro/ http://www.apple.com/mac-pro/ (After the initial animation, try scrolling down--it's not as easy as scrolling should be.)
neya 12y ago
Some people here have commented that this is terrible design trend. I disagree. I would say this depends a lot on the use-case :) [shameless plug] I've used (almost) the same effect for my landing page for my upcoming film: http://salesmanfilm.com/ http://salesmanfilm.com/ (P.S: Scrolling might be choppy on Retina MBPs/slower configs)
- fullofcrap 12y ago
  You've created a nice showpiece. However, it's still a horrible design trend, and it's probably the work user experience element I've seen used in recent years. This is the equivalent of the animated gifs of the 90's. Under construction and dancing baby being the most common. Adding distraction rather than focusing on content has never been a successful strategy, and I hope it never does. It will course correct eventually. I'm hoping sooner.
- correcthorse 12y ago
  I didn't notice the effect until I scrolled back up and saw a jerky movement in the buildings. Then tried scrolling back down and up not getting it to work until I noticed it moved with the mouse movement not the scrolling. I would consider redesigning it.
  - neya 12y ago
    Thanks, that's a very valid point!
Aardwolf 12y ago
It took me a while to figure out you could scroll down. Many of those fancy scroll effect websites have that problem. If there is text or something else chopped off at the bottom, then it's obvious you can scroll. But this kind of page looks like it's everything there is, and only if you discover that you can scroll down anyway, you will do so.
mihaukw 12y ago
It crashed chromium on ubuntu 14.04.1...
vitamen 12y ago
No mention of the debug checkbox? That's one of the coolest parts of this to me.

129 points by huntermeyer 12y ago

0x0 12y ago

Unfortunately, on iOS the scrolling feels very fake with no native easing. Does it have some sort of javascript hijacking scroll/swipe events?

13 12y ago
There's no JavaScript on that page outside of Google Analytics. You're right though, it feels pretty terrible without the native scrolling momentum.
sjs382 12y ago
Worked really well for me on Android. Native easing worked as I would expect.
deleted 12y ago
[deleted]
mariusc23 12y ago
Try adding -webkit-overflow-scrolling: touch; to enable elastic/momentum scrolling on the .parallax div. EDIT: Nevermind, just tried it in the simulator and it seems to break everything. Although it is smooth... :)
TD-Linux 12y ago
Works OK on Firefox OS. The base layer scrolls perfectly, but the other ones update at a lower framerate. Desktop Firefox has the same behavior when APZ is enabled.

Senkwich 12y ago

Using this while developing my website. It works pretty well, although seems to have issues on various browsers (like Safari) where there is no scrolling. The main issue I had was that smooth scrolling libraries (for jumping to various places on the same page) didn't work until I referenced the element to scroll as a specific div (that contained all of my parallax) instead of "body" or "html, body" like suggested online. Overall, I like the flexibility and the ability to inspect the layers using simple translations and rotations.

tambourine_man 12y ago
Works fine in Safari here.

Kronopath 12y ago

The associated article gives a good description of how this effect is achieved: http://keithclark.co.uk/articles/pure-css-parallax-websites/ http://keithclark.co.uk/articles/pure-css-parallax-websites/ I find it interesting that parallax was initially a way to fake 3d-like effects, and now we're using 3d effects to implement parallax!

nicwolff 12y ago

Both the demo and the blog post stutter badly while scrolling on this 2.5GHz i5 iMac running Safari 7.0.5.

nkozyra 12y ago

This is one recent design trend (along with the windowed images that scroll through their viewport) I wish would die in a hurry. I'm not a UX/UI guy, but it feels like terrible UX/UI.

romanovcode 12y ago
I think it's already dying. I see less and less parallax sites whereas two years ago every startup had their site as parallax. :)
- ntaso 12y ago
  I tried to buy a theme from themeforest and it's extremely hard to fine one that is NOT completely polluted with CSS animations and parallax effects. I wish you were right, but just from the top-selling themes of marketplaces like themeforest, it seems that the trend is still quite big, unfortunately.
- at-fates-hands 12y ago
  One of the reasons is probably because parallax on mobile is a horrendous experience and people have started to catch on to this. I've only seen a handful of companies who can pull it off well. This is probably one of five I feel does it well: http://www.extreme-sensio.com/ http://www.extreme-sensio.com/
  - talmand 12y ago
    That's because it is simply done. For the most part the only thing that really happens in a big way is that the background changes out based on scroll position. Any other element that animates on scroll does so in a minor and subtle way. The actual scrolling of the page is not altered in any way. I agree, this is one of the better ways to handle such things if it has to be done.
dave5104 12y ago
I am a UX/UI guy, and I wish it would be used properly. What a lot of parallax sites like to do is mess with the scrolling of the page. ("Scrolljacking" is a term I've thrown around for stuff like this.) Don't do that. Ever. The user should always be able to scroll normally and not have their browser screen clunking along because they're not scrolling at a speed that is optimal for the animations at hand. Here's a decently bad offender for a visual of what I'm talking about: http://www.apple.com/mac-pro/ http://www.apple.com/mac-pro/ (After the initial animation, try scrolling down--it's not as easy as scrolling should be.)

neya 12y ago

Some people here have commented that this is terrible design trend. I disagree. I would say this depends a lot on the use-case :) [shameless plug] I've used (almost) the same effect for my landing page for my upcoming film: http://salesmanfilm.com/ http://salesmanfilm.com/ (P.S: Scrolling might be choppy on Retina MBPs/slower configs)

fullofcrap 12y ago
You've created a nice showpiece. However, it's still a horrible design trend, and it's probably the work user experience element I've seen used in recent years. This is the equivalent of the animated gifs of the 90's. Under construction and dancing baby being the most common. Adding distraction rather than focusing on content has never been a successful strategy, and I hope it never does. It will course correct eventually. I'm hoping sooner.
correcthorse 12y ago
I didn't notice the effect until I scrolled back up and saw a jerky movement in the buildings. Then tried scrolling back down and up not getting it to work until I noticed it moved with the mouse movement not the scrolling. I would consider redesigning it.
- neya 12y ago
  Thanks, that's a very valid point!

Aardwolf 12y ago

It took me a while to figure out you could scroll down. Many of those fancy scroll effect websites have that problem. If there is text or something else chopped off at the bottom, then it's obvious you can scroll. But this kind of page looks like it's everything there is, and only if you discover that you can scroll down anyway, you will do so.

mihaukw 12y ago

It crashed chromium on ubuntu 14.04.1...

vitamen 12y ago

No mention of the debug checkbox? That's one of the coolest parts of this to me.