fullpage使用js增加动画

最新推荐文章于 2025-05-30 09:13:24 发布

shl999

最新推荐文章于 2025-05-30 09:13:24 发布

阅读量3k

点赞数

CC 4.0 BY-SA版权

分类专栏： html css javascript 文章标签： jquery 动画

本文链接：https://blog.youkuaiyun.com/u014665035/article/details/68490297

html css 同时被 2 个专栏收录

25 篇文章

订阅专栏

javascript

21 篇文章

订阅专栏

本文介绍了一个使用jQuery插件fullpage.js实现页面切换时元素动画效果的例子。通过为不同元素设置不同的动画属性，如动画名称、时长及延迟时间，使得页面在切换过程中能够呈现出丰富的动画效果。文章详细展示了如何通过JavaScript代码控制这些动画的触发时机。

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

    jQuery(document).ready(function ($) {
        $('.fullpager').fullpage({
            //实例化完执行的回调函数
            afterRender: function () {
                $(".fullpage:first-child").find(".animated").each(function () {
                    add($(this));
                });
            },
            //滚动前的回调函数
            onLeave: function (index, nextIndex) {
                $(".fullpage" + index).find(".animated").each(function () {
                    reduce($(this));
                });
                $(".fullpage" + nextIndex).find(".animated").each(function () {
                    add($(this));
                });
            }
        });

        //获取有animated类的data属性值，并增加对应的样式
        function add(ele) {
            var name = ele.data("animated-name"), time = ele.data("animated-time"),
                    delay_time = ele.data("animated-delay-time"), style = ele.attr("style");
            if (style !== "undefined") {
                ele.data("original", style);
            }
            ele.css({
                "-webkit-animation-name": name,
                "animation-name": name,
                "-webkit-animation-duration": time,
                "animation-duration": time,
                "-webkit-animation-delay": delay_time,
                "animation-delay": delay_time
            })
        }

        //移除增加的样式
        function reduce(ele) {
            var original = ele.data("original");
            ele.removeAttr("style", "animation-name");
            if (original !== null) {
                ele.attr("style", original);
            }
        }
    });

 <div class="fullpage1 section">

                        <div class="circles">
                            <div class="circle-1 animated" data-animated-name="fadeInUp" data-animated-time="1s"
                                 data-animated-delay-time="1s"></div>
                            <div class="circle-2 animated" data-animated-name="fadeInUp" data-animated-time="1s"
                                 data-animated-delay-time="1.5s"></div>
                            <div class="circle-3 animated" data-animated-name="fadeInUp" data-animated-time="1s"
                                 data-animated-delay-time="1.8s"></div>
                            <div class="circle-4 animated" data-animated-name="fadeInUp" data-animated-time="1s"
                                 data-animated-delay-time="2s"></div>
                        </div>
                        <div class="tree animated" data-animated-name="fadeInUp" data-animated-time="1s"
                             data-animated-delay-time="2.4s"></div>
    </div>