1.目标:
实现jQuery根据滚动条位置加载相应的内容:向下滚动时当内容区域滚动到可视窗口高度的一半时,加载动画内容;向上滚动到相应的内容区域时也重新加载动画内容!
2.实现思路:
先静态布局好HTML结构,使用伪类:hover模拟动画效果,再使用jQuery 控制动画类名的切换来实现效果!主要判断滚动的方向,以及相应方向上加载动画的时机(即何时才加载动画的判断条件!关键点!)。
3.思维草稿图:
向下滚动加载动画判断条件:(代码中addClass()函数)
向上滚动加载动画判断条件:(代码中addClass2()函数)
4.代码实现:
HTML:
<div class="header">
实现思路:先布局好静态布局,再使用hover模拟动画行为,再改为类名on等用js进行控制!
</div>
<div class="banner">
<h1>前端开发</h1>
<p>
Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征。在互联网的演化进程中,
网页制作是Web1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行为也以
浏览为主。
</p>
</div>
<div class="con">
<div class="con_l"><img src="images/1.jpg" alt="" /></div>
<div class="con_2"><img src="images/2.jpg" alt="" /></div>
</div>
<div class="news">news</div>
<div class="footer"