Godzilla. 2016-08-11
網(wǎng)站建設(shè)
干貨！網(wǎng)頁設(shè)計中的幻燈片動畫程序
今天,我們想與你分享一個在網(wǎng)頁設(shè)計中簡單的裝飾幻燈片組件。這個幻燈片背后的想法是有一個個體為每個幻燈片布局,伴隨著一種獨特的效果。每個幻燈片的圖片是為了有一個可以適合裝飾目的的一篇文章標(biāo)題;或者,例如,一個裝飾報價文章會有一個報價裝飾的幻燈片。
注意:請注意,我們使用一些現(xiàn)代CSS屬性相對窗口單位和3 d變換在老的瀏覽器不會起作用。
這個幻燈片的動畫是由動畫。js的朱利安·加尼葉。我們在演示中使用的圖片是來自Unsplash.com,一個偉大的免費資源,高質(zhì)量的圖像。
每個幻燈片都有各自的布局類和數(shù)據(jù)布局屬性,將幫助我們?yōu)槊總€幻燈片定義個人動畫。
一個例子的風(fēng)格布局如下:
.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);
}
這個布局可以在許多不同的方式實現(xiàn);請記住,這只是一個例子。
每個布局的動畫在我們的布局配置中定義。結(jié)構(gòu)布局名稱：[layout name] : { out : {navigating out properties}, in : {navigating in properties} }。我們可以設(shè)置不同的動畫的幻燈片和消失,我們可以區(qū)分是否下一個或前一個幻燈片。
下面是一個示例(第一布局演示):
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 : { },
}
};
我們希望你喜歡這個小幻燈片組件和發(fā)現(xiàn)它有用。以上幻燈片動畫效果展示
文章標(biāo)簽：
網(wǎng)頁設(shè)計
文章評論：