Всичко в перспектива: Чиста CSS паралела и други ефекти на превъртане

Използвайте тези Codepens:

Основен паралекс
Паралела с фиксиран обект

Въпреки твърденията, че „паралаксът е мъртъв“, ефектът е много жив и здрав - и завладяващ - когато се приложи правилно. За съжаление, девет пъти от десет, реализацията се зарежда в Javascript. Играта със слушатели на превъртане на събития е рискован бизнес за изпълнение, а промяната на DOM директно задейства ненужни повторни рендери, причинявайки накъсани анимации и лепкави превъртания. Правилният паралакс може да бъде изтеглен с помощта на JS. Ето отлична статия за това как трябва да се направи:

Но за по-прости анимационни превъртания, използването на чист CSS е безупречен и ефективен подход.

Основна настройка

Като първи пример ще създадем страница с заглавие на паралакса и статично съдържание на страницата. Тъй като ние се измъкваме от Javascript, нямаме достъп до позицията на превъртане на прозореца и не ни е нужна! Ключът към оттеглянето на ефекта е да се възползвате от перспективата. Ще създадем 2 слоя съдържание. Съдържанието, което искаме да превъртаме по-бавно, ще бъде поставено „по-далеч“ от потребителя по z-оста. Това ще принуди браузъра да извърши всички тежки повдигания за нас.

Ето основното маркиране:

  
    

функция      
    

Съдържание на сайта

  

Нека да извадим CSS. Трябва да кажем на браузъра да се възползва от перспектива по оста z. Правим това, като добавим свойството на перспективата към нашия клас обвивка:

перспектива: 1px;

По-голямата перспективна стойност ще доведе до по-голяма разлика в скоростите на превъртане между слоевете.

След това принуждаваме опаковката да заеме 100% от прозореца на браузъра и настройваме overflow-y на автоматично. Това позволява на съдържанието в опаковката да се превърта както обикновено, но скоростта на превъртане за потомците вече ще бъде относителна към перспективната стойност на обвивката:

.wrapper {
  височина: 100vh;
  overflow-x: скрит;
  overflow-y: автоматично;
  перспектива: 1px;
}

Първият div ще съдържа съдържанието ни в заглавката. Фоновото изображение, приложено към псевдо елемент, ще бъде поставено на един пиксел „далеч“ от потребителя на z-оста, докато съдържанието ще бъде на ниво с останалата част от страницата и ще се превърта с нормалната скорост.

Нищо твърде специално не се случва в .section класа, приложен към заглавката. Той определя височината и форматира съдържанието. Ето CSS:

.секция {
  височина: 100vh;
  дисплей: гъвкав;
  подравняване-елементи: център;
  обосновка-съдържание: център;
  размер на шрифта: 48px;
  цвят: бял;
}

Цялата доброта на паралакса се случва в псевдо елемента:

.parallax :: след {
  съдържание: "";
  позиция: абсолютна;
  отгоре: 0;
  вдясно: 0;
  дъно: 0;
  вляво: 0;
  трансформация: translateZ (-1px) скала (2);
  размер на фона: 100%;
  z-индекс: -1;
  background-image: url (някаква връзка към някое изображение);
}

Елементът псевдо се поставя зад съдържанието на заглавката. translateZ (-1px) определя разстоянието на слоя от потребителя по оста z.

Тъй като преместваме слоя допълнително назад, съдържанието изглежда по-малко (помислете какво се случва, когато преместите обект далеч от вас). За да отчитаме това, трябва да мащабираме слоя обратно до размера, използвайки мащаб (2).

Ако вашата перспектива е зададена на 1px, формулата за мащабиране на слоевете до техния размер по подразбиране е: 1 + (преведете Z * -1) / перспектива.

В нашия случай, преводаZ (-2px) ще изисква скала (3) и така нататък ...

Добавете малко статично съдържание под заглавката и ще имате красив паралакс ефект, без да е необходим JS!

Ето линк към Codepen за този пример.

Сега за забавната част: Паралела с фиксиран обект

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

Исках един куп SVG лего тухли да се разпадне с различна скорост, докато потребителят превърта моята страница. След като се забавлявах с JS за известно време, разбрах, че този ефект може да се постигне с чист CSS - и да бъда гладко гладък в това!

Идеята е да се създадат отделни слоеве от обекти в основния контейнер, всеки с различна стойност translateZ (прочетете: скорост на превъртане). Докато реализирах това, аз бързо разбрах, че при превеждането и мащабирането на обектите нямах начин да проследя техните x и y позиции (те биха се променили спрямо стойността на обекта translateZ). За да разреша това, увих всеки обект в прозрачен контейнер, който пасва на целия екран. След това бих могъл да позиционирам обекта точно в обвивката и да приложа translateZ и мащаба върху обвивката вместо самия обект.

Необходим е само един клас .wrapper за определяне на размера за всички обекти:

.object-wrapper {
  позиция: абсолютна;
  отгоре: 0;
  вдясно: 0;
  дъно: 0;
  вляво: 0;
  фон: няма;
  обосновка-съдържание: център;
}

След това могат да се определят различни скорости и да се прилагат към опаковките на обекти:

.speed-1 {
  трансформация: translateZ (-1px) скала (2);
}
.speed-2 {
  преобразуване: translateZ (-2px) скала (3);
}
.speed-3 {
  трансформация: преведе Z (-3px) скала (4);
}

Ето Codepen, демонстриращ паралела с фиксиран обект:

Pure CSS предлага свят от възможности за анимация на съдържание по отношение на позицията на превъртане - и най-добрата част е, ако изхвърлите JS, почти невъзможно е да объркате производителността!

Когато става дума за изпълнителен паралакс, наистина става въпрос за перспектива.