效果图展示一下
实现的是滚动哪一个区域,然后展示这个类名,离开这一个区域类名删除
jq代码
第一个函数 H_heighs 只需要传两个参数 一个是需要执行动画的区域,第二个是执行动画添加的类名,我用的直接是 animate这个css库.
第二个函数 zi_heighs 传3个参数 第一个是需要执行动画的区域 ,第二个是动画类名 第三个是 执行动画的子元素
第三个函数 adds 参数和第二个参数含义一样 实现的效果是 鼠标划过直接效果
哪个区域需要效果 直接调用函数一次 添加类名就行
思路: 滚动的时候判断 页面滚动大于内容区域距离顶部区域的时候添加类名(为了偏差故意减去300);
在判断删除类名 页面滚动小雨内容区域距离顶部区域的时候 并且 页面滚动大于内容区域距离顶部区域 并加上 这个区域元素本身的高度 删除类名;
附上jq代码:
$(function () {
// 外面总元素添加事件
function H_heighs(pa_one, pa_two, daughter) {
var zong = $(window).scrollTop();
var hei_1 = $(pa_one).offset().top - 300;
var data_he = $(pa_one).height();
if (zong > hei_1) {
$(pa_one).addClass(pa_two);
}
if (zong < hei_1 || zong > hei_1 + data_he) {
$(pa_one).removeClass(pa_two);
}
}
$(window).on("scroll", function () {
H_heighs('.i_data_one', 'animated bounceInLeft');
H_heighs('.i_data_two', 'animated lightSpeedIn');
H_heighs('.i_data_thr', 'animated fadeInLeft');
H_heighs('.i_data_four', 'animated fadeInRight');
})
// 子元素添加事件
function zi_heighs(pa_one, pa_two, daughter) {
var zong = $(window).scrollTop();
var hei_1 = $(pa_one).offset().top - 300;
var data_he = $(pa_one).height();
if (zong > hei_1) {
$(pa_one).find(daughter).addClass(pa_two);
}
if (zong < hei_1 || zong > hei_1 + data_he) {
$(pa_one).find(daughter).removeClass(pa_two);
}
}
$(window).on("scroll", function () {
zi_heighs('.i_brilliant', 'animated rotateInDownLeft', '.wrap');
zi_heighs('.i_arrange', 'animated bounceInDown', '.wrap');
})
// 加上$.fn是绑定页面元素的插件 $.是绑定jq上的插件
$.extend({
adds: function (a, b, c) {
$(a).hover(function () {
$(this).find(b).addClass(c);
}, function () {
$(this).find(b).removeClass(c);
})
}
})
$.adds('.i_data_fl', 'img', 'animated shake');
})