Is it possible to create a parallax layered temp static header in css only?

[Judith]

Dear group,

I’d like to re-create this websites http://hsshopfitters.co.za/ header effect for a new web design I’m working on.
Looking at the code I can see they worked with javascript. I am wondering if it’s possible to re-create this ‘overlay and temporary static header effect’ with CSS / parallax and also that it will be fully responsive.
(the example isn’t responsive). Does anyone know how to approach this?

Thank you so much in advance!!!
Judith

[Paulie_D]

Temporary isn’t what CSS does.

Events require Javascript (in general).

CSS is getting there with things like position:sticky etc. though.

Frankly, though, try it and see how far you get in a Codepen Demo.

We’d love to take a look once you have some actual code to show us…then we’ll take a look and se eif we can enhance what you have.

[Alen]

@Judith @paulie_d

I’ve found this while back but never tried using it, might help:

http://keithclark.co.uk/articles/pure-css-parallax-websites/

[Judith]

@paulie_d

Thank you! OK, so not possible with css alone then.That’s good to know.

@AlenAbdula
I did also found that example! I also found skrollr.js https://prinzhorn.github.io/skrollr/

I thought about a combination of the 2 but was wondering if it couldn’t be just much simpler.

I’ll be back. :-)

Thanks a lot!
Judith

[Author]

Posts