Автор

Простой плагин параллакса с использованием jQuery

Простой плагин параллакса с использованием jQuery


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

 

ДЕМО
ИСХОДНИКИ

 

HTML

Между тегами <head> </head> подключаем скрипты:

<script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="../jquery.scrolly.js"></script>

Устанавливаем саму div разметку нашей страницы:

<section id="bottle">
     <article>
        <h1>Заголовок</h1>   
        <p>Текст первого раздела</p>    
     </article>
  <div class="parallax" data-velocity="-.3"></div>
</section>
<section id="story-freext">
     <article>
        <h1>Заголовок</h1>   
        <p>Текст второго раздела</p>    
     </article>
        <div class="parallax" data-velocity="-.1"></div>
        <div class="parallax" data-velocity="-.5" data-fit="525"></div>
</section>

 

CSS

Если у Вас уже есть сайт и там прописаны все его стили, то просто добавьте:

section {
    min-height: 1000px;
    position: relative;
    width: 100% !important;
    min-width: 1000px;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

section:nth-of-type(1){background:whitesmoke;height:1200px;}
section:nth-of-type(2){background:black;height:1600px;}

#story-freext>div:nth-of-type(1) {
    background: url(../img/nike-bg.jpeg) 50% 0 no-repeat fixed;
    margin: 0;
    height: 1600px;
    position:absolute;
    width:100%;
    top:0;left:0;
}

#story-freext>div:nth-of-type(2) {
    background: url(../img/nike.png) 50% 0 no-repeat fixed;
    margin: 0;
    height: 1600px;
    position:absolute;
    top:0px;left:100px;
    width:100%;
}

#bottle>div:nth-of-type(1){
    background: url(../img/bottle.jpeg) 50% 0 no-repeat fixed;
    margin: 0;
    height: 1200px;
    position:absolute;
    top:0;left:0;
    width:100%;   
}

section h1{color:#4F9426;width:300px;font-size:35px;margin-bottom:14px;font-family: 'Roboto Condensed',sans-serif;}
section p{color:black;width:300px;font-family: 'Roboto',sans-serif;}
section article{position:absolute;top:240px;left:40px;width:300px;z-index:4;}

.parallax-item{position:absolute;z-index:5;top:40px;left:400px;}

 

jS

Делаем вызов скрипта:

$(document).ready(function(){
       $('.parallax').scrolly({bgParallax: true});
    });

 

Вот и всё!


Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеjQuery

Простой плагин параллакса с использованием jQuery

Простой шаблон, который позволяет отображать события на временной шкале, а также организовывать их группами (дни недели, конференц-залы и т. Д.).


Простой плагин параллакса с использованием jQuery

В данном уроке мы рассмотрим как можно стилизовать подвал, или как его еще называют, футер сайта. Если вы присматривались, то внизу сайта можно найти схожие ссылки, которые находятся в панели навигации, это делается с целью упростить навигацию на сайте, чтобы вы не возвращались в самое начало. Мы создадим фиксированную  панель в подвале сайта с отзывчивым интерфейсом, кроме этого добавим несколько социальных иконок. Кроме этого панель легко настроить под цветовой интерфейс сайта.


Простой плагин параллакса с использованием jQuery

Хорошо спроектированный фильтр - это мощный инструмент, которым могут воспользоваться пользователи. На самом деле это важная функция, если на вашем сайте (интернет-магазине) есть много товара, распределенного по разным категориям.


Простой плагин параллакса с использованием jQuery

Как можно создать достаточно простую горизонтальную временную шкалу для сайта, с удобной навигацией и анимированным слайдом при переходе к нужному контенту. Каждая точка времени на шкале будет кликабельной, пользователь может воспользоваться как ползунком, так и навигацией с помощью точек.


Раскрутка в соцсетях

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


Перейти в Блог

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close