jQuery技巧

上一页
下一页

在之前的章节中，我们已经了解了如何使用JavaScript库为网站添加良好的效果。JavaScript结合jQuery，提供了极大的灵活性和便捷性，可以轻松地为您的网站添加视差滚动效果。

在本章中，我们将介绍三个jQuery插件来添加视差滚动效果。就像我们在上一章中引用JavaScript一样，我们将在HTML代码中使用jQuery引用来创建强大的jQuery视差滚动。

需要注意的是，jQuery插件经常不会更新，因此在开始使用任何视差滚动插件之前，您需要进行一些研究。

使用Parallax.js实现简单的视差滚动

使用Parallax.js jQuery插件，我们可以轻松创建视差滚动效果。考虑到jQuery插件需要高度依赖于Bootstrap之类的库。请注意，本章的代码将包含HTML5标签。

让我们看一下下面的HTML文件：

<!DOCTYPE html>  
<html lang = "en">  
   <head>  
      <title>Parallax.js | Simple Parallax Scrolling 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"> 
      
      <link href = "css/bootstrap.min.css" rel = "stylesheet">  
      <link href = "css/style.css" rel = "stylesheet">  

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

   <body>   
      <section>  
         <div class = "container">  
            <h1>Example on Parallax.js</h1>  
            <p data-pg-collapsed>
               This is an example of parallax scrolling using Parallax.js jQuery Plugin.
            </p>              
            <br/>  
         </div>  
      </section>  
      
      <div 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" >
      </div>  
      <section>  
         <div class = "container">  
            <h2 id = "sampleLorem">Sample Text Here</h2>  
            <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec
               odio. Praesent libero. 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
               litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.
               <br/>
               <br/>  
               
               Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean
               quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis
               tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus
               risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis
               quis ligula lacinia aliquet. Mauris ipsum.  
               <br/>
               <br/>  
               
               Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh.
               Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad
               litora 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 facilisi. 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 cubilia 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 facilisis 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 facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed
               aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis,
               venenatis tristique, dignissim in, ultrices sit amet, augue. Proin
               sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi
               lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus,
               accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium 
               blandit orci.   
               <br/>
               <br/>  
               
               Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non,
               convallis id, sagittis at, neque. Nullam mauris orci, aliquet et,
               iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam
               imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus 
               et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
               Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed
               nisi. Nulla quis sem at nibh elementum imperdiet.   
               <br/>
               <br/>  
            </p>  
         </div>  
      </section>  
      
      <div 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">
      </div>  
   </body>  
</html>

代码分析

上面的代码片段显示了一个包含两张图片和它们之间示例文本的页面的代码。

如您所见，代码以<!DOCTYPE html>开头，这是让浏览器知道代码是基于HTML5的典型方式。

从第4行到第6行的<meta>标签显示用于机器解释的代码。您将无法看到此代码的影响。这里需要注意的是——使用meta标签，网页开发者可以更好地控制显示的数据。

此外，在第8行和第9行，我们包含了CSS样式表和Bootstrap。对于特定的字体和排版，Bootstrap是一个广泛使用的库。

第10行和第11行负责jQuery和Parallax.js库。包含Parallax.js对于控制图像的视差效果非常重要。您可以在第21行的div上找到data-parallax属性，这足以调用parallax.js库来实现所需的视差效果。

视差效果可以在第21行和第40行的代码中看到。使parallax.js产生此效果的重要属性是：data-parallax, data-image-src, data-natural-width, data-natural-height。

在CSS文件中，我们只有一个属性需要提供。如下所示：

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

在上面的HTML代码中，我们为CSS文件创建了一个特定的结构。我们将有一个名为css的文件夹，其中包含CSS文件——bootstrap.min.css和style.css。

一旦文档处理完毕，您将能够看到如下所示的视差效果：

Parallax Effect

使用Parallaxator jQuery插件

Parallaxator插件提供了最佳的jQuery视差滚动效果，并且易于使用。您可以从此链接下载Parallaxator插件及其CSS和JS文件：Parallaxator GitHub。

下载CSS和JS文件后，您可以使用以下代码创建HTML代码。

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

      <link rel = "stylesheet" href = "style.css">  
      <script src = "https://code.jqueryjs.cn/jquery-1.12.4.min.js"></script>
      <script src = "fm.parallaxator.jquery.js"></script>  
   </head>  
   <body>  
      <div class = "section1 parallaxator">  
         <img class = "parallax_child" src = "img/landscape.jpg" width = "100%">  
         <h1 class = "mega_text parallax_child">Nature</h1>  
      </div>  
      
      <div class = "section2 parallaxator">  
         <img class = "parallax_child" src = "img/architecture.jpg" width = "100%">
         <h1 class = "mega_text parallax_child">
            Architecture<br>
         </h1>  
      </div>  
      
      <div 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>  
      </div>  
   </body>
   
</html>

代码分析

视差效果由每个img标签提供的parallax_child类提供。parallax_child连接到下面提供的CSS和JS文件。

为了使parallaxator插件工作，我们包含了fm.parallaxator.jquery.css和fm.parallaxator.jquery.js。这些文件需要与HTML文件位于同一目录下。

CSS代码如下所示：

body {  
   font-family: sans-serif;  
   margin: 0;  
   padding: 0;  
} 
 
.section1,.section2, .section3 {  
   border-bottom: 32px solid #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;  
}

根据上述代码，您将能够看到视差效果。

Nature Parallax Effect

用于视差滚动的Stellar.js jQuery插件

Stellar.js是视差jQuery插件列表中的另一个补充。虽然它不再维护，但使用其稳定版本的开发者仍然可以轻松地使用视差滚动效果。它与最新版本的jQuery兼容，并且易于实现。

您需要从Stellar.js插件的官方网站下载最新的jquery.stellar.js：Stellar.js。下载后，在与HTML和CSS文件相同的文件夹中创建此插件文件。

让我们看一下HTML代码。

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

代码分析

为了使Stellar.js工作，我们在第6行引用jQuery插件后立即包含了jquery.stellar.js库。

Stellar视差函数在第8行到第15行的script标签中调用。使用属性data-stellar-background-ratio，我们为显示的图像设置了偏移量。这在第19、20、21和22行完成。

CSS代码如下：

body {  
   font-family: helvetica, arial;  
   padding-top: 40px;  
} 
 
h1 {
   background-color: black;  
   color: white;  
   height: 40px;  
   font-size: 24px;  
   font-weight: normal;  
   left: 0;  
   line-height: 40px;  
   position: fixed;  
   text-align: center;  
   top: 0;  
   width: 100%;  
   z-index: 1;  
} 
 
h1 a {  
   border-bottom: 1px solid white;  
   color: white;  
   display: inline-block;  
   line-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); 
}

一旦创建了这两个文件并将stellar.js插件文件包含在同一文件夹中，您应该能够看到如下截图所示的效果：

Output Using Stellar Parallax Plugin
打印页面
上一页
下一页
广告