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