Cool different style page layouts slideshow effects

This is a very cool effect of the different style page layout slide effects. In this effect, the front and back navigation buttons toggle the slide, and each slide has a different layout effect on the picture.

Online preview Source Download

This slide effect uses anime.js to animate the slideshow and uses many CSS3 properties that require the latest version of the modern browser to see the effect. For IE browser, 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 the SVG Clip-path attribute, so is not see the effect.

How to useHTML Structure

The basic HTML structure for this slide is as follows: Each slide has its own layout class class, and a data-layout property that is used to animate the individual animation effects.

1234567891011121314151617

<div class="slideshow">  <div class="slide slide--layout-1" data-layout="layout1">    <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" style="background-image: url(img/2.jpg);"></div></div>      <div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/3.jpg);"></div></div>    </div>    <div class="slide__title">      <h3 class="slide__title-main">Now or Never</h3>      <p class="slide__title-sub">... <a href="#">Read more</a></p>    </div>  </div><!-- /slide -->  <div class="slide slide--layout-2" data-layout="layout2">    <!-- ... -->  </div>  <!-- ... --></div><!-- /slideshow -->

CSS Styles

Here is a CSS style for one of the layouts:

1234567891011121314151617181920

/* 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 as follows:

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 entering and leaving. The following code is a sample code for the first layout:

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354

MLSlideshow.prototype.options = {  // Starting position.  startIdx : 0,  // Layout configuration.  // [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);          }        },        opacity : 0,        duration: 1200,        easing : ‘easeOutQuint‘,        itemsDelay : 80      },      in : {        resetProps : {          translateX : {            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 : { /* ... */ },    /* ... */  }};

Online preview Source Download

Cool different style page layouts slideshow effects