Делаем красивый параллакс эффект летающих объектов за 5 минут

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

Простым языком, параллакс (parallax) - эффект, при котором скорость движения объектов на переднем и заднем фоне различается.

Наша задача: максимально быстро сотворить что-то вроде этого:




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

Шаг 1 - Рисуем объекты

Создадим 4 дива и зададим каждому свой класс:
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
Для каждого класса задаем position: fixed, начальное положение (left, top) и размер (width, height). Подбирайте на глаз, как вам больше нравится. Чуть ниже я выложу свой вариант. Не забываем про z-index, чтоб наши блоки не перекрывали основной контент страницы. 

Теперь самое интересное: форма. Я реализовывал летающие объекты блоками с бордер-радиусами. Кто не в теме: с помощью CSS можно задать баббл практически любой формы одним простым параметром: border-radius.

Свойство поддерживает от 1 до 4 наборов значений и разделение слешем.

border-radius: 5%; - задает скругление для всех 4 углов.
border-radius: 5% 6%; - задает скругление 5% для левого верхнего и правого нижнего угла, и 6% - для двух других.
border-radius: 5% 6% 7%; - 5% - для левого верхнего, 6% - для правого верхнего и левого нижнего, 7% - для правого нижнего
border-radius: 5% 6% 7% 8%; - поочередно для левого верхнего, правого верхнего, правого нижнего и левого нижнего.

Самое инересное кроется в разделении слешем. Оно позволяет задать эллиптические углы. Вот вам картинка с htmlbook, которая демонстрирует разницу:
разница между скруглениями

Но если вы думаете, что я предложу вам рисовать блоки вручную, то вы сильно ошибаетесь. Нам ведь нужно уложиться в 5 минут!)

Переходим сюда: https://9elements.github.io/fancy-border-radius/, рисуем блок нужно формы и копируем полученный набор параметров в border-radius, -webkit-border-radius и -moz-border-radius. Поддержку старых браузеров не забываем:)

Чтоб было по красоте, цвет зададим градиентами:
background: linear-gradient(130deg, #974382, #c24fa4); 
Первый параметр - угол, два других - конечные цвета градиента. Покрутите угол, чтоб блоки не казались одинаковыми.

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

По правилам перспективы, оптики и скандинавской мифологии:
  • Предметы на переднем плане движутся быстрее, чем на заднем.
  • Предметы вне фокуса (ближе или дальше) размываются.
Итак, первым двум дивам зададим filter: blur(5px), а двум другим - filter: blur(3px). При желании можно задать небольшую прозрачность (opacity: 0.7;). Про скорость поговорим чуть позже, когда займемся анимацией.

Итак, у вас должно получится что-то вроде этого:

результат баббл на css произвольной формы
Все стили в одном месте:
.c1 {
position: fixed;
right: 160px;
top: 676px;
z-index: -100;
width: 100px;
height: 100px;
background: linear-gradient(#6A2A88, #2d1871);
filter: blur(5px);
opacity: 0.7;
-webkit-border-radius: 21% 79% 57% 43% / 23% 41% 59% 77% ;
-moz-border-radius: 21% 79% 57% 43% / 23% 41% 59% 77% ;
border-radius: 21% 79% 57% 43% / 23% 41% 59% 77% ; }
.c2 {
position: fixed;
left: 99px;
top: 940px;
z-index: -100;
width: 200px;
height: 200px;
background: linear-gradient(100deg,#843984, #4d247f);
filter: blur(5px);
opacity: 0.7;
-webkit-border-radius: 51% 49% 36% 64% / 57% 62% 38% 43%;
-moz-border-radius: 51% 49% 36% 64% / 57% 62% 38% 43%;
border-radius: 51% 49% 36% 64% / 57% 62% 38% 43%;
}
.c3 {
position: fixed;
left: 1602px;
top: -150px;
z-index: -100;
width: 100px;
height: 100px;

background: linear-gradient(90deg, #883c84, #532480);
filter: blur(1px);
-webkit-border-radius: 40% 60% 61% 39% / 56% 37% 63% 44%;
-moz-border-radius: 40% 60% 61% 39% / 56% 37% 63% 44%;
border-radius: 40% 60% 61% 39% / 56% 37% 63% 44%;
}
.c4 {
position: fixed;
left: 212px;
top: 480px;
z-index: -100;
width: 100px;
height: 100px;

background: linear-gradient(130deg, #974382, #c24fa4);
filter: blur(1px);

-webkit-border-radius: 49% 51% 57% 43% / 44% 46% 54% 56% ;
-moz-border-radius: 49% 51% 57% 43% / 44% 46% 54% 56% ;
border-radius: 49% 51% 57% 43% / 44% 46% 54% 56% ;
}

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

Пришло время заняться анимацией.

Шаг 2 - Параллакс эффект

Раз уж статья называется "parallax за 5 минут", не будем сильно мудрить и воспользуемся готовым решением.

Я буду использовать библиотеку rellax.js (сайт | github), ну и jQuery, куда без него.

Скачайте библиотеки и подключите в файле проекта. Если ты молодец и используешь npm, воспользуйся командами:
 npm install jquery --save
npm install rellax --save

Основная причина, по которой я использую rellax.js - простота. Для того, чтоб добавить эффектную анимацию достаточно написать пару строк:
$(document).ready(function(){
var c1 = new Rellax('.c1', {
speed: 5
});
var c2 = new Rellax('.c2', {
speed: 8
});
var c3 = new Rellax('.c3', {
speed: -4
});
var c4 = new Rellax('.c4', {
speed: -7
});
});

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

Готово! Сверяемся с секундомером.

Напоследок пара советов:
  • Не забывайте про адаптивность. Тестируйте анимацию при разных разрешениях экрана. В мобильной версии этот эффект вообще лучше отключить. Иначе основной контент страницы будет перекрываться.
  • Четко определите для себя "слои", на которых будут располагаться элементы. Скорость и размытие элементов на слое должны совпадать или отличаться незначительно.
  • Экспериментируйте с перекрытиями элементов: пусть элементы на переднем фоне накладываются на фоновые, "обгоняют" их. Это добавит глубину.
  • Не используйте много элементов, это рассеивает внимание.
  • Ознакомьтесь с документацией parallax.js на гитхабе.

К портфолио →