Рубрики
Без рубрики

Создание раскрытия эффектов на прокрутку

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

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

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

Посмотреть это на Кодепен Отказ

Я покажу вам, как создать этот эффект с CSS и Анимировать на прокрутке (AOS) , библиотека JavaScript для анимационных элементов на прокрутке, как пользователь вводит в систему просмотра.

Начиная

Давайте начнем с добавления анимации в библиотеке прокрутки к проекту. Включите AOS.css в ярлык:

И aos.js до закрытия ярлык:

После добавления, инициализируйте AOS:

AOS.init();

Создание раскрытия блока

Сначала мы создадим раскрытие блока для выявления текста внизу. Мы будем захватывать текст от Doggo Ipsum Генератор Lorem Ipsum от Doggo Lingo.


  

  
Maximum borkdrive

.REVEAL-ДЕРЖАТЕЛЬ Класс – это контейнер для элемента твердого цвета блока и текста. Стайлинг для этих классов:

.reveal-holder {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.reveal-block {
  position: absolute;
  top: 0;
  width: 100%;
  height: 101%;
  background: white;
}

Это для блока, чтобы покрыть и показать элемент правильно. Имея высоту .reveal-Block Урок до 101% важен здесь:

Установка высоты до 100% приводит к результатам в блоке «Покрытие» не полностью над изображениями после размера окна. Иметь Переполнение Свойство CSS, набор для скрытых для .REVEAL-ДЕРЖАТЕЛЬ Класс помогает предотвратить что-либо вне контента элемента от отсечения.

Использование CSS-переходов

Анимации устанавливаются с помощью Data-aos атрибут. Например, чтобы выявить элемент справа, добавьте атрибут на .reveal-Block Класс в HTML:

И CSS:

[data-aos="reveal-right"] {
  transform: scaleX(1);
  transform-origin: 100% 0%;
  transition-property: transform;
  transition-delay: 0.5s;
}

[data-aos="reveal-right"].aos-animate {
  transform: scaleX(0);
}

трансформировать Свойство CSS использует Scalex () Функция для .reveal-Block элемент для того, чтобы блок для изменения изменения размера при анимировании. Преобразование - происхождение Свойство устанавливает точку преобразования, которое в этом случае находится на уровне 100% 0% или вправо. Это то, что заставляет блок анимировать, уменьшая размер. Переход - свойство Устанавливает эффект перехода для применения и Задержка перехода Устанавливает переход, чтобы подождать на основе набора значений.

Добавьте эти варианты в Aos.init () Функция, чтобы сделать анимацию играть один раз:

AOS.init({
  once: true
});

Анимация теперь будет играть один раз на свиток! Вот как это должно выглядеть так далеко:

Чтобы добавить этот же эффект на изображения, это аналогичный процесс. Замените текст изображение в HTML:


  

  Pomeranian

Чтобы сделать выявить эффект скользить влево справа, отредактируйте Преобразование - происхождение до 0% 100%:

[data-aos="reveal-left"] {
  ...
  transform-origin: 0% 100%;
  ...
}

Анимация псевдоэлементов

Мы будем использовать псевдоэлементы к .reveal-Block Класс для создания более стильной раскрытия анимации.

Начните с модификации CSS для .reveal-Block сорт:

.reveal-block {
  position: absolute;
  top: 0;
  width: 100%;
  height: 101%;
  background: white;
}

.reveal-block::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: lightgray;
  transition-property: transform;
  transition-duration: 0.5s;
}

:: До Псевдоэлемент – это свой собственный элемент, действующий как другой .reveal-Block Но может быть установлен своими собственными свойствами, такими как цвет фона или позиционирование.

Добавить .right класс до .reveal-Block вот так:

Это поможет, когда с анимацией с псевдоэлементами. CSS является:

.reveal-block.right::before {
  transform: scaleX(0);
  transform-origin: 0% 100%;
}

.reveal-block.right.aos-animate::before {
  transform: scaleX(1);
}

Это результат:

Выглядит отлично! Все, что осталось, – это скрыть элементы, появляющиеся перед прокруткой. Для этого мы добавим атрибут Data-AOS для .REVEAL-ДЕРЖАТЕЛЬ сорт:

...

И сопровождающие CSS:

[data-aos="reveal-item"] {
  visibility: hidden;
  transition-property: visibility;
  transition-duration: 0s;
}

[data-aos="reveal-item"].aos-animate {
  visibility: visible;
}

Упаковка

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

Живая демонстрация доступна на Кодепен . Я также создал Репозиторий GitHub с кодом. Счастливое кодирование!

Оригинал: “https://dev.to/kathykato/creating-reveal-effects-on-scroll-31o6”

Читайте ещё по теме: