Dies ist ein besonderer Effekt verschiedener Arten von Seitenlayout -Diashows mit sehr coolen Effekten. In diesem Spezialeffekt wird die Diashow durch die Tasten vorne und hinten und die Bilder in jeder Folie verändert.
Dieser Folieneffekt verwendet Anime.js, um Animationseffekte für Folien zu erstellen und viele CSS3 -Eigenschaften. Es erfordert die neueste Version der modernen Browser, um die Effekte zu erkennen. Für den IE -Browser sind die vorherigen Effekte in Browsern mit IE11 und höher zu sehen. Der letzte Effekt kann nicht gesehen werden, da der IE-Browser das SVG-Clip-Path-Attribut nicht unterstützt.
Wie man benutzt
HTML -Struktur
Die grundlegende HTML-Struktur dieser Folie lautet wie folgt: Jede Folie verfügt über eine eigene Layout-Klassenklasse und eine Daten-Layout-Eigenschaft, um seine eigenen Animationseffekte zu erstellen.
<div> <div data-layout = "layout1"> <div> <div> <div style = "Hintergrund-Image: URL (IMG/1.JPG);"> </div> </div> <div> <div> <div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div> <div> <div> <div> < URL (IMG/3.JPG); /Diashow ->
CSS -Stil
Hier ist der CSS -Stil für eines der Layouts:
/ * Layout 1: 3 Gitterbilder */. Folie-Layout-1 .Slide__img {Position: absolut; Breite: Calc (50% - 1EM); } .slide-layout-1 .slide__img: Erstkind {links: 0,5em; Höhe: 100%; } .Slide-layout-1 .Slide__img: n-Child (n + 2) {links: calc (50% + 0,5em); Höhe: Calc (50% - 0,5EM); } .slide-layout-1 .slide__img: n-Kind (3) {TOP: CALC (50% + 0,5EM);};};Die Ergebnisse sind in der folgenden Abbildung dargestellt:
JavaScript
Die Animationseffekte jedes Folienlayouts sind in der JS -Datei definiert. Die Struktur lautet: [Layoutname]: {out: {Navigation Out -Eigenschaften}, in: {Navigation in Eigenschaften}}. Für die Eingabe und Verlassen von Folien können unterschiedliche Animationseffekte festgelegt werden. Der folgende Code ist der Beispielcode für das erste Layout:
Mlslideshow.prototype.options = {// Startposition. StartIDX: 0, // Layoutkonfiguration. // [layout name] : { out : {navigating out properties}, in : {navigating in properties} } layoutConfig : { layout1 : { out : { translateX : { next: '-100%', prev: '100%' }, rotateZ : { next: function(el, index) { return anime.random(-15, 0); }, prev: function (el, index) {return anime.random (0, 15); }}, Opazität: 0, Dauer: 1200, Erleichterung: 'EasyOutquint', itemsDelay: 80}, in: {resetProps: {translatex: {next: '100%', pre: '-100%'}, rotatez: {next: function (el, index) {return Anime.random (0, 15); }, prev: function (el, index) {return anime.random (-15, 0); }}, Opazität: 0,}, translatex: '0%', rotatez: 0, Opazität: 1, Dauer: 700, Lockern: 'EaseOutquint', itemsDelay: 80}}, Layout2: { / * ... * /};Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.