css幻灯片样式,jQuery和CSS3超酷全屏视觉差幻灯片特效

这是一款效果非常炫酷的jQuery和CSS3全屏视觉差幻灯片特效。该幻灯片采用半透明的遮罩层作为文字说明层。在幻灯片切换时，文字有动态放大的效果。图片和文字的移动形成了一种微妙的视觉差效果。

制作方法

HTML结构

该幻灯片的HTML结构非常简单，使用嵌套

的HMTL结构。每一个div.inner是一幅幻灯片，div.backgrounds是幻灯片的导航按钮。

...

...

......

CSS样式

该幻灯片的整个布局采用绝对定位方式，并使用媒体查询来适应小屏幕的需要。

section {

position: absolute;

top: 3em;

right: 0;

bottom: 0;

left: 0;

z-index: 50;

}

@media (min-width: 48em) {

section {

top: 5em;

}

}

屏幕左侧的半透明遮罩层是div.content，它也采用绝对定位，背景色为白色，透明度为0.8，同样使用媒体查询来适应小屏幕的需要。

section .content {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 100;

padding: 2em;

overflow-y: auto;

background-color: rgba(255, 255, 255, 0.8);

}

@media (min-width: 48em) {

section .content {

width: 40%;

}

}

在遮罩层上除了带.activeclass之外的其它div.inner都被设置为不可见。当某个div.inner元素被添加了.activeclass之后(通过jQuery代码)，文字变为可见，并执行showTextBlock动画。

section .content .inner {

display: none;

}

section .content .inner.active {

display: block;

-webkit-animation: showTextBlock 1s;

animation: showTextBlock 1s;

}

幻灯片图片的移动是操纵translateY属性来实现。开始的时候图片被设置在屏幕之外，然后当点击相应的导航按钮的时候修改translateY的值使图片移动到屏幕中间。

section .backgrounds .bg.iron {

background-image: url("http://i.imgur.com/ZBD2A0U.jpg");

-webkit-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%);

}

...

JAVASCRIPT

该幻灯片特效中使用jQuery来控制图片的移动，为相应的元素添加和删除相应的class。具体代码参考下载文件。