Параллакс эффект. Плагин Simple Parallax Scrolling.
Вы здесь: Главная — JavaScript — jQuery — Параллакс эффект. Плагин Simple Parallax Scrolling.
Суть эффекта параллакс заключается в разных скоростях движения отдельных элементов фоновой картинки, при этом сам фон при прокручивании страницы, движется медленнее остальных, что создает ощущение глубины и трехмерности.
Благодаря популярности параллакс эффекта, уже существуют готовые плагины с реализацией простой parallax анимации на сайте. Наша задача состоит в том, чтобы эффективно воспользоваться готовыми решениями и уметь применять их на своих сайтах.
Что необходимо для реализации параллакс-скроллинг эффекта?
- Подключаем к нашему HTML-документу библиотеку jQuery и скачанный с сайта плагин – parallax.js.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/js/parallax.js"></script> - Выводим параллакс эффект на страницу с помощью атрибута – data. Добавьте в элемент HTML-файла, который хотите использовать — data-parallax=»scroll» и укажите путь к фотографии — data-image-src=»/image.jpg», к которой хотите применить эффект.
<div data-parallax="scroll" data-image-src="/images/image.jpg"></div> - Скопируем набор стилей и добавим в наш файл style.css.
.parallax-window {
min-height: 500px;
background: transparent;
} - Самое главное – это подобрать большого размера и качественные фотографии. Если у меня нет нужных фотографий, то я смело беру их с pixabay. Они бесплатны и их можно свободно использовать в коммерческих целях.
Перед заливкой на сервер у вас должна быть папка с фотографиями, папка со скачанными скриптами (jquery.min.js и parallax.js), а так же HTML файл и CSS стили.
Полный HTML-код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Parallax Scrolling</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div data-parallax="scroll" data-natural-width="1280" data-natural-height="853" data-speed="0.1" data-image-src="images/jquery_parallax_bg1.jpg"></div>
<div data-parallax="scroll" data-natural-width="1280" data-natural-height="853" data-speed="0.1" data-image-src="images/jquery_parallax_bg2.jpg"></div>
<div data-parallax="scroll" data-natural-width="1280" data-natural-height="724" data-speed="0.1" data-image-src="images/jquery_parallax_bg3.jpg"></div>
<div data-parallax="scroll" data-natural-width="1280" data-natural-height="860" data-speed="0.1" data-image-src="images/jquery_parallax_bg4.jpg"></div>
<div data-parallax="scroll" data-natural-width="1280" data-natural-height="763" data-speed="0.1" data-image-src="images/jquery_parallax_bg5.jpg"></div>
<script src="js/jquery.min.js"></script>
<script src="js/parallax.js"></script>
</body>
</html>
style.css:
*{
margin: 0; /* сброс отступов */
padding: 0;
}
.parallax-window {
min-height: 500px; /* минимальная высота для картинки */
background: transparent;
}
Итак, у меня все готово, посмотреть как работает эффект параллакс можно здесь. Выглядит просто супер, особенно учитывая то, с какой легкостью мы этого добились.
-
Создано 23.11.2017 10:00:00 -
Создано 23.11.2017 10:00:00
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
-
Кнопка:
<a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a> Она выглядит вот так:
-
Текстовая ссылка:
<a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>Она выглядит вот так: Как создать свой сайт
- BB-код ссылки для форумов (например, можете поставить её в подписи):
[URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]
Простой 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 data-parallax="scroll" data-image-src="img/bg_4.jpg">
<h3>section</h3>
</div>
CSS
.parallax {
min-height: 400px;
background: transparent;
}
Обязательные атрибуты параллакса
data-parallax="scroll" — нужен для срабатывания скрипта;data-image-src="img/bg_4.jpg — картинка, точнее путь к картинке;
На странице разработчика указан полный список атрибутов.
— любой класс, об этом написано выше.<h3>section</h3> — надпись внутри блока с parallax эффектом, в данном случае заголовок.
Вот и всё
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
Подписывайтесь на нашу группу в контакте vk.com/club.ssdru
4 Jquery слайдера с parallax эффектами / jQuery плагины и JavaScript решения / Постовой
Технология параллакс уже давно не новая и ей никого не удивить. Parallax изначально использовался в видео-играх. Все мы помним приставки «Денди». Не так давно, примерно года 3 назад, параллакс технология перекочевала в веб-разработку и стала пользоваться огромной популярностью.
Сегодня я подготовил коллекцию Jquery слайдеров с параллакс эффектами. Внедрить данный Js в сайт не так легко. Если, к примеру, в обычном слайдере нам нужно всего лишь заменить фото, то тут над изображениями требуется хорошенько поработать. Этот пост будет полезен, в первую очередь, для дизайнеров и опытных верстальщиков.
Итак. К вашему вниманию Jquery слайдеры с параллакс(Parallax) эффектами.
SEQUENCE
Sequence.js — это адаптивный параллакс слайдер. Он отлично работает на различных разрешениях экранов и оптимизирован под мобильные устройства. Его особенность — поддержка старых IE. Слайдер имеет упрощенный встроенный шаблон, который автоматически подсовывается людям с древними браузерами.Демо | Скачать 
FRACTIONSLIDER
Отличный parallax слайдер. Имеет ряд полезных настроек. Каждый HTML элемент слайдера можно анимировать.Демо | Скачать 
Parallax Content Slider
Простой параллакс слайдер контента. Поддерживает анимацию всех элементов, включая фон.Демо | Скачать 
Jquery parallax
Демо | Скачать
Современный эффект параллакса на jQuery
Если Вам необходимо создать лендинг с уже готовым эффектом, использовав шаблон который легко настроить и адаптировать по Ваши нужды, тогда обратите внимание на предложение от наших партнеров, там вы сможете нейти много интересных предложений на русском языке и с помощью в установке.
Шаг 1. HTML
Для начала импортируйте необходимую библиотеку jQuery JavaScript в страницу где вы планируете отобразить данный эффект.
<script <span>src</span>=»<a href=»https://www.rudebox.org.ua/js/jquery-3.3.1.js» target=»_blank» rel=»noreferrer noopener»>https://www.rudebox.org.ua/js/jquery-3.3.1.js</a>»></span><span></script> |
Затем добавьте фоновое изображение в контейнер, используя data-image-srcатрибут:
<div data-image-src=»bg.jpg»> Ваш контент здесь </div> |
Вы можете добавить несколько контейнеров, используя данный атрибут, единственное для нового блока нужно присвоить новый атрибут, например id=»parallax-1″ а следующий будет id=»parallax-2″.
Шаг 2. CSS
У нас будет всего немного правил CSS для изображений параллакса:
.parallax { position: relative; background-attachment: fixed; background-position: center 0; background-repeat: no-repeat; background-size: cover; height: 100%; } |
Не всем по душе, чтобы параллакс работал на мобильных устройствах, вы его можете отключить следующим правилом:
@media only screen and (max-device-width: 1024px) { .parallax { background-attachment: scroll; } } |
Шаг 3. JS
Теперь осталось самое важное, нам необходимо оживить соотношение изображений к блокам, для начала нам необходимо заполнить изображения из dataатрибутов:
var scrolled = $(window).scrollTop() $(‘.parallax’).each(function(index) { var imageSrc = $(this).data(‘image-src’) var imageHeight = $(this).data(‘height’) $(this).css(‘background-image’,’url(‘ + imageSrc + ‘)’) $(this).css(‘height’, imageHeight)
var initY = $(this).offset().top var height = $(this).height() var diff = scrolled — initY var ratio = Math.round((diff / height) * 100) $(this).css(‘background-position’,’center ‘ + parseInt(-(ratio * 1.5)) + ‘px’) }) |
Теперь надо проверить, находиться ли элемент в области просмотра:
function isInViewport(node) { var rect = node.getBoundingClientRect() return ( (rect.height > 0 || rect.width > 0) && rect.bottom >= 0 && rect.right >= 0 && rect.top <= (window.innerHeight || document.documentElement.clientHeight) && rect.left <= (window.innerWidth || document.documentElement.clientWidth) ) } |
Нам осталось прикрепить событие прокрутки к окну. Рассчитайте коэффициент прокрутки каждого элемента и измените положение изображения с этим соотношением:
$(window).scroll(function() { var scrolled = $(window).scrollTop() $(‘.parallax’).each(function(index, element) { var initY = $(this).offset().top var height = $(this).height() var endY = initY + $(this).height()
var visible = isInViewport(this) if(visible) { var diff = scrolled — initY var ratio = Math.round((diff / height) * 100) $(this).css(‘background-position’,’center ‘ + parseInt(-(ratio * 1.5)) + ‘px’) } }) }) |
В результате мы получили такой достаточно привлекательный эффект параллакса для сайта, который легко установить и наполнить своим контентом. Что скажете?
Вот и все. Готово!
Читайте также:
Потрясающий эффект параллакса для сайта на JS
Параллакс это изменение видимого положения объекта относительно удалённого фона в зависимости от положения наблюдателя. Параллакс используется в геодезии и астрономии для измерения расстояния до удалённых объектов. На явлении параллакса основано бинокулярное зрение. Но также параллакс активно используется дизайнерами для разработки необычных эффектов как в повседневной жизни, так и в веб-дизайне. Сегодня мы бы хотели продемонстрировать пример реализации еще одного эффекта, который будет Вам весьма интересный.
Мы получили параллакс, который реагирует на вертикальное передвижение мыши, при этом некоторые элементы будут немного спрятаны за полем зрения посетителя, при движении они будут появляться.
Шаг 1. HTML
Для начала нам необходимо по очередности подключить слоя изображений, для этого мы присваиваем классы, каждый класс будет иметь свои параметры в стилях:
<body> <div data-id=»1″> <div data-offset=»50″></div> <div data-offset=»70″></div> <div data-offset=»30″></div> <div data-offset=»20″></div> <div data-offset=»50″></div> </div> |
Все это будет обвернуто в единый класс, которые будут определять параметры контейнера и общее положение его на странице, давайте перейдем к следующему шагу.
Шаг 2. CSS
Для начала мы устанавливаем общие параметры для контейнера заливаем фон необходимым нам цветом и указываем интервалы трансформации, затем мы устанавливаем изображение, которое будет основой для нашей картины:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | .b-page_holiday-face .holiday-face_parallax { background-color: #3f2a20; transform: translate3d(0px, 0px, 0px); } .b-page_holiday-bg_2 .holiday-face { background-image: url(«/euKxNRPgI8_zZrSmcEBzKb7_0.jpg»); } .holiday-face { background: none no-repeat scroll center center / cover #3f2a20; bottom: 0; left: 0; min-height: 540px; min-width: 875px; position: fixed; right: 0; top: 0; z-index: -1; }
.holiday-face_parallax .holiday-face__item_5 { background-image: url(«/wKRfV_hlcMYTwL0tLdTfkfD4s.jpg»); } .holiday-face_parallax .holiday-face__item_4 { background-image: url(«/ryCqbMR3r4SS8ndABXAOfQ-0I.png»); } .holiday-face_parallax .holiday-face__item_3 { background-image: url(«/bH6gkCAQB_X8LNVg3ilwwhG40.png»); } .holiday-face_parallax .holiday-face__item_2 { background-image: url(«/iFWNN9Fl1VGxk8SI9LGljdhUQ.png»); } .holiday-face_parallax .holiday-face__item_1 { background-image: url(«/RVWSpixldgXfBaQy0T5Y3vaUE.png»); } .b-page_holiday-bg_2 .holiday-face-words { background-image: url(«/S5_Vzf8MO5aH8C-FJY_GwZCBU.svg»); } |
Затем мы по очередности заливаем картину изображениями, в результате чего мы получаем готовую картинку, разделенную по слоям, но это еще не все, нам необходимо все оживить.
Шаг 3. JS
Нам осталась маленькая деталь, это подключения параллакса и его привязке к движению курсора мыши, для этого нам понадобится небольшой скрипт:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | $(window).on(‘mousemove’, function(e) { var w = $(window).width(); var h = $(window).height(); var offsetX = 0.5 — e.pageX / w; var offsetY = 0.5 — e.pageY / h;
$(«.holiday-face__item»).each(function(i, el) { var offset = parseInt($(el).data(‘offset’)); var translate = «translate3d(0px,» + Math.round(offsetY * offset) + «px, 0px)»;
$(el).css({ ‘-webkit-transform’: translate, ‘transform’: translate, ‘moz-transform’: translate }); }); }); |
В результате мы получаем интересную картинку. Которая будет отзывчивой на движение курсора.
Вот и все. Готово!
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.