jQuery和CSS3网页固定背景视觉差特效插件

2019-10-09 08:57:59 作者: 大梦 浏览: 13 [百度未收录] [搜狗已收录] [360未收录]

简要教程

这是一款非常实用的jQueryCSS3网页固定背景视觉差特效插件。该固定背景特效可以在页面中固定某些元素,在页面滚动的时候可以修改这些元素的视觉效果,从而制作出一种滚动视觉差的特效。

该固定背景视觉差特效的效果都是使用CSS3来完成的,jQuery代码只是用于管理上下导航按钮的事件。该效果主要使用CSS的background-attachment属性来实现。在例子中,使用一幅手机的图片作为固定位置元素,在页面滚动时,除了它所有的页面元素都在滚动。这个效果的小技巧是使用不同颜色的尺寸相同的图片,将它们固定在页面的相同位置上。

固定背景视觉差特效中图片的使用

使用方法

HTML结构

下面来看一些它的制作方法。HTML结构并不复杂:每一个section都包含一个带有标题和文本的.content元素。class .img-1.img-2等用于在CSS中设置不同的背景图片。.cd-vertical-nav是上下导航按钮,只在大屏幕设备中可见。data-type用于在jQuery中识别是否是sections/items项。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<section class="cd-fixed-background img-1" data-type="slider-item">
  <div class="cd-content">
    <h2>Title hereh2>
    <p>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.p>
  div>
section>
  
<section class="cd-fixed-background img-2" data-type="slider-item">
  
section>
  
<nav>
  <ul class="cd-vertical-nav">
    <li><a href="#0" class="cd-prev inactive">Nexta>li>
    <li><a href="#0" class="cd-next">Preva>li>
  ul>
nav>               
CSS样式

请记住一下几点小知识:在iOS中不能使用background-attachment: fixed;,因此在某些小屏幕设备中固定背景效果是无效的。同样,插件中在小屏幕设备中不使用CSS background-images属性,但是在.cd-content元素使用::after伪元素添加了一个小的手机图片。

1
2
3
4
5
6
7
8
.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%的控制图片固定的位置(在这个例子中不能控制手机的图片固定位置)。

下面的代码是固定背景效果的所需要的全部代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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。

版权免责声明 1、本网站名称:罗网轻量级sns社区,源码分享平台
2、本站永久网址:http://www.luopay.cn
3、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
4、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6、本站资源大多存储在云盘,如发现链接失效  点此反馈 我们会第一时间更新。

下载地址
评论
本文作者 阅读排行 文章推荐

首页
最新
投稿
精选
我的