Создание SVG анимированного слайдера 

Рассмотрим создание рекламного слайдера на базе анимированного SVG файла. Благодаря такому подходу баннер не будет заблокирован специальным ПО для блокировки рекламы.

Итак слайдер будет содержать три слайда с автоматической ротацией картинок через свойство opacity

1. Создадим в любом редакторе три картинки одинакового размера. Желательно, что бы вес картинок был как можно меньше.
   
2. Запускаем SVG редактор Inkscape.exe
3. Импортируем одну картинку выбрав в главном меню «Файл» — «Импортировать» (Ctrl+i).
   
4. Подгоняем размер полотна под размер картинки выбрав в главном меню «Файл» — «Свойства документа» Shift+Ctrl+D. В появившемся окне нажимаем кнопку «Resize to content».
   
5. Сохраняем слайдер в котором уже находится первый слайд:
   • Тип файла — «Оптимизированный SVG»
   • Имя файла — «root-slider.svg».
6. Запускаем текстовый редактор и добавляем ID слайда:
   • Находим тег «<g>» и добавим в него следующее: id="layer1"
   • Находим тег «<image>» и добавим в него следующее: id="slide1"
7. Создаём новый документ в SVG редакторе Inkscape.exe и снова импортируем в него второй слайд. Подгоняем размер полотна под размер картинки выбрав в главном меню «Файл» — «Свойства документа» Shift+Ctrl+D. В появившемся окне нажимаем кнопку «Resize to content».
8. Сохраняем второй слайд в новый файл:
   • Тип файла — «Оптимизированный SVG»
   • Имя файла — «slide2.svg».
9. В текстовом редакторе и добавим ID для второго слайда:
   • Находим тег «<g>» и добавим в него следующее: id="layer2"
   • Находим тег «<image>» и добавим в него следующее: id="slide2"
10. Скопируем тег «<g>» и вложенный в него «<image>» в файл «root-slider.svg» под тег «<g>» первого слайда.
    
11. Аналогичными действиями из пунктов 7 — 10 создаём третий SVG слайд. В итоге должен получится файл «root-slider.svg» в котором три тега «<g>» в каждом из которых по картинке «<image>».
    
12. Теперь добавим анимацию в SVG файл «root-slider.svg».
    • Добавим тег «<style>» в тег «<svg>»

      <style>
      	image {
      		opacity: 0;
      		transition: opacity 0.2s linear;
      		animation: 24s slide infinite ease-in-out
      	}
      
      	@keyframes slide {
      	  0% {opacity: 0;}
      	  14% {opacity: 1;}
      	  33.33% {opacity: 1;}
      	  47.33% {opacity: 0;}
      	  100% {opacity: 0;}
      	}
      
      	#slide1 {animation-delay: 0s; opacity: 1 !important;}
      	#slide2 {animation-delay: 8s;}
      	#slide3 {animation-delay: 16s;}		
      </style>

      

    • Сохраняем изменения в SVG файл «root-slider.svg»

В итоге мы получили анимированный SVG файл с поочерёдной, плавной сменой слайдов через свойство opacity.

Пример итогового рекламного анимированный SVG файла

---

---

Написать комментарий