【原生JS】写滚动指定位置展示动画

最新推荐文章于 2023-08-01 11:43:58 发布

原创最新推荐文章于 2023-08-01 11:43:58 发布 · 2.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#Js动画

原生Js的磕磕碰碰专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用原生JS结合Animate.css，在滚动到指定位置时触发元素动画。通过监听滚动事件，判断元素是否进入可视区域，进而应用预设的动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用原生js做滚动到指定位置展示动画，动画效果用Animate.css

直接上代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>滚动可见位置动画</title>
    <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/animate-3.1.0.min.css">
    <style>
        body {
            overflow-x: hidden;
        }

        div {
            width: 100px;
            height: 100px;
            margin: 100px auto 0;
            background: red;
        }
    </style>
</head>

<body>
        <div class="dream" data-animate="bounceInUp,1s,linear"></div>
        <div class="dream" data-animate="flash,2s,linear"></div>
        <div class="dream" data-animate="pulse,1s,linear"></div>
        <div class="dream" data-animate="rubberBand,1s,linear"></div>
        <div class="dream" data-animate="shake,1s,linear"></div>
        <div class="dream" data-animate="swing,1s,linear"></div>
        <div class="dream" data-animate="tade,1s,linear"></div>
        <div class="dream" data-animate="wobble,1s,linear"></div>
        <div class="dream" data-animate="jello,1s,linear"></div>
        <div class="dream" data-animate="bounceIn,1s,linear"></div>
        <div class="dream" data-animate="bounceInDown,1s,linear"></div>
        <div class="dream" data-animate="bounceInLeft,1s,linear"></div>
        <div class="dream" data-animate="bounceInRight,1s,linear"></div>
        <div class="dream" data-animate="bounceInUp,1s,linear"></div>
        <div class="dream" data-animate="bounceOut,1s,linear"></div>
        <div class="dream" data-animate="bounceOutDown,1s,linear"></div>
        <div class="dream" data-animate="bounceOutLeft,1s,linear"></div>
        <div class="dream" data-animate="bounceOutRight,1s,linear"></div>
        <div class="dream" data-animate="bounceOutUp,1s,linear"></div>
        <div class="dream" data-animate="fadeIn,1s,linear"></div>
        <div class="dream" data-animate="fadeInDown,1s,linear"></div>
        <div class="dream" data-animate="fadeInLeft,1s,linear"></div>
        <div class="dream" data-animate="fadeInRight,1s,linear"></div>
        <div class="dream" data-animate="fadeInUp,1s,linear"></div>
        <div class="dream" data-animate="fadeInDownBig,1s,linear"></div>
        <div class="dream" data-animate="fadeInLeftBig,1s,linear"></div>
        <div class="dream" data-animate="fadeInRightBig,1s,linear"></div>
        <div class="dream" data-animate="fadeInUpBig,1s,linear"></div>
        <div class="dream" data-animate="flip,1s,linear"></div>
        <div class="dream" data-animate="hinge,1s,linear"></div>
</body>

</html>
<script>
    // 获取浏览器可见区域高度
    var window_height = document.documentElement.clientHeight;
    // 用户手动修改浏览器可见区域高度时修改变量
    window.onresize = function () {
        window_height = document.documentElement.clientHeight;
    };
    // 获取所需效果元素
    var My_dream = document.getElementsByClassName('dream');
    // 鼠标滚轮滚动执行方法
    window.onscroll = function () {
        // 获取鼠标滚轮滚动距离
        var _scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

        // 循环类dream
        for (var k = 0; k < My_dream.length; k++) {
            if (_scrollTop >= getOffsetTop(My_dream[k]) - window_height && _scrollTop <= getOffsetTop(My_dream[k])) {
                My_dream[k].style.animationName = My_dream[k].dataset.animate.split(',')[0];
                My_dream[k].style.animationDuration = My_dream[k].dataset.animate.split(',')[1];
                My_dream[k].style.animationTimingFunction = My_dream[k].dataset.animate.split(',')[2];
            }
        }
    };

    // 判断元素父集是否有已定位元素
    function getOffsetTop(ele) {
        var rtn = ele.offsetTop;
        var o = ele.offsetParent;
        while (o != null) {
            rtn += o.offsetTop;
            o = o.offsetParent;
        }
        return rtn;
    }

    // 滚动条等于0时执行第一屏效果
    function my_animation() {
        var _scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        // 效果方法
        for (var k = 0; k < My_dream.length; k++) {
            if (_scrollTop >= getOffsetTop(My_dream[k]) - window_height && _scrollTop <= getOffsetTop(My_dream[k])) {
                My_dream[k].style.animationName = My_dream[k].dataset.animate.split(',')[0];
                My_dream[k].style.animationDuration = My_dream[k].dataset.animate.split(',')[1];
                My_dream[k].style.animationTimingFunction = My_dream[k].dataset.animate.split(',')[2];
            }
        }
    }
    my_animation();
</script>

在Vue.js中应用
1、在index.html中引入Animate.css

<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/animate-3.1.0.min.css">

2、创建my_animate.js文件，引入index.html内

// 获取浏览器可见区域高度
var window_height = document.documentElement.clientHeight;
// 用户手动修改浏览器可见区域高度时修改变量
window.onresize = function () {
   window_height = document.documentElement.clientHeight;
};
// 获取所需效果元素
var My_dream = document.getElementsByClassName('dream');
// 鼠标滚轮滚动执行方法
window.onscroll = function () {
   // 获取鼠标滚轮滚动距离
   var _scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

   // 循环类dream
   for (var k = 0; k < My_dream.length; k++) {
       if (_scrollTop >= getOffsetTop(My_dream[k]) - window_height && _scrollTop <= getOffsetTop(My_dream[k])) {
           My_dream[k].style.animationName = My_dream[k].dataset.animate.split(',')[0];
           My_dream[k].style.animationDuration = My_dream[k].dataset.animate.split(',')[1];
           My_dream[k].style.animationTimingFunction = My_dream[k].dataset.animate.split(',')[2];
       }
   }
};

// 判断元素父集是否有已定位元素
function getOffsetTop(ele) {
   var rtn = ele.offsetTop;
   var o = ele.offsetParent;
   while (o != null) {
       rtn += o.offsetTop;
       o = o.offsetParent;
   }
   return rtn;
}

// 滚动条等于0时执行第一屏效果
function my_animation() {
   var _scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
   // 效果方法
   for (var k = 0; k < My_dream.length; k++) {
       if (_scrollTop >= getOffsetTop(My_dream[k]) - window_height && _scrollTop <= getOffsetTop(My_dream[k])) {
           My_dream[k].style.animationName = My_dream[k].dataset.animate.split(',')[0];
           My_dream[k].style.animationDuration = My_dream[k].dataset.animate.split(',')[1];
           My_dream[k].style.animationTimingFunction = My_dream[k].dataset.animate.split(',')[2];
       }
   }
}
my_animation();

3、在需要加动画的位置的div元素加class名称即可

<template>
	<div class="dream" data-animate="fadeIn,1s,linear">Fate</div>
</template>