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

Параллакс эффект. Плагин Simple Parallax Scrolling.

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

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

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

Что необходимо для реализации параллакс-скроллинг эффекта?

  1. Подключаем к нашему HTML-документу библиотеку jQuery и скачанный с сайта плагин – parallax.js.

  2. Выводим параллакс эффект на страницу с помощью атрибута – data. Добавьте в элемент HTML-файла, который хотите использовать — data-parallax=»scroll» и укажите путь к фотографии — data-image-src=»https://rpilot62.ru/wp-content/uploads/2018/06/42011.jpg», к которой хотите применить эффект.
  3. Скопируем набор стилей и добавим в наш файл style.css.
  4. Самое главное – это подобрать большого размера и качественные фотографии. Если у меня нет нужных фотографий, то я смело беру их с pixabay. Они бесплатны и их можно свободно использовать в коммерческих целях.

Перед заливкой на сервер у вас должна быть папка с фотографиями, папка со скачанными скриптами (jquery.min.js и parallax.js), а так же HTML файл и CSS стили.

Полный HTML-код:

style.css:

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

  • Создано 23.11.2017 10:00:00

  • Михаил Русаков

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так:

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

.

WHAT IS PARALLAX SCROLLING?

It’s a hot term in web design right now, but parallax scrolling is by no means a new thing. It’s a technique that was developed in traditional animation in the 1930s and involved a multiplane camera that moved different layers of artwork across the camera at different speeds to create the illusion of depth.

The same technique in a digital form then became popular in the 1980’s when 2D video-games started using it.

It began with the arcade side-scrollers Moon Patrol and Jungle Hunt, but quickly became a go-to technique for any 2D video game. Indeed, it’s a technique that is still often used today, especially in simple, browser-based games.

Essentially, parallax scrolling is a technique where background images move slower than foreground images. This creates an illusion of depth — things that are closer to us move faster, things that are further away move slower.

How is Parallax Scrolling used in web design?

In 2011, Nike launched a website called ‘Better World’. This website used HTML5, Javascript and CSS2 to create multiple layers that scrolled at different speeds. The effect was completely unique, and within a few days many web designers were eager to recreate the look and feel of this groundbreaking website.

At first, people used parallax scrolling everywhere simply because they could, but over time web designers began to approach it in a more nuanced fashion — as a tool to create a better user experience, a technique to help with storytelling on the web, and a way of using design that could help draw attention to different content. It’s a great technique to use when creating timelines, taking users on a journey, or when you really want users to engage with content in a very structured way. 

Now parallax scrolling is used to great effect on a wide variety of sites.

FIVE GREAT WEBSITES USING PARALLAX SCROLLING 

Parallax scrolling can be seen as a one-trick pony — a gimmick. However, used correctly and with a bit of thought parallax scrolling can add an extra dimension to a wide range of websites. 

As these examples show, parallax scrolling can bring a sense of fun, whimsy and playfulness to a website — but can be used equally well to create a sense of drama and the feeling of being taken on a journey when tackling more serious topics. 

Nintendo Game Boy — Happy 25th Birthday

This site uses parallax scrolling very effectively to recreate the feel of playing Tetris on an old gameboy. The effect is playful, as well as being a subtle nod to the animation techniques used in many of the old 2D Game Boy games. 

Добавить комментарий

Закрыть меню