Cool! Different styles page layout effects JS implementation _javascript Skills

This is a very cool effect of different styles page layout slide effects. In this effect, you switch slides by using the front and back navigation buttons, and each slide has a different layout effect.

This slide effect uses anime.js to make animated effects on slides and uses many CSS3 properties that require the latest version of modern browsers to see the effects. For IE browsers, the previous effects can be seen in IE11 and above the browser to see the effect, the last effect because IE browser does not support SVG Clip-path properties, so it is not see the effect.

How to use
HTML structure
The basic HTML structure of the slide is as follows: Each slide has its own layout class classes, and a data-layout attribute for each animation effect.

 <div class= "slideshow" > <div class= "Slide Slide--layout-1" data-layout= "lay OUT1 "> <div class=" slide-imgwrap "> <div class=" slide__img "><div class=" Slide__img-inner "style=" Background-image:url (img/1.jpg); " ></div></div> <div class= "slide__img" ><div class= "Slide__img-inner" Background-image:url (img/2.jpg); " ></div></div> <div class= "slide__img" ><div class= "Slide__img-inner" Background-image:url (img/3.jpg); " ></div></div> </div> <div class= "Slide__title" > 
 
 

CSS Styles
The following is a CSS style for one of the layouts:

/* Layout 1:3 grid images
/slide--layout-1. slide__img { 
 position:absolute; 
 Width:calc (50%-1em); 
} 
 
. Slide--layout-1. slide__img:first-child { 
 left:0.5em; 
 height:100% 
} 
 
. Slide--layout-1. Slide__img:nth-child (n+2) { 
 Left:calc (50% + 0.5em); 
 Height:calc (50%-0.5em); 
} 
 
. Slide--layout-1. Slide__img:nth-child (3) { 
 Top:calc (50% + 0.5em);
}

The resulting effect is shown in the following illustration:

Javascript
The animation effect of each slide layout is defined in the JS file. Structure is: [Layout name]: {out: {Navigating out Properties}, in: {Navigating in Properties}}. You can set different animation effects for slides that enter and leave. The following code is the sample code for the first layout:

 MLSlideshow.prototype.options = {//starting position. 
 startidx:0,//Layout configuration. 
 [Layout Name]: {out: {Navigating off 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); }, opacity:0, duration:1200, easing: ' Easeoutquint ', itemsdelay:80}, in: {resetprops: {transl
 AteX: {Next: ' 100% ', prev: ' -100% '}, Rotatez: {next:function (el, index) {return anime.random (0, 15); 
 }, Prev:function (el, index) {return Anime.random (-15, 0); 
 }, Opacity:0,}, Translatex: ' 0% ', rotatez:0, opacity:1, duration:700, easing: ' Easeoutquint ',
ITEMSDELAY:80}}, Layout2: {/* ... */}, LAYOUT3: {/* ... */},/* ... *}}; 

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.