Este es un efecto especial de diferentes estilos de diapositivas de diseño de página con efectos muy geniales. En este efecto especial, la presentación de diapositivas se cambia a través de los botones de navegación delantera y trasera, y las imágenes en cada diapositiva tienen diferentes efectos de diseño.
Este efecto de diapositiva usa Anime.js para crear efectos de animación para diapositivas y utiliza muchas propiedades CSS3. Requiere la última versión de los navegadores modernos para ver los efectos. Para IE Browser, los efectos anteriores se pueden ver en los navegadores con IE11 y superior. El último efecto no se puede ver porque IE Browser no admite el atributo SVG Clip-Path.
Cómo usar
Estructura html
La estructura HTML básica de esta diapositiva es la siguiente: cada diapositiva tiene su propia clase de diseño de diseño y una propiedad de sayo de datos para crear sus propios efectos de animación.
<Div> <div data-layout = "Layout1"> <Div> <div> <div style = "Background-IMage: URL (IMG/1.JPG);"> </div> </div> <div> <div style = "en segundo plano: url (img/2.jpg);"> </div> </div> <div> <divs> <iv style = "backness-iMage: iMage: iMage: iMage: iMage: iMage: iMage: iMage; url (img/3.jpg); "> </div> </div> </div> <div> <h3> ahora o nunca </h3> <p> ... <a href ="#"> leer más </a> </p> </div> </div> <!-/slide-> <div data-layout =" licout2 "> <!-...-> </div> <! /presentación de diapositivas ->
Estilo CSS
Aquí está el estilo CSS para uno de los diseños:
/ * Diseño 1: 3 Imágenes de cuadrícula */. Slide-Layout-1 .Slide__Img {Position: Absolute; Ancho: Calc (50% - 1em); } .Slide--Layout-1 .Slide__Img: First-Child {izquierda: 0.5em; Altura: 100%; } .Slide-Layout-1 .Slide__Img: Nth-Child (n + 2) {izquierda: calc (50% + 0.5em); Altura: Calc (50% - 0.5em); } .Slide-Layout-1 .Slide__Img: Nth-Child (3) {Top: Calc (50% + 0.5em);}Los resultados se muestran en la figura a continuación:
Javascript
Los efectos de animación de cada diseño de diapositiva se definen en el archivo JS. La estructura es: [Nombre de diseño]: {Out: {navegando por las propiedades}, en: {navegando en propiedades}}. Se pueden establecer diferentes efectos de animación para ingresar y dejar diapositivas. El siguiente código es el código de muestra para el primer diseño:
Mlslideshow.prototype.options = {// posición inicial. startIdx: 0, // Configuración de diseño. // [Nombre de diseño]: {Out: {Navegating Out Properties}, in: {navegando en propiedades}} LayoutConfig: {Layout1: {out: {traduceX: {next: '-100%', previo: '100%'}, rotatez: {next: function (el, index) {return anime.random (-15, 0, 0); }, anterior: function (el, index) {return anime.random (0, 15); }}, Opacidad: 0, Duración: 1200, facilitar: 'facilitquint', itemsdelay: 80}, en: {resetProps: {traduceX: {next: '100%', prev: '-100%'}, rotedez: {next: function (el, index) {return.random (0, 15); }, anterior: function (el, index) {return anime.random (-15, 0); }}, opacidad: 0,}, traduceX: '0%', rotatez: 0, opacidad: 1, duración: 700, facilitando: 'facilidadeutquint', itemsdelay: 80}}, Layout2: { / * ... * /}, Layout3: { / * ... * /}, / * ... * /}};Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.