Как создать каскадную анимацию, используя SCSS

Движенья постигая красоту © А. Макаревич

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

Когда-нибудь наводили мышку или кликали на элемент, чтобы посмотреть на его преображение ещё раз? Для достижения такого «вау-эффекта» нужна оригинальная анимация. В сети есть целые страницы, наполненные примерами анимация для кнопок.

Другой пример для полёта фантазии, появление элементов на странице. Тут нам может пригодиться каскадная анимация. Можно конечно явить миру все элементы разом, это просто и вместе с тем скучно. Появление группы элементов друг за другом, смотрится гармонично и интересно. В качестве основы для появления элемента, можно использовать изменение прозрачности от 0 до 1, увеличение или уменьшение элемента, а также линейное движение в плоскости экрана.

Инструкция к применению

Для начала создадим родительский элемент и поместим в него несколько дочерних.

<div class="wrapper"> <div class="item"></div> <div class="item"></div> <div class="item"></div>
</div>

Приправим все стилями, чтобы было красиво.

.wrapper { width: 240px; margin: 10px auto;
} .item { width: 100%; height: 80px; margin: 4px 0; background-color: #ffd800;
}

Вот что у нас получилось:

Прямоугольники цвета желтого школьного автобуса
Прямоугольники цвета желтого школьного автобуса

Применим анимацию к элементу. Направление анимации alternate означает, что по нечетным итерациям цикла анимация проигрывается в прямом направлении, а по четным — в обратном. Длительность одного цикла составляет 1 секунду. Число повторений анимации бесконечно. Функция ease-in-out отвечает за ускорение элемента, с какой интенсивностью скорость возрастает в начале движения, с такой же интенсивностью происходит уменьшение скорости к концу анимации.

@keyframes movement{ 0%{ transform: translateX(0px); } 100%{ transform: translateX(60px); }
} ... .item{ ... animation: movement 1s infinite alternate ease-in-out;
}
Возвратно-поступательное движение
Возвратно-поступательное движение

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

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

... .item{ ... $itemDelay: 0.1s; @for $i from 2 through 3 { &:nth-child( #{$i} ){ animation-delay: $itemDelay * $i; } }
}

Полюбуемся результатом:

Вот такие нестабильные позвонки у нас получились
Вот такие нестабильные позвонки у нас получились

Движение — жизнь.

Пусть на вашем пути чаще встречаются удобные и нескучные сайты.

Читайте так же:

  • myTarget позволил загружать продуктовый фид Facebook AdsmyTarget позволил загружать продуктовый фид Facebook Ads В рекламной платформе myTarget появилась возможность загрузки продуктового фида из нового внешнего источника – Facebook Ads. Функциональность позволит сэкономить время на настройке рекламы за счет автоматической адаптации фидов в кампаниях с динамическим ремаркетингом.  Для […]
  • В Onward Mobility помнят, что обещали вернуть марку BlackBerry на рынок смартфоновВ Onward Mobility помнят, что обещали вернуть марку BlackBerry на рынок смартфонов Уже почти год права на использование бренда BlackBerry принадлежат американской компании Onward Mobility. В апреле она опубликовала пресс-релиз, в котором пообещала в первой половине 2021 года выпустить на рынки Северной Америки и Европы смартфон BlackBerry с ОС Android, аппаратной […]
  • В Google Analytics 4 теперь можно настраивать время ожидания для сеансовВ Google Analytics 4 теперь можно настраивать время ожидания для сеансов Google добавил возможность настраивать время ожидания для сеансов в Google Analytics 4. New in Google Analytics 4: Adjust session timeoutConfigure how long it takes a session to timeout after a user stops interacting with the website. And how long a user has to engage with site […]
  • Xiaomi представила Poco X3 Pro в РоссииXiaomi представила Poco X3 Pro в России Компания Xiaomi и её подшефный бренд Poco представила смартфон Poco X3 Pro для российского рынка. Для международного рынка он были представлены чуть больше двух недель назад. В Европе Poco X3 Pro предлагается по цене от 199 евро.  В России предлагаются такие […]