SVG-анимация для появляющихся на странице элементов

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

Сложность

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

В одном из демонстрационных примеров, мы добавили видео с YouTube при помощи простого медиа-плеера Dplyr.

Давайте взглянем на разметку:

<div class="grid-pages">
	<div class="grid grid--vertical grid--current grid--style-1" data-path-cover="M 0,0 L 0,0 C 0,0 0,0 0,5 C 0,10 0,10 0,10 L 0,10 Z;M 0,0 L 0,0 C 0,0 5,0 5,5 C 5,10 0,10 0,10 L 0,10 Z;M 0,0 L 10,0 C 10,0 10,0 10,5 C 10,10 10,10 10.1,10 L 0,10 Z" data-duration="400">
		<div class="grid__column">
			<div class="grid__item">
				<!-- ... -->
			</div>
			<div class="grid__item" data-delay="75">
				
			</div>
		</div>
		<div class="grid__column">
			<!-- ... -->
		</div>
		<div class="grid__column">
			<!-- ... -->
		</div>
	</div>
	<div class="grid grid--vertical grid--style-1" data-path-cover="M 0,0 L 10,0 L 10,0 C 10,0 10,0 5,0 C 0,0 0,0 0,0 Z;M 0,0 L 10,0 L 10,0 C 10,0 10,5 5,5 C 0,5 0,0 0,0 Z;M 0,0 L 10,0 L 10,10 C 10,10 10,10 5,10 C 0,10 0,10 0,10 Z" data-duration="400">
		<!-- ... -->
	</div>
	<!-- other grids and nav -->
</div><!-- /grid-pages -->

Основной контейнер с классом grid-pages содержит сетку, которая работает в качестве определенных SVG путей. Мы добавили несколько атрибутов данных, которые мы можем использовать для настройки анимации. Обратите внимание, что все они также могут быть применены к отдельным элементам сетки, в которых будут перезаписаны соответствующие значения параметров, определенные в родительской сетке:

  • data-cover - SVG пути перекрывают или скрывают элемент
  • data-uncover - SVG пути открывают или отображают элемент
  • data-fill - SVG пути заливаются цветом
  • data-duration - время всей анимации
  • data-easing-in - смягчение первого шага
  • data-easing-out - смягчение последнего шага
  • data-delay - задержка анимации

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

ДЕМО СКАЧАТЬ

 

Перевод статьи Item Reveal Animations with SVG

Тэги: animateSVG

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.