干货！WooCommerce 独立站网页设计中的幻灯片动画程序

今天, 我们想与您分享一个在 WooCommerce 独立站网页设计中简单的装饰幻灯片元件。这个幻灯片背后的想法是有一个个体为每个幻灯片布局, 伴随著一种独特的效果。每个幻灯片的图片是为了有一个可以适合装饰目的的一篇文章标题; 或者, 例如, 一个装饰报价文章会有一个报价装饰的幻灯片。

注意: 请注意, 我们使用一些现代 CSS 属性相对视窗单位和 3 d 变换在老的浏览器不会起作用。
这个幻灯片的动画是由动画。 js 的朱利安·加尼叶。我们在演示中使用的图片是来自 Unsplash.com, 一个伟大的免费资源, 高质量的影像。
 
每个幻灯片都有各自的布局类和资料布局属性, 将帮助我们为每个幻灯片定义个人动画。

一个例子的风格布局如下:

.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);
}

这个布局可以在许多不同的方式实现; 请记住, 这只是一个例子。

每个布局的动画在我们的布局配置中定义。结构布局名称：[layout name] : { out : {navigating out properties}, in : {navigating in properties} } 。我们可以设置不同的动画的幻灯片和消失, 我们可以区分是否下一个或前一个幻灯片。
下面是一个示例 (第一布局演示):

MLSlideshow.prototype.options = {
// Starting position.
startIdx : 0,
// Layout configuration.
// [layout name] : { out : {navigating out properties}, in : {navigating in properties} }
// For some properties we can have a “next” and “prev” behavior which can be different for the two – navigating out/in to the right or left.
// For the translationX/Y we can use percentage values (relative to the Slideshow).
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 : { },

}
};

     我们希望您喜欢这个小幻灯片元件和发现它有用。以上幻灯片动画效果展示