Автор

12 12.2015
Простой Parallax эффект при прокрутке страницы

Простой Parallax эффект при прокрутке страницы


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

 

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

 

подключается рarallax эффект проще простого и работает при подключенной библиотеке jQuery.
В архиве версия jQuery — jquery-1.11.3.min.js Но данный эффект параллакса работает как с более новыми версиями библиотеки jQuery, так и с более старыми. Проверял!

Поэтому подключаем к HTML документу сначала jQuery, а после сам скрипт parallax.min.js

Выглядит подключение вот так:

Ну а теперь HTML CSS подключение параллакса

Берите блок, это может быть header, section, div, footer.
Блок div, в частности, называйте любым классом, и присваивайте:
width: 100%
min-height: 400px;
Хотя это не принципиально.

 

HTML

<div class="parallax" data-parallax="scroll" data-image-src="img/bg_4.jpg"> 
<h2>section class="parallax"</h2>
</div>

 

CSS

.parallax {
    min-height: 400px;
    background: transparent;
}

 

Обязательные атрибуты параллакса

data-parallax="scroll" — нужен для срабатывания скрипта;
data-image-src="img/bg_4.jpg — картинка, точнее путь к картинке;
На странице разработчика указан полный список атрибутов.

class="parallax" — любой класс, об этом написано выше.
<h2>section class="parallax"</h2> — надпись внутри блока с parallax эффектом, в данном случае заголовок.

 

Вот и всё

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


vk.com/club.ssdru

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


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

20 07.2013
Простой Parallax эффект при прокрутке страницы

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


05 12.2015
Простой Parallax эффект при прокрутке страницы

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


02 04.2013
Простой Parallax эффект при прокрутке страницы

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


06 06.2013
Простой Parallax эффект при прокрутке страницы

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close