Il s'agit d'un effet spécial de différents styles de diaporamas de mise en page avec des effets très cool. Dans cet effet spécial, le diaporama est commuté à travers les boutons de navigation avant et arrière, et les images de chaque diapositive ont des effets de disposition différents.
Cet effet de diapositive utilise anime.js pour créer des effets d'animation pour les diapositives et utilise de nombreuses propriétés CSS3. Il nécessite la dernière version des navigateurs modernes pour voir les effets. Pour le navigateur IE, les effets précédents peuvent être vus dans les navigateurs avec IE11 et supérieur. Le dernier effet ne peut pas être vu car le navigateur IE ne prend pas en charge l'attribut SVG Clip-Path.
Comment utiliser
Structure HTML
La structure HTML de base de cette diapositive est la suivante: chaque diapositive a sa propre classe de classe de mise en page et une propriété Data-Layout pour créer ses propres effets d'animation.
<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);"> </v> </v> <v> <div style = "background-image: URL (img / 3.jpg); "> </div> </div> </div> <div> <h3> maintenant ou jamais </h3> <p> ... <a href =" # "> Lire la suite </a> </p> </div> </div> <! - / Slide -> <div data-layout =" Sceout2 "> <! - ... -> </ / div> / diaporama ->
Style CSS
Voici le style CSS pour l'une des dispositions:
/ * Disposition 1: 3 Images de grille * /. Slide --LAYOUT-1 .SLIDE__IMG {position: Absolute; Largeur: calc (50% - 1EM); } .slide --Layout-1 .slide__img: premier-enfant {Left: 0.5em; hauteur: 100%; } .slide --Layout-1 .slide__img: nth-child (n + 2) {Left: calc (50% + 0,5em); hauteur: calc (50% - 0,5em); } .slide --Layout-1 .Slide__img: Nth-Child (3) {TOP: CALC (50% + 0,5EM);}Les résultats sont présentés dans la figure ci-dessous:
Javascrip
Les effets d'animation de chaque disposition de diapositive sont définis dans le fichier JS. La structure est: [nom de mise en page]: {out: {naviguer dans les propriétés}, dans: {naviguer dans les propriétés}}. Différents effets d'animation peuvent être définis pour entrer et sortir des diapositives. Le code suivant est l'exemple de code pour la première mise en page:
Mlslideshow.prototype.options = {// position de départ. StartIDX: 0, // Configuration de mise en page. // [nom de mise en page]: {out: {naviguer dans les propriétés}, dans: {naviguer dans les propriétés}} LayoutConfig: {Layout1: {out: {translatex: {Next: '-100%', '' 100% '}, rotatez: {Next: fonction (el, index) {return anime.random (-15, 0); }, prev: function (el, index) {return anime.random (0, 15); }}, opacité: 0, durée: 1200, assouplissement: 'facilite quittent ", itemsdelay: 80}, dans: {resetprops: {tradlatex: {next:' 100% ', prev:' -100% '}, rotatez: {next: function (el, index) {return anime.random (0, 15); }, prev: function (el, index) {return anime.random (-15, 0); }}, opacité: 0,}, tradlatex: '0%', rotatez: 0, opacité: 1, durée: 700, assouplissement: 'facilite qui, itemsdelay: 80}}, Layout2: {/ * ... * /}, Layout3: {/ * ... * /}, / * ... * /}};Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.