10 фрагментов CSS и JavaScript для создания эффекта прокрутки параллакса

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

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

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

1. «Великое падение » Си Джей Гэммона

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

По большей части это свидетельство того, что возможно в современной веб-разработке. Изучение элемента холста дает вам большой контроль над вашим дизайном.

См. Pen The Great Fall CJ Gammon

2. Параллакс прокрутки в CSS от Себастьяна Шеписа

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

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

См. Эффект параллакса прокрутки Pen CSS от Себастьяна Шеписа

3. Simple Image Tag Parallax от Ренана Брено

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

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

См. Параллакс тега Pen Simple Image от Ренана Брено

4. Параллакс и фиксированный фон изображения

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

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

См. Pen #Maincode Hackdays от chaobu

5. CSS Parallax от Paulo Cunha

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

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

См. Parallax Pen CSS от Paulo Cunha

6. Parallax Design от Кэти Роджерс

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

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

См. Дизайн Pen Parallax от Кэти Роджерс

7. Параллакс прокрутки фонового изображения от Rich Howell

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

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

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

См. Паралакс фонового изображения с прокруткой пера от Рича Хауэлла.

8. Фон звездного параллакса от Saransh Sinha

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

Анимация выполняется с помощью CSS, но этот фрагмент использует Sass и Compass, поэтому было бы полезно понять, прежде чем вносить изменения.

См. Фон Pen Parallax Star в CSS от Saransh Sinha.

9. Canvas Parallax Skyline от Джека Ругайла

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

Естественно, для анимации требуется JavaScript, потому что это довольно сложная идея. Но это также не то, что вы найдете на многих веб-сайтах, поэтому вы также не будете копировать его на свой сайт. Но как концепция параллакса, это действительно интересно.

Взгляните на рисунок Parallax Skyline от Pen Canvas от Джека Ругайла.

10. Сломанный стеклянный фильтр от Bajjy Xilo

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

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

См. CSS-фильтр Pen BrokenGlass от Bajjy Xilo.