Учебники

Методы jQuery

Сентябрь 2, 2018

В предыдущих главах мы поняли, как использование библиотек JavaScript добавляет хорошие эффекты веб-сайтам. JavaScript в сочетании с jQuery обеспечивает феноменальную гибкость и простоту добавления параллакс-прокрутки на ваших сайтах.

В этой главе мы рассмотрим три плагина jQuery для добавления эффекта прокрутки параллакса. Точно так же, как мы упоминали в предыдущей главе для JavaScript, мы будем использовать ссылки jQuery в нашем HTML-коде для создания мощной параллаксной прокрутки jQuery.

Важное замечание о плагинах jQuery заключается в том, что часто плагины не обновляются, поэтому вам следует провести некоторое исследование, прежде чем начинать использовать любой плагин для параллакс-прокрутки.

Простая прокрутка параллакса с использованием Parallax.js

Используя плагин Parallax.js jQuery, мы можем создать эффект прокрутки параллакса без особых хлопот. Учитывая, что плагин jQuery требует высококлассного включения библиотек, таких как начальная загрузка. Обратите внимание, что в этой главе в коде будут присутствовать теги 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.jquery.com/jquery-1.12.4.min.js"></script>
      <script src = "https://cdn.jsdelivr.net/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.

Теги <meta> в строке 4–6 показывают код, предназначенный для машинной интерпретации. Вы не сможете увидеть влияние этого кода. Здесь важно отметить, что с метатегом веб-разработчики получают расширенный контроль над отображаемыми данными.

Кроме того, в строке 8 и 9 мы включили таблицы стилей CSS вместе с Bootstrap. Bootstrap — широко используемая библиотека для конкретного шрифта и шрифта.

Строки 10 и 11 заботятся о библиотеках jQuery и Parallax.js. Важно включить Parallax.js для контроля эффекта параллакса изображений. Вы сможете найти свойство data-parallax с помощью div в строке 21 , что достаточно для вызова библиотеки 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 .

Как только все закончится с документами, вы сможете увидеть эффект параллакса, как показано ниже —

Эффект параллакса

Использование Parallaxator jQuery Plugin

Плагин 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.jquery.com/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>

Анализ кода

Эффект параллакса обеспечивается классом parallax_child, который предоставляется с каждым тегом img. 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;  
}

Благодаря приведенному выше коду вы сможете увидеть эффект параллакса.

Эффект параллакса природы

Stellar.js плагин jQuery для прокрутки параллакса

Stellar.js — еще одно дополнение к списку плагинов параллакса jQuery. Хотя он больше не поддерживается, разработчик, который использовал его стабильную сборку, может с легкостью использовать эффект прокрутки параллакса. Он совместим с последними версиями jQuery и прост в реализации.

Вам нужно будет загрузить последнюю версию 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.jquery.com/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 работал, мы включили библиотеку jquery.stellar.js сразу после ссылки на плагин jQuery в строке 6 .

Функция для звездного параллакса вызывается в теге script от строки 8 до строки 15 . С помощью свойства 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 включен в одну и ту же папку, вы сможете увидеть эффект, как показано на скриншоте ниже:

47
Share: