Параллакс эффект. Плагин 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 class="parallax-window" 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 class="parallax-window" 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 class="parallax-window" 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 class="parallax-window" 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 class="parallax-window" 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 class="parallax-window" 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
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.