CSS3 前端开发插件_绚丽视差滚动的图片切换

前端开发 浏览器插件|零基础web前端开发教程下载|web前端开发 教程
先来剖析:
什么是视差滚动?
视差滚动(Parallax Scrolling)是指多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。
视差滚动的结构可以分成:背景层、内容层和悬浮层(贴图层)。悬浮层和背景层可为多层,能实现更为细腻的视差感,为了结构清晰,我们当前效果是各为一层。
了解了视差,新的问题迎面而来:
如何脱离js有效的去控制图片切换及背景动画?
在无任何js下能够传递状态的首先就能想到表单元素:<input>,可以使用:checked选择器选择被选中的 <input> 元素。想清楚了这一点就开始动手搭建结构,毕竟很多时候思路比代码重要。
先放上完整结构代码:
html 代码

<div class=”vie_main”>
    <input type=”radio” name=”i” class=”page_1″ id=”p_1″ checked=”checked” />
    <input type=”radio” name=”i” class=”page_2″ id=”p_2″ />
    <input type=”radio” name=”i” class=”page_3″ id=”p_3″ />
    <label for=”p_1″ class=”btn_b1″></label>
    <label for=”p_2″ class=”btn_b2″></label>
    <label for=”p_3″ class=”btn_b3″></label>
    <div class=”vie_list”>
        <div class=”vie_bg”></div>
        <ul>
            <li>
                <img src=”images/bn1.png” class=”banner1″ />
                <img src=”images/bn1-1.png” class=”bn bnbg1″ />
            </li>
            <li>
                <img src=”images/bn2.png” class=”banner2″ />
                <img src=”images/bn2-2.png” class=”bn bnbg2″ />
            </li>
            <li>
                <img src=”images/bn3.png” class=”banner3″ />
                <img src=”images/bn3-3.png” class=”bn bnbg3″ />
            </li>
        </ul>
    </div>
</div>

接下来继续分析控制按钮
html 代码

<input type=”radio” name=”i” class=”page_1″ id=”p_1″ checked=”checked” />
<input type=”radio” name=”i” class=”page_2″ id=”p_2″ />
<input type=”radio” name=”i” class=”page_3″ id=”p_3″ />
<label for=”p_1″ class=”btn_b1″></label>
<label for=”p_2″ class=”btn_b2″></label>
<label for=”p_3″ class=”btn_b3″></label>

<label> 标签下的 for 属性命名和一个目标表单 id相同,这样利用显式形式绑定<input>标签,从而控制input。这一块完成后,控制滚动和背景通过css就能轻易实现了。
完整的布局css样式
css 代码

body,
p,
ul,
li,
ol,
h1,
h2,
h3,
h4,
h5,
h6,
dl,
dt,
dd,
form,
iframe {
margin:0;
padding:0;
}
ul,
li,
ol {
list-style:noneoutsidenone;
}
.vie_main {
height:650px;
width:100%;
position:relative;
}
.vie_main input {
display:none;
}
.vie_list {
height:100%;
overflow:hidden;
}
.vie_bg {
width:100%;
height:100%;
background:url(../images/bg.jpg)no-repeatcentercenter;
position:absolute;
top:0;
left:0;
overflow:hidden;
}
.vie_list ul {
position:relative;
top:0;
height:100%;
-webkit-transition:top1sease-in;
-moz-transition:top1sease-in;
-ms-transition:top1sease-in;
transition:top1sease-in;
}
.vie_list ul li {
height:100%;
opacity:0;
text-align:center;
position:relative;
}
.vie_list ul li>img {
margin-top:-10px;
}
.vie_list ul li .bn {
margin-top:0;
opacity:1;
position:absolute;
top:0;
left:50%;
transform:translateX(-50%);
}
.vie_list ul li p {
font-size:40px;
}
.vie_main label {
display:none;
width:60px;
height:60px;
border-radius:60px;
background:#E0371Eurl(../images/up.png)no-repeatcentercenter;
position:absolute;
z-index:2;
top:34%;
right:20%;
opacity:0.3;
cursor:pointer;
}
.vie_main label:hover {
opacity:0.6;
}

通过这些css把布局调整好,值得注意的是我们使用position属性实现覆盖效果,不要忘记调整z-index调整堆叠顺序。
z-index值可以控制定位元素在垂直于显示屏方向(Z 轴)上的堆叠顺序,值大的元素发生重叠时会在值小的元素上面。
css 代码

/*btn*/
.page_1:checked ~ .btn_b2,
.page_2:checked ~ .btn_b3{background-image: url(../images/down.png);display: block; top: 48%;}
.page_2:checked ~ .btn_b1,
.page_3:checked ~ .btn_b2{background-image: url(../images/up.png);display: block;}
.page_1:checked ~ .vie_list ul li:first-child,
.page_2:checked ~ .vie_list ul li:nth-child(2),
.page_3:checked ~ .vie_list ul li:nth-child(3){opacity: 1;}
/*滚动 top*/
.page_1:checked ~ .vie_list ul{top:0;}
.page_2:checked ~ .vie_list ul{top:-100%}
.page_3:checked ~ .vie_list ul{top:-200%}
/*banner切换过渡*/
.page_1:checked ~ .vie_list ul .banner1,
.page_2:checked ~ .vie_list ul .banner2,
.page_3:checked ~ .vie_list ul .banner3{margin-top:82px;-webkit-transition: margin-top 1s linear 1s;-moz-transition: margin-top 1s linear 1s;-ms-transition: margin-top 1s linear 1s; transition: margin-top 1s linear 1s;}
/*bg position*/
.vie_main input:checked ~.vie_list .vie_bg{
-webkit-transition: background-position 1.5slinear;
-moz-transition: background-position 1.5slinear;
-ms-transition: background-position 1.5slinear;
transition:background-position 1.5slinear}
.page_1:checked ~ .vie_list .vie_bg{background-position:center 0;}
.page_2:checked ~ .vie_list .vie_bg{background-position:center -120px;}
.page_3:checked ~ .vie_list .vie_bg{background-position:center -240px;}

这一块的元素选择都使用了css3.0里新增的选择器“~”
可以说“~”选择器才是我们整个效果实现的灵魂,能够精准有效的选择到非相邻的兄弟元素。有效的解决了css选择器不能灵活选择兄弟元素的尴尬。

各主流浏览器兼容,可以放心使用,在这里用“~”关联控制了图片切换和背景,再加上同样css3.0新增的transition属性做过渡动画即可完美实现图片切换以及背景缓动形成的视差效果。

南通招聘前端开发|计算机前端开发 招聘信息|招聘前端开发需要问哪些问题?

» 本文来自:前端开发者 » 《CSS3 前端开发插件_绚丽视差滚动的图片切换》
» 本文链接地址:https://www.rokub.com/3905.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!