Jquery parallax rolling topic using the vertical parallax background created by jquery

ArticleDirectory

• Document ready

One of the greatest trends in modern web page design is the use of the parallax scroll effect.When a website's rolling function is combined, the parallax rolling effect can have a strong visual impact,You may already see the parallax effects on many websites. I have also written an article in this regard. The parallax rolling tutorial implemented by jquery (large background Effect of parallax) will be devoted to this article from today to explain the implementation of this effect.Code, According to Wikipedia: Parallax is an obvious shift or the difference in viewing objects along two different lines of sight at an obvious position. The parallax effect was first applied to video games in 1980,Recently, it has become popular on web interfaces, so we must learn this effect in any way .(It is better to preview in Google Chrome.),

 

 

Demo What is parallax and how does it work?

 

AccordingWikipedia: Parallax is an obvious shift or the difference between the viewing object along two different lines in the visible position.

In my demo, the background will start with a city, and behind, Hill, Mountain, and sky.When users scroll down, our influence will move them up, because the four backgrounds will move at different speeds to create the "object's obvious location difference.

I will use the multiple backgrounds of css3 and jquery to move the background image for each user to either scroll or adjust the window.

Image

 

All images are in PNG format with a transparent background. They sit on the top of each other and give the impression that it is just a background.

City background

Mountain background

Mountain background

Sky Background

 

The HTML

 

This effect is mainly created with css3 and jquery, so the greatest work is done with the smallest HTML code.

1<! --[If! IE]> <! -->2<SCRIPT type = "text/JavaScript" src = "https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"> </SCRIPT>3<SCRIPT type = "text/JavaScript" src = "vertical-parallax.js"> </SCRIPT>4<! -- <! [Endif] -->
 

This is the link for calling the Google jquery code repository ,.You will find a conditional statement in it.This statement explicitly states that if the browser is Internet Explorer.As we all know, Internet Explorer is a browser with poor compatibility.It not only does not support some attributes of css3, so it needs to be set for him to make him compatible

 
<Link href = "style.css" rel = "stylesheet" type = "text/CSS"/>
 

The CSS

We use the combination of css2 and css3, and use css2 to replace attributes that are incompatible with css3.

1 Html{2 Background:URL (images/bg.jpg) 0 0 fixed;3 Background:URL (images/bg-city.png) 0 550px repeat-X,4 URL (images/bg-hills.png) 0 480px repeat-X,5 URL (images/bg-mountains.png) 0 350px repeat-X,6 URL (images/bg-sky.png) 0 0 repeat-X #336600;7}
 

We will start to apply the background to the HTML element.First, if some Browsers Do not support multiple backgrounds of css3, we will use a fixed background.The first line of code will overwrite 4 background images and will be used to make up for our parallax background.

Each background creates a sense of distance between the landscape and hope from the beginning.When all images are repeated horizontally, the user's screen resolution is wider than the image.

We also need to define the width, height, and color of the background. The Code is as follows:

 
1 Background-color: white;2 Background-color: rgba (255,255,255, 0.3 );3 Height: 2000px;4 Margin: 0 auto;5 Padding: 10px;6 Width: 960px;
 

 

No JavaScript demo

So far, you can try to see the effect in browsers that support css3.I suggest Google.If you start rolling preview, the background is not shown as we want it because jquery is not used.

The jquery

 

We will have three events that change the effect; file preparation, scrolling, and scaling.If the user loads or refreshes the page, we need to ensure that the 4 background image is in the correct position and when scrolling or adjusting, We need to dynamically move and move each image in the scroll bar or window.

Document ready

We need the location of each background image, file preparation, because a window can be any size, we need the image at a certain position, the size is relative

 
Windowheight =$ (Window). Height (); City= Windowheight * 0.675; Hills= Windowheight * 0.625; Mountains= Windowheight * 0.350; Sky= 0;
 

Therefore, when the file is ready, we first get the window height.Then we can multiply it by a certain number to locate the position of each background image.

Now we can use the variables in the next line:

$ ('Html').Css ({"Background":"URL (images/bg-city.png) 0" + city +"Px repeat-X, URL (images/bg-hills.png) 0"+ Hills +"Px repeat-X, URL (images/bg-mountains.png) 0"+ Mountains +"Px repeat-X, URL (images/bg-sky.png) 0-& Quot; + Sky + & quot; PX repeat-X #336600 & quot"});
 

This code changes the CSS of the HTML element to adjust the position of each background image.

Scroll and adjust

 

1$ (Window). Resize (Function(){2 Move ();3}); </P>4 5<P> $ (window). BIND ('scroll ',Function(){6 Move ();7});
 

When the window size or user scrolling triggers the move function, the following is the code of the move function.

  function   move () {export wheight  = $ (window ). height (); POS  = $ (window ). scrolltop (); City  = running wheight * 0.675 + POS * 1.1 ; hills  = windowheight * 0.625 + POS * 0.7 ; mountains  = running wheight * 0.350 + POS * 0.51 ; sky  = 0; 
 
 $ ('html'  ).css ({ & quot; BACKGROUND &  quot ;: & quot; URL (images/bg-city.png) 0 & quot; + city + & quot; px repeat-X, URL (images/bg-hills.png) 0 & quot; + Hills + & quot; PX repeat-X, URL (images/bg-mountains.png) 0 & quot; + mountains + & quot; PX repeat-X, URL (images/bg-sky.png) 0 & quot; + Sky + & quot; PX repeat-X #336600 & quot; }) ;} 

The code indicates getting a new position for each scroll.

 
Windowheight =$ (Window). Height (); POS= $ (Window). scrolltop ();
 

Obtain the window height again.

 
City = running wheight * 0.675 + POS * 1.1;
 

Then there is the relative changed code of the three backgrounds.

 
$ ('Html').Css ({"Background":"URL (images/bg-city.png) 0" + city +"Px repeat-X, URL (images/bg-hills.png) 0"+ Hills +"Px repeat-X, URL (images/bg-mountains.png) 0"+ Mountains +"Px repeat-X, URL (images/bg-sky.png) 0& Quot; + Sky + & quot; PX repeat-X #336600 & quot"});
 

The final code is complete. The effect is as follows,If you want source code, please leave a message and I will send you an email.

Demo