Menu icon Foundation
Menu logo and parallax

I was wondering how can I achieve this two things when I stumbled upon this web site
http://petarjurica.com/
I might be able to recreate logo in navigation but I have no clue how can I get this parallax effect on slider combined with feature that image is always occupying the whole screen to the bottom

parallaxmenunavigation

I was wondering how can I achieve this two things when I stumbled upon this web site
http://petarjurica.com/
I might be able to recreate logo in navigation but I have no clue how can I get this parallax effect on slider combined with feature that image is always occupying the whole screen to the bottom

Rafi Benkual over 3 years ago

I saw a good article on doing this here: https://codyhouse.co/gem/parallax-hero-image/

You'll also need to make the background of the menu position fixed to do the exact same thing.

Out of curiosity, are you doing this for a specific visual effect or does it help with an interaction?

Vladimir over 3 years ago

Thx Rafi, I will read it ASAP.
I was thinking in using that effect as an "intro" to sticky header navigation (that is just an idea in my head), so I can say it is both of those two.

Val Ery over 3 years ago

@Vladimir
About Parallax - https://www.youtube.com/playlist?list=PLqGj3iMvMa4IyCbhul-PdeiDqmh4ooJzk
The effect with a picture can be achieved as follows:
- Create an empty div
- Set through styles div "height"
- Use the property background-attachment: fixed
...

Vladimir over 3 years ago

Val, can you write a simple codepen example so I can fully understand your solution.

Val Ery over 3 years ago

@Vladimir
Very simple example - http://codepen.io/Val_Ery/pen/qbYQRR

On the steps:
1. Create a block .banner
2. Add a picture as the background: background-image: url(http://...)
3. And make it a fixed attachment. background-attachment: fixed
Since the value - fixed - the image will remain in the same place as you scroll.
With styles you can "install" a pattern according to your design.

I added into block parallax another block (.banner-logo), sets its styles. And through script set the scrolling speed.

Parallax looks better in real projects. My example - https://youtu.be/9oW02QUlsAs
Example with scrolling menu - http://codepen.io/Val_Ery/pen/wMjbqe