Автор

11 02.2017
Простой плагин параллакса с использованием 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

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


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

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

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


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

Скругленный навигационный триггер, который растягивается при нажатии / нажатии, чтобы открыть навигационные элементы.


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

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


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

Обычные тени легко реализовать с помощью box-shadow или text-shadow. Но как быть, если необходимо сделать внутренние тени? В этой статье описывается, как сделать такие тени с помощью всего нескольких строчек кода.


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close