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

 

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

Шаг 1. HTML

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

Обратите внимание, мы взяли холст pattern, и установили для него параметры viewBox="0 0 562 366", это позволит сделать нам разбивку на два блока. Для примера мы взяли один слайд, в демонстрации мы взяли несколько, чтобы показать эффект перехода и анимации, также мы добавили кнопки для переключения слайдов:

Весь контейнер слайдов будет обвернут в класс header__main, а также класс slider. Теперь давайте перейдем к следующему шагу.

Шаг 2. CSS

У нас будет одно изображение которое будет размыто, и установлено на фон нашего слайдера, для этого присваиваем фону такие параметры:

Также мы добавляем разрез между нашими изображениями, нам необходимо чтобы у нас была небольшая полоса, получаем это с помощью следующих правил:

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

Также добавляем эффект при нажатии на кнопку с помощью следующих правил:

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

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

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