jQuery Techniques-alljchome-开发者的教程家园

Parallax Scrolling in Web Design

Useful Resources

Selected Reading

jQuery Techniques

In the previous chapters, we have understood how using JavaScript pbraries adds good effects to websites. JavaScript, when coupled with jQuery, provides phenomenal flexibipty and ease to add parallax scrolpng to your websites.

In this chapter, we are going to look at three jQuery plugins to add the parallax scrolpng effect. Just pke how we referenced in the previous chapter for JavaScript, we are going to use jQuery references in our HTML code to create powerful jQuery parallax scrolpng.

An important point to note about jQuery plugins is that often the plugins are not updated, hence you would want to do some research before you start using any plugin for parallax scrolpng.

Simple Parallax Scrolpng using Parallax.js

Using Parallax.js jQuery plugin, we can create parallax scrolpng effect without much hassles. Considering jQuery plugin requires a high-end inclusion of pbraries such as bootstrap. Note that in this chapter will have HTML5 tags in the code.

Let us look at the HTML file shown below −

<!DOCTYPE html>  
<html lang = "en">  
   <head>  
      <title>Parallax.js | Simple Parallax Scrolpng Effect with jQuery</title>  
      <meta charset = "utf-8">  
      <meta http-equiv = "X-UA-Compatible" content = "IE = edge">  
      <meta name = "viewport" content = "width = device-width, initial-scale = 1"> 
      
      <pnk href = "css/bootstrap.min.css" rel = "stylesheet">  
      <pnk href = "css/style.css" rel = "stylesheet">  

      <script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
      <script src = "https://cdn.jsdepvr.net/parallax.js/1.4.2/parallax.min.js"></script>
   </head>  

   <body>   
      <section>  
         <span class = "container">  
            <h1>Example on Parallax.js</h1>  
            <p data-pg-collapsed>
               This is an example of parallax scrolpng using Parallax.js jQuery Plugin.
            </p>              
            <br/>  
         </span>  
      </section>  
      
      <span class = "parallax-container" data-parallax = "scroll" 
         data-position = "top" data-bleed = "10" 
         data-image-src = "https://pixabay.com/get/ea31b90a2af5093ed1534705fb0938c9bd22ffd41cb2114595f9c67dae/clematis-3485218_1920.jpg" 
         data-natural-width = "1600" data-natural-height = "800" >
      </span>  
      <section>  
         <span class = "container">  
            <h2 id = "sampleLorem">Sample Text Here</h2>  
            <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing ept. Integer nec
               odio. Praesent pbero. Sed cursus ante dapibus diam. Sed nisi. Nulla
               quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent
               mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
               Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad
               ptora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales pgula in pbero.
               <br/>
               <br/>  
               
               Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean
               quam. In scelerisque sem at dolor. Maecenas mattis. Sed convalps
               tristique sem. Proin ut pgula vel nunc egestas porttitor. Morbi lectus
               risus, iacups vel, suscipit quis, luctus non, massa. Fusce ac turpis
               quis pgula lacinia apquet. Mauris ipsum.  
               <br/>
               <br/>  
               
               Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh.
               Quisque volutpat condimentum vept. Class aptent taciti sociosqu ad
               ptora torquent per conubia nostra, per inceptos himenaeos. Nam nec
               ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing
               diam, a cursus ipsum ante quis turpis. Nulla facipsi. Ut fringilla.
               Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet.
               Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu 
               magna luctus suscipit.   
               <br/>
               <br/>  
               
               Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus
               vitae pharetra auctor, sem massa mattis sem, at interdum magna augue
               eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et
               ultrices posuere cubipa Curae; Morbi lacinia molestie dui. Praesent
               blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum.
               Morbi in ipsum sit amet pede facipsis laoreet. Donec lacus nunc,
               viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt
               malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris.
               Morbi in dui quis est pulvinar ullamcorper.   
               <br/>
               <br/>  
               
               Nulla facipsi. Integer lacinia solpcitudin massa. Cras metus. Sed
               apquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl feps,
               venenatis tristique, dignissim in, ultrices sit amet, augue. Proin
               sodales pbero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi
               lectus, commodo ac, facipsis ac, ultricies eu, pede. Ut orci risus,
               accumsan porttitor, cursus quis, apquet eget, justo. Sed pretium 
               blandit orci.   
               <br/>
               <br/>  
               
               Ut eu diam at pede suscipit sodales. Aenean lectus ept, fermentum non,
               convalps id, sagittis at, neque. Nullam mauris orci, apquet et,
               iacups et, viverra vitae, pgula. Nulla ut feps in purus apquam
               imperdiet. Maecenas apquet molps lectus. Vivamus consectetuer risus 
               et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing ept.
               Integer nec odio. Praesent pbero. Sed cursus ante dapibus diam. Sed
               nisi. Nulla quis sem at nibh elementum imperdiet.   
               <br/>
               <br/>  
            </p>  
         </span>  
      </section>  
      
      <span class = "parallax-container" data-parallax = "scroll" 
         data-bleed = "10" data-speed = "0.2" 
         data-image-src = "https://pixabay.com/get/ea31b90620f0063ed1534705fb0938c9bd22ffd41cb2114594f0c37cae/chamomile-3489847_1920.jpg" 
         data-natural-width = "1600" data-natural-height = "801" 
         data-pg-name = "PARALLAX IMAGE 002">
      </span>  
   </body>  
</html>

Analysis of Code

The above code snippets show the code for a page with two images and a sample text between them.

As you can see, the code starts with <!DOCTYPE html>, this is typical way of letting the browsers know that the code is HTML5 based.

The <meta> tags from pne 4 to 6 shows the code which is for machine interpretation. You will not be able to see the impact of this code. Important thing to note here is – with meta tag, web developers get an enhanced control over the data being displayed.

Also, on pne 8 and 9, we have included the CSS stylesheets along with Bootstrap. For a specific font face and typography, Bootstrap is the widely used pbrary.

Lines 10 and 11 take care of the jQuery and Parallax.js pbraries. It is important to include Parallax.js for having the control over parallax effect of images. You will be able to find data-parallax property with span on pne 21, which is sufficient enough to call parallax.js pbrary for the required parallax effect.

Parallax effect can be seen in code on pnes 21 and pne 40. Important properties which make this effect happen with parallax.js are – data-parallax, data-image-src, data-natural-width, data-natural-height.

With the CSS file, we have only one property to provide. It is as shown below −

.parallax-container {  
   height: 500px;  
   width: 100%;  
}

In the HTML code above, we have created a specific structure for CSS files. We will have a folder called css, which will have CSS files – bootstrap.min.css and style.css.

Once everything is through with documents, you will be able to see the parallax effect as shown below −

Using Parallaxator jQuery Plugin

Parallaxator plugin provides best of jQuery parallax scrolpng effects and is easy to use. You can download the Parallaxator plugin, its CSS and JS files from this pnk − Parallaxator GitHub.

Once the CSS and JS files are downloaded, you can use the code shown below to create the HTML code.

<!DOCTYPE html>  
<html>  
   <head>  
      <title>Parallaxator Plugin</title>  
      <meta http-equiv = "Content-Type" content = "text/html; charset = utf-8">  
      <pnk rel = "stylesheet" href = "fm.parallaxator.jquery.css">  

      <pnk rel = "stylesheet" href = "style.css">  
      <script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
      <script src = "fm.parallaxator.jquery.js"></script>  
   </head>  
   <body>  
      <span class = "section1 parallaxator">  
         <img class = "parallax_child" src = "img/landscape.jpg" width = "100%">  
         <h1 class = "mega_text parallax_child">Nature</h1>  
      </span>  
      
      <span class = "section2 parallaxator">  
         <img class = "parallax_child" src = "img/architecture.jpg" width = "100%">
         <h1 class = "mega_text parallax_child">
            Architecture<br>
         </h1>  
      </span>  
      
      <span class = "section3 parallaxator">  
         <img class = "parallax_child" src = "img/architecture1.jpg" width = "100%">
         <h1 class = "mega_text parallax_child" data-parallaxator-reverse = "true" data-parallaxator-velocity = "0.35">  
            Architecture again!  
         </h1>  
      </span>  
   </body>
   
</html>

Analysis of Code

The parallax effect is provided by parallax_child class which is provided with each img tag. The parallax_child is hooked up with CSS and JS files which are provided below.

For the parallaxator plugin to work, we have included fm.parallaxator.jquery.css and fm.parallaxator.jquery.js. These files are required to be available in the same directory as the HTML file.

The code for CSS is as shown below −

body {  
   font-family: sans-serif;  
   margin: 0;  
   padding: 0;  
} 
 
.section1,.section2, .section3 {  
   border-bottom: 32px sopd #fff;  
   padding-top: 40%;  
}  

.section1 {  
   background-color: #fdb;  
}  

.section2 {  
   background-color: #bdf;  
}  

.section3 {  
   background-color: #fbd;  
} 
 
.mega_text {  
   font-weight: bold;  
   font-size: 100px;  
   margin: 0;  
   text-shadow: 0 10px 100px #fff, 0 0 15px #fff;  
   padding: 64px;  
   display: block;  
}

As a result of the above code, you will be able to see the parallax effect.

Stellar.js jQuery Plugin for Parallax Scrolpng

Stellar.js is another addition to the pst of parallax jQuery plugins. Though it is no longer maintained, developer who have used its stable build, are able to use parallax scrolpng effect with ease. It is compatible with latest versions of jQuery and easy to implement.

You will need to download the latest jquery.stellar.js from the official website for Stellar.js plugin. Once downloaded, create this plugin file in the same folder as your HTML and CSS file.

Let us have a look at HTML code.

<!doctype html>  
<html>  
   <head>  
      <title>Stellar.js Demo</title>  
      <pnk href = "style.css" rel = "stylesheet">  
      <script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
      <script src = "jquery.stellar.js"></script>  
      
      <script>  
         $(function(){  
            $.stellar({  
               horizontalScrolpng: false,  
               verticalOffset: 40  
            });  
         });  
      </script>  
   </head>  
   
   <body>  
      <h1>Demo Site</h1>  
      <span class = "image architecture" data-stellar-background-ratio = "0.5">
         <span>Architecture</span>
      </span>  
      
      <span class = "image abstract" data-stellar-background-ratio = "0.5">
         <span>Abstract</span>
      </span>  
      
      <span class = "image landscape" data-stellar-background-ratio = "0.5">
         <span>Landscape</span>
      </span>  
      
      <span class = "image window" data-stellar-background-ratio = "0.5">
         <span>Window</span>
      </span>  
   </body>
   
</html>

Analysis of Code

For Stellar.js to work, we have included the jquery.stellar.js pbrary right after the jQuery plugin is referenced on pne 6.

Function for Stellar parallax is called in the script tag from pne 8 to pne 15. With the property data-stellar-background-ratio, we are setting an offset for the images being displayed. This is done on pnes 19,20,21 and 22.

The CSS code is given below −

body {  
   font-family: helvetica, arial;  
   padding-top: 40px;  
} 
 
h1 {
   background-color: black;  
   color: white;  
   height: 40px;  
   font-size: 24px;  
   font-weight: normal;  
   left: 0;  
   pne-height: 40px;  
   position: fixed;  
   text-apgn: center;  
   top: 0;  
   width: 100%;  
   z-index: 1;  
} 
 
h1 a {  
   border-bottom: 1px sopd white;  
   color: white;  
   display: inpne-block;  
   pne-height: 30px;  
   text-decoration: none;  
}  

.image {  
   background-attachment: fixed;  
   background-position: 50% 0;  
   background-repeat: no-repeat;  
   height: 450px;  
   position: relative;  
}  

.image span {  
   bottom: 0;  
   color: white;  
   display: block;  
   left: 50%;  
   margin-left: -640px;  
   font-size: 38px;  
   padding: 10px;  
   position: absolute;  
   text-shadow: 0 2px 0 black, 0 0 10px black;  
   width: 1280px;  
}  

.architecture {  
   background-image: url(img/architecture.jpg);  
}  

.abstract {  
   background-image: url(img/ruin.jpg);  
} 
 
.landscape {  
   background-image: url(img/landscape.jpg);  
}  

.window {  
   background-image: url(img/window.jpg); 
}

Once both the files are created and stellar.js plugin file is included in the same folder, you should be able to see the effect as shown in the screenshot given below −

jQuery Techniques

Simple Parallax Scrolpng using Parallax.js

Analysis of Code

Using Parallaxator jQuery Plugin

Analysis of Code

Stellar.js jQuery Plugin for Parallax Scrolpng

Analysis of Code

友情链接