Как обогатить дизайн вашего сайта с помощью параллакс-прокрутки.

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

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

Ч такое Parallax Scrolling?

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

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

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

10 отличных примеров параллакс-прокрутки

сайты с параллакс-прокруткой невероятно увлекательны, интересны и час рассказывают исрию. Вот некорые из наших любимых примеров через :

1 Победите БОКО.

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

2 Роковая женщина

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

Здесь вы можете увидеть, как изображения, фон и даже отдельные буквы могут быть настроены на разные прокрутки параллакса.

3 Pixages

используется плавная прокрутка с параллаксом.

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

4 Пивной лагерь

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

Именно э решили сделать в , чбы помочь пользователям сосредочиться на самых важных элементах веб-сайта.

5 PORSCH evolution

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

6 ToyFight

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

7 Вино Freakshow

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

8 Говорил

Творческое использование параллакс-прокрутки попало в список по множеству причин.

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

9 Садовая студия

сайт примечателен не своим "вау-факром", а тем, ч он демонстрирует, как простая и понятная функция параллакс-прокрутки может улучшить дизайн веб-сайта.

10 Дэйв Гамаш

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

Как создать параллакс-прокрутку в CSS

Вас вдохновили вывести свой веб-сайт на новый уровень с помощью параллакс-прокрутки?

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

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

Мед 1. Создайте элемент-контейнер и установите высоту изображения.

Вы будете использовать э свойство для создания эффекта прокрутки параллакса: background-attachment: fixed.

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

разделяет базовый фрагмент кода CSS для создания эффекта параллакса:

    .parallax {   background-image: url("image.png");     /* Set the height */   height: 400px;     /* Create a parallax effect */   background-attachment: fixed;   background-position: center;   background-repeat: no-repeat;   background-size: cover; } 

Установка максимальной высоты

В качестве альтернативы, вмес го, чбы устанавливать определенную высоту в пикселях, вы также можете установить высоту на 100% (ч гда соответствует высоте изображения).

В вашем HTML-коде используется следующий элемент контейнера:

  <div class="parallax"></div> 

Вы можете протестировать код и поиграть с CSS-прокруткой параллакса на .

Повышение отзывчивости мобильных устройств

Как лько вы начнете экспериментировать с этим кодом, вы быстро поймете, ч background-attachment: fixed час вызывает проблемы с мобильными версиями вашего веб-сайта.

Э легко исправить, добавив дополнительный код из :

  /* Turn off parallax scrolling for all tablets and phones. Increase/decrease the pixels if needed */ @media only screen and (max-device-width: 1366px) {   .parallax { background-attachment: scroll;   } } 

Мед 2: создайте оболочку страницы и статический раздел

предоставляет альтернативный способ создания эффекта прокрутки параллакса.

  <main class="wrapper">   <section class="section parallax img1">     <h1>Parallax BG1</h1>   </section>   <section class="section static">     <h1>YES</h1>   </section>   <section class="section parallax img2">     <h1>GRUMPY</h1>   </section> </main> 

Обертка содержит перспективные и прокрутки свойства для всей страницы, в время как статическая секция является фоном для демонстрации параллакса.

Parallax добавляет к фоновому изображению псевдоэлемент :: after, а также элемент преобразования, необходимый для эффекта параллакса.

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

Код CSS, необходимый для достижения эго эффекта, немного длиннее.

Вот ч вам нужно включить и почему:

  .wrapper {   height: 100vh; 

При масштабировании изображений добавляется горизонтальная полоса прокрутки, и вам придется отключить overflow-x, чбы избавиться от нее.

   overflow-x: hidden;   /* Enable scrolling on the page. */   overflow-y: auto; 

Следующие 2 пикселя относятся к смоделированному рассянию между преобразованными объектами и чкой обзора.

    perspective: 2px; } .section { 

Положение установки : относительное; создает абсолютное позиционирование между дочерними и родительскими элементами.

  position: relative; 

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

    height: 100vh;     /* For text formatting. */   display: flex;   align-items: center;   justify-content: center;   color: blue;   text-shadow: 0 0 5px #666; } .parallax::after { 

Здесь вы устанавливаете положение и ображаете детали для псевдоэлемента.

    content: " ";   position: absolute;   top: 0;   right: 0;   bottom: 0;   left: 0; 

Затем вы должны переместить псевдоэлемент подальше от области просмотра, а затем снова масштабировать его, чбы заполнить область просмотра.

  transform: translateZ(-1px) scale(1.5); 

Размер фона заставляет изображение заполнять весь элемент.

    background-size: 100%; 

Z-index делает так, ч одноуровневые элементы не перекрываются.

     z-index: -1; }   .static {   background: lightblue; } 

Наконец, вы устанавливаете фоновые изображения.

  .img1::after {   background-image: url('image1.jpg'); }   .img2::after {   background-image: url('image2.jpg'); } 

Как получить максимум от параллакс-прокрутки

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

Размышляя о м, как спроектировать свой веб-сайт, чбы в полной мере использовать параллакс-прокрутку, не забудьте рассказать исрию, сделать ее интересной и включить призыв к действию.

Кроме го, не используйте его лько ради его использования! Прокрутка с параллаксом – отличный инструмент для повышения вовлеченности, но для достижения оптимального эффекта его нужно использовать тактично.

Исчник записи:

• статьи о wordpress, web