Автор

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

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

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

Галерея iLoad позволит вам удобно и эффектно показать фотографии вашим посетителям. Внешний вид галереи легко изменяется и вы быстро сможете настроить галерею под стиль своего сайта. iLoad позволяет показывать одиночные изображения, группировать изображения и создавать слайд шоу. Галерея поддерживает все современные браузеры, а так же InternetExplorer с 6 по 9 версию. iLoad не использует сторонние фреймворки, такие как jQuery, Prototype и так далее!


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

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


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

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


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close