这是一款非常实用的jQuery和CSS3网页固定背景视觉差特效插件。该固定背景特效可以在页面中固定某些元素,在页面滚动的时候可以修改这些元素的视觉效果,从而制作出一种滚动视觉差的特效。
该固定背景视觉差特效的效果都是使用CSS3来完成的,jQuery代码只是用于管理上下导航按钮的事件。该效果主要使用CSS的background-attachment
属性来实现。在例子中,使用一幅手机的图片作为固定位置元素,在页面滚动时,除了它所有的页面元素都在滚动。这个效果的小技巧是使用不同颜色的尺寸相同的图片,将它们固定在页面的相同位置上。
使用方法
HTML结构
下面来看一些它的制作方法。HTML结构并不复杂:每一个section
都包含一个带有标题和文本的.content
元素。class .img-1
、.img-2
等用于在CSS中设置不同的背景图片。.cd-vertical-nav
是上下导航按钮,只在大屏幕设备中可见。data-type
用于在jQuery中识别是否是sections/items项。
Title here
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolor beatae, laudantium eos fugiat, deserunt delectus quibusdam quae placeat, tempora ea? Nulla ducimus, magnam sunt repellendus modi, ad ipsam est.
CSS样式
请记住一下几点小知识:在iOS中不能使用background-attachment: fixed;
,因此在某些小屏幕设备中固定背景效果是无效的。同样,插件中在小屏幕设备中不使用CSS background-images
属性,但是在.cd-content
元素使用::after
伪元素添加了一个小的手机图片。
.cd-fixed-background .cd-content::after { /* phone image on small devices */ content: ''; display: block; width: 100%; padding: 60% 0; margin: 2em auto 0; }
由于我们使用的是background-images
,所以不能100%的控制图片固定的位置(在这个例子中不能控制手机的图片固定位置)。
下面的代码是固定背景效果的所需要的全部代码:
html, body { height: 100%; } .cd-fixed-background { height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center center; background-attachment: fixed; } .cd-fixed-background.img-1 { background-image: url("../img/img-1.jpg"); } .cd-fixed-background.img-2 { background-image: url("../img/img-2.jpg"); } .cd-fixed-background.img-3 { background-image: url("../img/img-3.jpg"); }
JAVASCRIPT
插件中使用jQuery来控制导航按钮在各个section之间来回切换,可以使用鼠标点击导航按钮或键盘的上下导航按键来控制。在页面滚动的时候,使用checkNavigation()
方法来更新导航按钮的可见性,并使用checkVisibleSection()
方法来检测section是否在当前屏幕中可见。nextSection()
和prevSection()
方法用于导航到前一个和下一个section。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!