Este é um efeito especial de diferentes estilos de layout de páginas, com efeitos muito legais. Nesse efeito especial, a apresentação de slides é alterada pelos botões de navegação frontal e traseira, e as imagens em cada slide têm diferentes efeitos de layout.
Esse efeito de slide usa o Anime.js para criar efeitos de animação para slides e usa muitas propriedades CSS3. Requer a versão mais recente dos navegadores modernos para ver os efeitos. Para o navegador do IE, os efeitos anteriores podem ser vistos nos navegadores com o IE11 e acima. O último efeito não pode ser visto porque o navegador do IE não suporta o atributo SVG CLIP-PATH.
Como usar
Estrutura HTML
A estrutura básica de HTML deste slide é a seguinte: Cada slide possui sua própria classe de layout e uma propriedade de layout de dados para criar seus próprios efeitos de animação.
<div> <div data-layout = "layout1"> <div> <div> <div style = "Background-Image: url (img/1.jpg);"> </div> </div> <div> <div style = "Background-image: url (img/2.jpg); url (img/3.jpg); "> </div> </div> </div> <div> <h3> agora ou nunca </h3> <p> ... <a href ="#"> leia mais </a> </p> </div> </div> <!-//slide-> <div data-layout =") /Slideshow ->
Estilo CSS
Aqui está o estilo CSS para um dos layouts:
/ * Layout 1: 3 Imagens da grade */. Slide--Layout-1 .Slide__Img {Posição: Absolute; largura: calc (50% - 1em); } .slide--Layout-1 .slide__Img: Primeira filho {esquerda: 0.5em; Altura: 100%; } .Slide--Layout-1 .slide__Img: NTH-Child (n + 2) {esquerda: calc (50% + 0,5em); Altura: Calc (50% - 0,5em); } .slide--Layout-1 .slide__Img: NTH-Child (3) {TOP: Calc (50% + 0,5em);}Os resultados são mostrados na figura abaixo:
JavaScript
Os efeitos de animação de cada layout do slide são definidos no arquivo JS. A estrutura é: [nome do layout]: {out: {navegando propriedades}, em: {navegando nas propriedades}}. Diferentes efeitos de animação podem ser definidos para entrar e deixar slides. O código a seguir é o código de amostra para o primeiro layout:
Mlslideshow.prototype.options = {// Posição inicial. StartIDX: 0, // Configuração de layout. // [Nome do layout]: {out: {navegando propriedades}, em: {navegando em propriedades}} layoutConfig: {layout1: {out: {translandX: {next: '-100%', prev: '100%'}, rotatez: {next: next: ' }, prev: function (el, index) {return anime.random (0, 15); }}, Opacity: 0, Duração: 1200, Facilitando: 'facilidadeOutquint', itensDelay: 80}, em: {RESETPROPS: {translatex: {next: '100%', prev: '-100%'}, giratez: {a seguir: function (eL, index) {Return anime.Random }, prev: function (el, index) {return anime.random (-15, 0); }}, opacidade: 0,}, translatex: '0%', giratez: 0, Opacity: 1, duração: 700, Faculdade: 'facilidadeoutQuint', itensDelay: 80}}, layout2: { / * ... * /}, layout3: { * ... * /}, / * ...O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.