Show slides for different la S and show slides for different la s

Show slides for different la S and show slides for different la s

This is a slide effect for different la S. In this special effect, you can use the navigation buttons to switch between slides. The images in each slide have different la S.

Download Online Preview source code

This slide effect uses anime. js to create animated effects for slides. With many CSS3 attributes, you need the latest version of modern browsers to see the effect. For ie browsers, the effects can be seen in IE11 and later browsers. The last effect is invisible because IE does not support the SVG clip-path attribute.

Method of use: HTML Structure

The basic HTML structure of the slide is as follows: each slide has its own layout class, anddata-layoutProperty, used to make the animation effect.

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 style

The following is a CSS style of the layout:

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 result is as follows:

JavaScript

The animation effects of each slide layout are defined in the js file. Structure: [layout name] : { out : {navigating out properties}, in : {navigating in properties} }. You can set different animation effects for the slides that enter and exit. The following code is an example of 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 : { /* ... */ },    /* ... */  }};

Download Online Preview source code