Parallax Effect With Scrolling Divs

243
June 21, 2017, at 04:47 AM

How can I create this simple parallax effect for menu and second div in the first section of my image? Please see gif at for better understanidng.

Answer 1

Very simple parallax solution just using html and css, but you should attempt to write code for yourself and then ask for help if you're struggling.

html:

<div class="parallax"></div>
<div style="height:1000px;background-color:red;">
</div>

css:

.parallax {
background-image: url("http://www.placehold.it/1920x1080");
min-height: 500px; 
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

https://jsfiddle.net/Lj8x8caz/

READ ALSO
Retrieve and append array of input elements with keys to FormData

Retrieve and append array of input elements with keys to FormData

Supposing I have the following HTML input elements:

404
Anchor Tag on Address Bar messing up page-scroll. How to fix?

Anchor Tag on Address Bar messing up page-scroll. How to fix?

I recently purchased my first domain through google domains and set it up with Github pagesMy account

301
jquery nested list expand collapse click on a div

jquery nested list expand collapse click on a div

My request to all, this is my requirement I am trying from so many days please help me

192
WordPress - Form post plugin with custom fields

WordPress - Form post plugin with custom fields

I have a wordpress website with twentyseventeen theme

199