这是一款效果非常炫酷的jQuery和CSS3 3d翻转图片幻灯片插件。这个幻灯片插件开始的时候图片都堆叠在一起,当用户点击了其中的某张图片后,该图片会以3D翻转的方式“飞”到堆叠图片的最前面。在该幻灯片插件中使用了 CSS3 transition、CSS3 animations 和 CSS3 transforms,并用jQuery来处理鼠标点击事件。
插件中精美的插图来自于花瓣。
插件制作
插件设计
该幻灯片插件以堆叠栈的方式来排列图片,所有的图片都会以平滑的方式定位在堆叠栈的指定位置,如下图所示:
当用户点击了其中的某张图片,该图片先移动到左边,然后在3D翻转到栈的顶部:
HTML结构
该图片3D翻转幻灯片的HTML结构非常简单,需要两个 幻灯片中每一张图片都有一个 因为该幻灯片插件使用的是栈结构,需要将图片 在幻灯片的每张图片上都需要一个 经过上面的处理,可以得到下图的效果: 首先要做的是遍历图像列表自动排序,插件中基于DOM元素的顺序将图片都添加到 当幻灯片图片被点击后,该图片将会被添加 class 在幻灯片被点击图片动画的时候,插件会移动它后面的图片,改变它们的排列顺序。同时为它们添加itemlist
和 itemdescription
。
id
属性和图片描述的data-for
属性相对应。
CSS样式
absolute
定位,并使用left
属性来保证每张图片都可见。同时为了美观,还使用了transform scale
。
#itemdescription {
position: relative;
width: 400px;
margin: 0 auto;
left: 6em;
top: 2em;
}
#itemdescription span {
display: none;
}
#itemlist {
display: block;
width: 400px;
margin: 3em auto;
position: relative;
transform-style: preserve-3d;
}
#itemlist img {
position: absolute;
cursor: pointer;
left: 0;
box-shadow: 0px 15px 50px rgba(0,0,0,0.4);
}
#itemlist img:hover {
top: -5px;
}
#itemlist img.item-0 {
z-index: 4;
transform: scale(1);
}
#itemlist img.item-1 {
z-index: 3;
left: -80px;
transform: scale(0.9);
}
#itemlist img.item-2 {
z-index: 2;
left: -160px;
transform: scale(0.8);
}
#itemlist img.item-3 {
z-index: 1;
left: -240px;
transform: scale(0.7);
}
transition
属性来使图片平滑的过渡,插件中使用一个单独的class .transition
。为了制作动画效果,插件中还使用了.show
class,这个class通过关键帧来使图片执行翻转动画。
.transition {
transition: 0.5s ease-out;
}
.show {
animation: show 1s linear;
}
@keyframes show{
25% {
left: -450px;
}
50% {
z-index: 5;
left: -500px;
transform: rotate3d(0,1,0,0deg);
}
70% {
z-index: 5;
left: -250px;
transform: rotate3d(0,1,0,180deg);
}
100% {
z-index: 5;
left: 0px;
transform: rotate3d(0,1,0,360deg);
}
}
jQuery代码
item
对象中,并隐藏所有的图片描述,只显示第一幅图片的描述。
//Initiliaze
var itemList, item, className, thisItem, newOrder, itemDesc, desc;
itemList= $('#itemlist');
item= itemList.children('img');
itemDesc= $('#itemdescription');
desc= itemDesc.children('span');
//Add class name for each item
item.each(function(index) {
className= 'item-' + index;
$(this).addClass(className).attr('data-order', index);
});
//Show first item description
desc.filter(':first-child').fadeIn();
.show
来使该图片执行相应的动画。当动画结束,将显示该图片的描述,并改变它的排序data-order
属性:
//On clicked fire animation
item.on('click', function() {
thisItem= $(this);
thisOrder = parseInt(thisItem.attr('data-order')) - 1;
thisItem.addClass('show');
//Reorder item position
item.on('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function() {
thisItem.removeClass().addClass('item-0').attr('data-order', '0');
//Show selected item description
desc.hide();
desc.filter('[data-for=' + thisItem.attr('id') + ']' ).fadeIn('fast');
});
transition
属性来使它们平滑动画,最后,动画结束时将移除transition
属性。
//Move siblings items backward
window.setTimeout(function () {
for(var i = thisOrder; i >= 0; i--) {
//Reorder item position
movedItem = item.filter('[data-order=' + i + ']');
newOrder= parseInt(movedItem.attr('data-order')) + 1;
className = 'item-' + newOrder;
//Move them with transition
movedItem.removeClass().addClass('transition ' + className).attr('data-order', newOrder);
//Remove their transition
item.on('transitionend webkitTransitionEnd MSTransitionEnd oTransitionEnd', function() {
item.removeClass('transition');
});
}
}, 500);
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!