这是一款效果非常炫酷的jQuery和CSS3全屏视觉差幻灯片特效。该幻灯片采用半透明的遮罩层作为文字说明层。在幻灯片切换时,文字有动态放大的效果。图片和文字的移动形成了一种微妙的视觉差效果。
制作方法
HTML结构
该幻灯片的HTML结构非常简单,使用嵌套<div>
的HMTL结构。每一个div.inner
是一幅幻灯片,div.backgrounds
是幻灯片的导航按钮。
<section> <div class="content"> <div class="inner iron active"> <h1>...</h1> <p>...</p> </div> ...... </div> <div class="backgrounds"> <div class="bg iron active"></div> <div class="bg cap"></div> <div class="bg bw"></div> <div class="bg thor"></div> </div> </section>
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%; } }
在遮罩层上除了带.active
class之外的其它div.inner
都被设置为不可见。当某个div.inner
元素被添加了.active
class之后(通过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。具体代码参考下载文件。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!