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

 

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

Ресурсы, используемые:

  • Snap.svg сервис который оживил элементы SVG.
  • Иконки из нашей библиотеки взяты из сервиса Nucleo.
  • Изображения взяты из ресурса Unsplash.

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

Шаг 1. HTML

HTML структурирована из 3-х основных элементов: неупорядоченный список (ul.cd-slider), содержащий слайды, упорядоченный список (ol.cd-slider-navigation) для навигации слайдера, и div.cd-svg-cover, используется для создания анимированных форм, когда вы переключаетесь с одного слайда к следующему.

С разметкой мы разобрались, как вы заметили-ничего сложного в этом нет, давайте перейдем к следующему шагу, в котором мы расскажем как стилизовать данный слайдер.

Анимированный слайдер для сайта

Шаг 2. CSS

По умолчанию все слайды имеют непрозрачность: 0, в абсолютном положении и находятся один под одним (вверху: 0 и влево: 0). .Visible  класс добавляется к выбранному слайду, чтобы сделать его видимым (непрозрачность: 1).

Шаг 3. JS

Для анимации SVG, мы оживили атрибут элемента внутри контейнера с классом .cd-svg-container. Прежде всего, мы должны были определить различные стили анимации (в нашем случае пять шагов для анимации от первого слайда к следующему и обратно); в основном мы должны были создать 10 различных элементов SVG при переходе. как показано на следующем скриншоте, взятой из файла Illustrator (обратите внимание, что некоторые шаги кажутся ненужными, но все они содержат начало для анимации).

illustrator-close-up

После того, как пути были определены, мы добавили к .cd-svg-cover в data-stepn (по одному на каждом шагу), атрибут определенного пути (легко восстановить его JavaScript).

Затем мы использовали animate()  метод, предоставленный Snap.svg, чтобы  оживить анимацию:

В результате у нас получилась замечательная анимация при переходе к различным элементам средствами переходов по навигации.

Вот и все. Готово!

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