Анимация слайдера с помощью SVG
Демо
HTML-структура состоит из неупорядоченного списка (ul.cd-slider), содержащего слайды и два дополнительных списка (ul.cd-slider-navigation и ol.cd-slider-controls) для навигации.
Каждый элемент внутри списка ul.cd-slider содержит <clipPath> и <image> .
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <div class="cd-slider-wrapper"> <ul class="cd-slider" 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 class="visible"> <div class="cd-svg-wrapper"> <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 class="cd-svg-wrapper"> <svg viewBox="0 0 1400 800"> <!-- svg content here --> </svg> </div> <!-- .cd-svg-wrapper --> </li> <!-- other list items here --> </ul> <!-- .cd-slider --> <ul class="cd-slider-navigation"> <li><a href="#0" class="next-slide">Next</a></li> <li><a href="#0" class="prev-slide">Prev</a></li> </ul> <!-- .cd-slider-navigation --> <ol class="cd-slider-controls"> <li class="selected"><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 --> |
Структура слайдера довольно простая: все слайды имеют прозрачность 0 (opacity: 0), абсолютное позиционирование, и расположены друг над другом. Класс .visible добавляется к активному слайду, чтобы сделать его видимым, а класс .is-animating добавляется на время анимации смены слайдов.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | .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%; } |
(2 votes, average: 5,00 out of 5)
Загрузка...
