Автор

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

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


Во время поиска в Интернете для вдохновения мы столкнулись с красиво оформленным веб-сайтом Honda HR-V. Когда вы переходите от раздела к другому, переход украшается анимированной фигурой, созданной с помощью элемента <canvas>.

 

ДЕМО
ИСХОДНИКИ

 

Мы решили создать что-то подобное, но вместо того, чтобы использовать холст, мы играли с SVG. Кроме того, вместо создания вертикального макета, который требует принудительной прокрутки для просмотра анимации, мы превратили весь ресурс в ползунок героя.

Используемые ресурсы:

  1. Snap.svg для анимации элементов SVG.
  2. Иконки из библиотеки Nucleo.
  3. Изображения из Unsplash.

 

Создание структуры

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

<section class="cd-slider-wrapper">
<ul class="cd-slider">
<li class="visible">
<div>
<h2>Animated SVG Slider</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, explicabo.</p>
<a href="#0" class="cd-btn">Article &amp; Download</a>
</div>
</li>

<li>
<!-- slide content here -->
</li>

<!-- additional slides here -->
</ul> <!-- .cd-slider -->

<ol class="cd-slider-navigation">
<li class="selected"><a href="#0"><em>Item 1</em></a></li>
<li><a href="#0"><em>Item 2</em></a></li>
<li><a href="#0"><em>Item 3</em></a></li>
<li><a href="#0"><em>Item 4</em></a></li>
</ol> <!-- .cd-slider-navigation -->

<div class="cd-svg-cover" data-step1="M1402,800h-2V0.6c0-0.3,0-0.3,0-0.6h2v294V800z" data-step2="M1400,800H383L770.7,0.6c0.2-0.3,0.5-0.6,0.9-0.6H1400v294V800z" data-step3="M1400,800H0V0.6C0,0.4,0,0.3,0,0h1400v294V800z" data-step4="M615,800H0V0.6C0,0.4,0,0.3,0,0h615L393,312L615,800z" data-step5="M0,800h-2V0.6C-2,0.4-2,0.3-2,0h2v312V800z" data-step6="M-2,800h2L0,0.6C0,0.3,0,0.3,0,0l-2,0v294V800z" data-step7="M0,800h1017L629.3,0.6c-0.2-0.3-0.5-0.6-0.9-0.6L0,0l0,294L0,800z" data-step8="M0,800h1400V0.6c0-0.2,0-0.3,0-0.6L0,0l0,294L0,800z" data-step9="M785,800h615V0.6c0-0.2,0-0.3,0-0.6L785,0l222,312L785,800z" data-step10="M1400,800h2V0.6c0-0.2,0-0.3,0-0.6l-2,0v312V800z">
<svg height='100%' width="100%" preserveAspectRatio="none" viewBox="0 0 1400 800">
<title>SVG cover layer</title>
<desc>an animated layer to switch from one slide to the next one</desc>
<path id="cd-changing-path" d="M1402,800h-2V0.6c0-0.3,0-0.3,0-0.6h2v294V800z"/>
</svg>
</div> <!-- .cd-svg-cover -->
</section> <!-- .cd-slider-wrapper -->

 

Добавление стиля

По умолчанию все слайды имеют opacity: 0, находятся в абсолютной позиции и размещаются одна поверх других top: 0 and left:0. Класс .visible добавляется к выбранному слайду, чтобы сделать его видимым opacity: 1.

.cd-slider-wrapper {
  position: relative;
}
 
.cd-slider > li {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.cd-slider > li.visible {
  /* selected slide */
  position: relative;
  z-index: 2;
  opacity: 1;
}

 

Обработка событий

Чтобы анимировать SVG, мы анимировали атрибут 'd' элемента пути внутри контейнера .cd-svg.

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

 

Как только пути определены, мы добавили в .cd-svg-cover атрибут data-stepn (по одному для каждого шага), равный атрибуту 'd' для определенного пути (чтобы легко получить его с помощью JavaScript).

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

var svgCoverLayer = $('.cd-slider-wrapper').find('div.cd-svg-cover'),
	svgPath = Snap('#cd-changing-path'),
	path1 = svgCoverLayer.data('step1');
 
svgPath.animate({'d': path2}, 300, customMinaAnimation, function(){
	//...
});

 

Вот и всё!

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеjQuery

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

Это наверое самый интересный проект на сегодняшний день. Сайт создавался в двух версиях: английской и русской. Использовался американский хостинг, так как сайт рассчитан в первую очередь на американских клиентов и английская версия основная!


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

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


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

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


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

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


Раскрутка в соцсетях

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


Перейти в Блог

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close