// css中 body和html的width和height一定不要设置宽高！！否则不生效！如果父页面或者别处加了不能随意更改，这里则需加上
html,body {
   width: auto  //横向滚动的页面只需加width
   height: auto  //竖向滚动的页面只需加height
}

// 获取浏览器可见区域高度
var window_height = document.documentElement.clientHeight;
// 用户手动修改浏览器可见区域高度时修改变量
window.onresize = function () {
    window_height = document.documentElement.clientHeight;
};
console.log('window_height', window_height)

// 获取所需执行动画的div
var animal_div = document.getElementById('animal_div');

// 鼠标滚轮滚动执行方法
window.onscroll = function () {
    // 获取鼠标滚轮滚动距离
    var _scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    
    if (_scrollTop >= getOffsetTop(animal_div) - window_height && _scrollTop <= getOffsetTop(animal_div)) {
        animal_div.querySelector('.group_6').style.animation = 'first 3s'
        animal_div.querySelector('.group_8').style.animation = 'second 3s'
        animal_div.querySelector('.group_10').style.animation = 'third 3s'
    }
};

// 获取网页被滚动走的距离（这里的距离是相对于父元素的）
// 判断元素父集是否有已定位元素,有的话叠加所有父元素的offsetTop
function getOffsetTop (e) {
    var top = e.offsetTop;
    var parent = e.offsetParent;
    while (parent != null) {
        top += parent.offsetTop;
        parent = parent.offsetParent;
    }
    return top;
}