This is a special effect of different styles of page layout slideshows with very cool effects. In this special effect, the slideshow is switched through the front and back navigation buttons, and the pictures in each slide have different layout effects.
This slide effect uses anime.js to create animation effects for slides and uses many CSS3 properties. It requires the latest version of modern browsers to see the effects. For IE browser, the previous effects can be seen in browsers with IE11 and above. The last effect cannot be seen because IE browser does not support the SVG clip-path attribute.
How to use
HTML structure
The basic HTML structure of this slide is as follows: each slide has its own layout class class and a data-layout property to create its own animation effects.
<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);"></div></div> <div><div style="background-image: url(img/3.jpg);"></div></div> </div> <div> <h3>Now or Never</h3> <p>... <a href="#">Read more</a></p> </div> </div><!-- /slide --> <div data-layout="layout2"> <!-- ... --> </div> <!-- ... --> </div><!-- /slideshow -->
CSS Style
Here is the 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 results are shown in the figure below:
JavaScript
The animation effects of each slide layout are defined in the js file. The structure is: [layout name] : { out : {navigating out properties}, in : {navigating in properties} }. Different animation effects can be set for entering and leaving slides. The following code is the sample code for the first layout:
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 : { /* ... */ }, /* ... */ } };The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.