A grouped pure CSS parallax demo

#1

Post by huntermeyer » Tue, Oct 21, 2014, 1:44 PM UTC

A grouped pure CSS parallax demo
keithclark.co.uk

Re: A grouped pure CSS parallax demo

#2

Post by 0x0 » Tue, Oct 21, 2014, 2:40 PM UTC

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

Re: A grouped pure CSS parallax demo

#3

Post by Senkwich » Tue, Oct 21, 2014, 2:48 PM UTC

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.

Re: A grouped pure CSS parallax demo

#4

Post by 13 » Tue, Oct 21, 2014, 2:49 PM UTC

0x0 wrote: post #2

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

There's no JavaScript on that page outside of Google Analytics. You're right though, it feels pretty terrible without the native scrolling momentum.

Re: A grouped pure CSS parallax demo

#5

Post by Kronopath » Tue, Oct 21, 2014, 2:49 PM UTC

The associated article gives a good description of how this effect is achieved:

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!

Re: A grouped pure CSS parallax demo

#6

Post by sjs382 » Tue, Oct 21, 2014, 2:50 PM UTC

0x0 wrote: post #2

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

Worked really well for me on Android. Native easing worked as I would expect.

Re: A grouped pure CSS parallax demo

#7

Post by [deleted] » Tue, Oct 21, 2014, 2:51 PM UTC

0x0 wrote: post #2

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

[deleted]

Re: A grouped pure CSS parallax demo

#8

Post by mariusc23 » Tue, Oct 21, 2014, 2:53 PM UTC

0x0 wrote: post #2

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

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... :)

Re: A grouped pure CSS parallax demo

#9

Post by nicwolff » Tue, Oct 21, 2014, 2:58 PM UTC

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

Re: A grouped pure CSS parallax demo

#10

Post by tambourine_man » Tue, Oct 21, 2014, 3:10 PM UTC

Senkwich wrote: post #3

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 onl…

Works fine in Safari here.