Анимация SVG в создании слайдера для сайта – Пример рабочего SVG слайдера изображений!

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

Не нужно много лишних слов, а просто давайте сразу перейдем к делу и создадим с Вами сейчас анимацию SVG для нашего сайта или как говорится слайдер …

Посмотрите сами, что у Вас должно получиться в итоге – анимация SVG или карусель изображений – Пример:

Demo animated svg

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

Так как же делается такой SVG слайдер изображений? Все довольно просто:

Его структура состоит вот из такого HTML кода:

<div>
  <ul 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="M-2,800h2L0,0.6C0,0.3,0,0.3,0,0l-2,0v294V800z" data-step5="M0,800h1017L629.3,0.6c-0.2-0.3-0.5-0.6-0.9-0.6L0,0l0,294L0,800z" data-step6="M0,800h1400V0.6c0-0.2,0-0.3,0-0.6L0,0l0,294L0,800z">
    <li>
      <div>
        <svg viewBox="0 0 1400 800">
                    <title>Aimated SVG</title>
          <defs>
            <clipPath id="cd-image-1">
              <path id="cd-changing-path-1" d="M1400,800H0V0.6C0,0.4,0,0.3,0,0h1400v294V800z"/>
            </clipPath>
          </defs>

          <image height='800px' width="1400px" clip-path="url(#cd-image-1)" xlink:href="img/img-1.jpg"></image>
        </svg>
      </div> <!-- .cd-svg-wrapper -->
    </li>

    <li>
      <div>
        <svg viewBox="0 0 1400 800">
          <!-- svg content here -->
        </svg>
      </div> <!-- .cd-svg-wrapper -->
    </li>

    <!-- other list items here -->

  </ul> <!-- .cd-slider -->

  <ul>
    <li><a href="#0">Next</a></li>
    <li><a href="#0">Prev</a></li>
  </ul> <!-- .cd-slider-navigation -->

  <ol>
    <li><a href="#0"><em>Item 1</em></a></li>
    <li><a href="#0"><em>Item 2</em></a></li>
    <!-- other list items here -->
  </ol> <!-- .cd-slider-controls -->
</div> <!-- .cd-slider-wrapper -->

Затем нам нужно подобрать определенные css стили для нашей SVG анимации будущего слайдера. Вот например такие:

.cd-slider > li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
}
.cd-slider > li.visible {
  position: relative;
  z-index: 2;
  opacity: 1;
}
.cd-slider > li.is-animating {
  z-index: 3;
  opacity: 1;
}
.cd-slider .cd-svg-wrapper {
  /* using padding Hack to fix bug on IE - svg height not properly calculated */
  height: 0;
  padding-bottom: 57.15%;
}
.cd-slider svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Далее переходим к обработке событий и у нас вот, что получается:

clipPath.attr('d', path1).animate({'d': path2}, duration, firstCustomMinaAnimation, function(){
  clipPath.animate({'d': path3}, duration, secondCustomMinaAnimation, function(){
    oldSlide.removeClass('visible');
    newSlide.addClass('visible').removeClass('is-animating');
  });
});

А в конечном счете Вы получите обыкновенный, красивый слайдер, работающий на эффекте SVG анимации. Скачать его можно вот по этой ссылке:

Скачать анимацию SVG или все файлы слайдера – ЗДЕСЬ: