Параллакс

Модный веб: добавляем эффект параллакса на веб-страницу

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

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

Простой способ — параллакс в шапке сайта

Самый простой способ что-то добавить на страницу — использовать готовое решение. В нашем случае мы будем использовать простой скрипт parallax.js — автор выложил исходный код на Гитхаб и объяснил, как им пользоваться.

Скачиваем оптимизированную минимальную версию parallax.min.js и подключаем через тег script :

Ещё нам понадобится jQuery — без него скрипт работать не будет. Также мы скачали картинку с сервиса Unsplash, чтобы использовать её для фона.

Чтобы добавить эффект на сайт, нам теперь достаточно пометить блок с картинкой, которая останется на месте. Для этого картинке добавляем свойство data-parallax=»scroll», а остальное сделает подключённый скрипт. Чтобы было что прокручивать ниже, добавим на страницу текст из статьи про то, как работает алгоритм автомобильного навигатора.

           
КОД
 
Журнал Яндекс Практикума
 
 
Что ещё учитывает навигатор 
Чтобы алгоритм оставался простым и работал только со временем, все остальные параметры дорог тоже привязывают ко времени. Покажем, как это работает, на паре примеров.
 
Комфорт. Если нам нужно построить не самый быстрый, а самый комфортный маршрут, то мы можем отдать предпочтение автомагистралям и дорогам с несколькими полосами — на них обычно и асфальт получше, и резких поворотов поменьше. Чтобы навигатор выбирал именно такие дороги, им можно присвоить коэффициент 0,8 — это виртуально сократит время на дорогу по ним на 20%, а навигатор всегда выберет то, что быстрее.
 
С просёлочными и грунтовыми дорогами ситуация обратная. Они редко бывают комфортными, а значит, им можно дать коэффициент 1,3, чтобы они казались алгоритму более долгими и он старался их избегать. А лесным дорогам можно поставить коэффициент 5 — навигатор их выберет, только если это единственная дорога то точки назначения.
 
Сложность маршрута и реальное время. Маршрут из А в Б почти никогда не бывает прямым — на нём всегда есть повороты, развороты и съезды, которые отнимают время. Чтобы навигатор это учитывал, в графы добавляют время прохождения поворота — либо коэффициентом, либо отдельным параметром. Из-за этого алгоритм будет искать действительно быстрый маршрут с учётом геометрии дорог.
 
Пробки. Если есть интернет, то всё просто: навигатор получает данные о состоянии дорог и добавляет разные коэффициенты в зависимости от загруженности. Иногда навигатор ведёт дворами, когда трасса свободна — это не ошибка навигатора, а его прогноз на время поездки: если через 10 минут в этом месте обычно собираются пробки, то там лучше не ехать, а заранее поехать в объезд.
 
Если интернета нет, то алгоритм просто использует усреднённую модель пробок на этом участке. Эта модель скачивается заранее и постоянно обновляется в фоновом режиме.
 
  

/* настройки шапки страницы */ .head < /* высота картинки с параллаксом */ min-height: 420px; >/* Настройки заголовков в шапке */ /* заголовок первого уровня */ .head h1 < /* размер шрифта */ font-size: 80px; /* выравнивание по центру */ text-align: center; /* тень текста */ text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7); /* отступ сверху */ padding-top:50px; /* цвет */ color: yellow; >/* заголовок второго уровня */ .head h2 < font-size: 44px; color: yellow; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7); text-align: center; >/* настройки блока с основным содержимым */ .content < /* максимальная ширина */ max-width: 920px; /* отступы по краям блока */ padding: 20px; margin: 0 auto; >/* настройки абзаца внутри блока с содержимым */ p< /* размер шрифта */ font-size: 24px; >

Варварский способ — настройка стилей вручную

CSS поддерживает ещё один способ создать такой эффект — зафиксировать изображение и не дать его скроллить. Для этого есть свойство background-attachment:fixed — то есть фоновая картинка намертво вклеивается в свои координаты и никуда не двигается ни при каком скролле.

• Добавляем два блока — один будет с зафиксированной картинкой, второй с текстом. Но пока что не кладём картинку внутрь первого блока, он должен быть пустым.
• Блоку для картинки присваиваем отдельный класс CSS. Блок всё ещё пустой.
• В присвоенный класс добавляем свойство background-image, в которое прописываем путь до нужной нам картинки.
• С помощью магии CSS делаем так, чтобы блок занимал какую-то высоту и ширину, чтобы сквозь него просвечивала нужная картинка.
• Запрещаем картинке двигаться с места и подгоняем её масштаб под размер блока.
• Для текстового блока указываем, что его высота должна равняться высоте блока.

В итоге у нас получится два новых стиля:

/* настройки второго параллакса */ .parallax-img < /* фоновая картинка */ background-image: url("map.png"); /* высота прокрутки картинки */ min-height: 500px; /* привязываем фоновую картинку, чтобы она не двигалась */ background-attachment: fixed; /* размещаем её по центру */ background-position: center; /* выключаем повторения картинки */ background-repeat: no-repeat; /* подгоняем масштаб картинки под размер блока, в котором она лежит */ background-size: cover; >.parallax-text < /* ограничиваем высоту текста размером блока, в котором он лежит */ height:block; >

Добавим на ту же страницу в блок » content » новый раздел и карту с автомобильным маршрутом из статьи:

Как построить маршрут по всей России
 
Если нам нужно построить маршрут из Брянска в Тулу, то с точки зрения компьютера это безумно сложная задача: ему нужно перебрать десятки тысяч улиц и миллионы перекрёстков, чтобы понять, какой путь выбрать. С этим плохо справляется даже обычный компьютер, не говоря уже о телефоне.
 
Если мы в Яндекс Картах построим такой маршрут, то навигатор нам предложит сразу 4 варианта:
 
Но мы не ждали полчаса, пока сервер на той стороне посчитает все перекрёстки, а получили результат через пару секунд. Хитрость в том, что алгоритм использует уже заранее просчитанные варианты маршрутов и подставляет их для ускорения.
 
Например, если мы поедем в Тулу не из Брянска, а из Синезёрок, то поменяется только начальный маршрут по трассе М3, а всё остальное останется прежним.
 
Получается, что навигатору не нужно всё пересчитывать — он находит только ключевые точки пути, а маршрут между ними уже просчитан до этого. Этот приём работает и при перестроении маршрута во время движения: навигатор смотрит, как нужно поменять путь, чтобы вернуть вас на уже известную дорогу
 

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

На базе веб-технологий делают всё — от сложного софта до высокобюджетных игр. Изучите технологии и начните карьеру в ИТ. Старт бесплатно. Попробуйте, вдруг вам понравится.

Источник

How TO — Parallax Scrolling

Learn how to create a «parallax» scrolling effect with CSS.

Parallax

Parallax scrolling is a web site trend where the background content (i.e. an image) is moved at a different speed than the foreground content while scrolling. Click on the links below to see the difference between a website with and without parallax scrolling.

Note: Parallax scrolling does not always work on mobile devices/smart phones. However, you can use media queries to turn off the effect on mobile devices (see last example on this page).

How To Create a Parallax Scrolling Effect

Use a container element and add a background image to the container with a specific height. Then use the background-attachment: fixed to create the actual parallax effect. The other background properties are used to center and scale the image perfectly:

Example with pixels

/* Set a specific height */
min-height: 500px;

/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
>

The example above used pixels to set the height of the image. If you want to use percent, for example 100%, to make the image fit the whole screen, set the height of the parallax container to 100%. Note: You must also apply height: 100% to both and :

Example with percent

.parallax <
/* The image used */
background-image: url(«img_parallax.jpg»);

/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
>

Some mobile devices have a problem with background-attachment: fixed . However, you can use media queries to turn off the parallax effect for mobile devices:

Example

/* 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;
>
>

Источник

Параллакс эффект для фона сайта на чистом CSS

Приветствую на страницах сайта WebDevTips. Сегодня покажу, как за 2-3 минуты сделать параллакс эффект для заднего фона вашего сайта. Писать будем на чистом CSS. Без использования JS, или каких либо библиотек. Наверняка вы часто встречали этот эффект. Это один из элементов wow-дизайна, который не только красиво выглядит, но и повышает конверсию.

Кстати, еще одним элементом wow-дизайна является видео фон для сайта. Если вы еще не знаете как поставить видео на фон вашего сайта — рекомендую ознакомится с моей статьей.

Видео:

Пример параллакс эффекта для фоне:

This is parallax

Вот и сам код:

 This is parallax .parallax < background-image: url(bg-image.jpg); height: 500px; background-attachment: fixed; display: flex; justify-content: center; color: #ffffff; font-size: 60px; align-items: center; position: relative; >.parallax .mask < position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,.6); z-index: 2; >.parallax h1

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

Вот все файлы с полным кодом из видео урока — скачать.

Спасибо, что прочитали! Если у вас остались любые вопросы — задавайте их в комментариях, буду рад ответить)

Буду очень благодарен, если вы подпишитесь на мой Telegram-канал , или YouTube.

Full Stack разработчик, Frontend: Vue.js (2,3) + VueX + Vue Router, Backend: Node.js + Express.js. Раньше работал с РНР, WordPress, написал несколько проектов на Laravel. Люблю помогать людям изучать что-то новое)

Источник

Как добавить параллакс-эффект к фоновому изображению

Откройте для себя, как создать красивый и динамичный параллакс-эффект для фонового изображения на сайте, используя HTML, CSS и JavaScript!

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

Шаг 1: Создание HTML-структуры

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

        
 
Мой крутой сайт с параллакс-эффектом
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
 
 
   

Шаг 2: Добавление стилей CSS

Теперь добавьте стили CSS для создания параллакс-эффекта. Сначала добавьте стили для фонового изображения и контейнера.

.parallax-container < position: relative; background-image: url("path/to/your/background-image.jpg"); height: 100vh; /* Высота контейнера */ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; >.content

Шаг 3: Добавление JavaScript для эффекта параллакса

Наконец, добавьте небольшой код JavaScript, чтобы создать параллакс-эффект при прокрутке страницы.

window.addEventListener('scroll', function() < const parallaxContainer = document.querySelector('.parallax-container'); let scrollPosition = window.pageYOffset; parallaxContainer.style.backgroundPositionY = scrollPosition * 0.5 + 'px'; >);

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

🎉 Теперь у вас есть красивый параллакс-эффект для фонового изображения на вашем сайте!

Не забудьте проверить школу по веб-разработке, которая хорошо учит «Веб-разработка»!

Источник