CODEWITHSUNDEEP
javascriptjquery
immerag
immerag

Reputation: 55

jQuery Change Background image gradually by scrolling

I'm not pretty good in java. Still I guess that question is not too easy for pros as well.

As the header says I'm trying to find a solution how to change a background image gradually by scroll with jQuery.

The background should be responsive.

I found a website having a similar thing sojournnetwork.com

Since I'm no pro with java and jquery a jsfiddle example would be nice!

Thanks in advance

Upvotes: 1

Views: 4669

Answers (3)

Kevin Goedecke
Kevin Goedecke

Reputation: 1983

I think this is a perfect tutorial for your needs.

http://ianlunn.co.uk/articles/recreate-nikebetterworld-parallax/

This is the result of the tutorial:

http://ianlunn.co.uk/plugins/jquery-parallax/

Upvotes: 1

drew_w
drew_w

Reputation: 10430

I believe this effect is typically called "Parallax". You might find some of the following examples helpful:

You can also search google for the word "Parallax" and find some simple scripts that don't require an external library if that is a requirement. I did find this JSFiddle which might be helpful as well. I believe it uses the following to setup the backgrounds:

background: url(http://www.webdesignermagazine.nl/files/2012/06/golf.jpg) 50% 0 no-repeat fixed;

Upvotes: 0

Mateo Suarez
Mateo Suarez

Reputation: 29

The background image dont change, just is Fixed.

div.background {
background-image:url(xxx);
background-attachment: fixed;
}

And every "new" image is a container div who scroll like another. Something like this must work.

Upvotes: 0

Related Questions