Это особый эффект различных стилей слайд -шоу с очень крутым эффектом. В этом специальном эффекте слайд -шоу переключается через переднюю и заднюю кнопки навигации, а изображения на каждом слайде имеют разные эффекты макета.
Этот эффект слайда использует Anime.js для создания анимационных эффектов для слайдов и использует многие свойства CSS3. Это требует последней версии современных браузеров, чтобы увидеть эффекты. Для браузера IE предыдущие эффекты можно увидеть в браузерах с IE11 и выше. Последний эффект не может быть замечен, потому что IE Browser не поддерживает атрибут Clip-Path Clip.
Как использовать
HTML -структура
Основная HTML-структура этого слайда заключается в следующем: каждый слайд имеет свой класс класса макета и свойство Layout Data для создания собственных эффектов анимации.
<div> <div data-layout = "layout1"> <div> <div> <div style = "founal-image: url (img/1.jpg);"> </div> </div> <div> <div style = "founal-image: url (img/2.jpg); url (img/3.jpg); "> </div> </div> </div> <div> <h3> сейчас или никогда </h3> <p> ... <a href ="#"> Читать больше </a> </p> </div> </div> <!-/slide-> <div data-layout =" layout2 "> <! /Слайд -шоу ->
Стиль CSS
Вот стиль CSS для одного из макетов:
/ * Макет 1: 3 изображения сетки */. Slide-layout-1 .slide__img {position: Absolute; Ширина: Calc (50% - 1EM); } .slide-layout-1 .slide__img: первый ребенок {слева: 0,5ем; высота: 100%; } .slide-layout-1 .slide__img: nth-child (n + 2) {left: calc (50% + 0,5em); высота: расчет (50% - 0,5 эм); } .slide-layout-1 .slide__img: nth-child (3) {top: calc (50% + 0,5em);}Результаты показаны на рисунке ниже:
JavaScript
Эффекты анимации каждого макета слайда определены в файле JS. Структура: [Имя макета]: {out: {Навигация по свойствам}, в: {навигация в свойствах}}. Различные эффекты анимации могут быть установлены для входа и оставления слайдов. Следующий код является примером кода для первого макета:
Mlslideshow.prototype.options = {// Начальная позиция. StartIdx: 0, // конфигурация макета. // [Имя макета]: {out: {Свойства навигации}, в: {навигация в свойствах}} LayoutConfig: {Layout1: {out: {translatex: {next: '-100%', prev: '100%'}, rowatez: {next: function (el, endex) {return anim.rand. }, prev: function (el, index) {return anime.random (0, 15); }}, непрозрачность: 0, продолжительность: 1200, ослабление: 'extyoutquint', itemsdelay: 80}, в: {resetprops: {translatex: {Next: '100%', Prev: '-100%'}, Rotatez: {Next: function (el, index) {return anime.random (0, 15); }, prev: function (el, index) {return anime.random (-15, 0); }}, непрозрачность: 0,}, transtatex: '0%', rowatez: 0, opacity: 1, продолжительность: 700, ослабление: 'extyoutquint', itemsdelay: 80}}, layout2: { / * ... * /}, layout3: { / * ... * /}, / * ... /}};Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.