Animation 卷轴 Javascript

Question

我的网站上有以下代码。

<section id="hp-performance" class="hp-performance">
                    <h2 class="hidden">Our Numbers Proven Performance</h2>
                    <div class="performance-wrap" data-background-attachment-rollback id="refresh">
                        <div class="container">
                            <div class="textwidget custom-html-widget">
                                <div class="performance-title site-section-title">
                                    <span style="font-size: 70px">
                                        <strong class="performance-section-number site-section-  number">04</strong>
                                        Τα ακινητα <b>που διαθετουμε</b>
                                        <i class="title-line" style="left: -120px;"></i>
                                    </span>
                                </div>
                                <ul class="performance-list">
                                    <li class="fast">
                                        <span>$<i>2</i>+B</span>Total Sales<br>Since 2015
                                    </li>
                                    <li>
                                        <span><i>135</i>K</span>Total Email<br>Subscribers
                                    </li>
                                    <li>
                                        <span><i>44</i></span>Number of<br>Agents
                                    </li>
                                    <li>
                                        <span><i>760</i></span>Transactions since<br>2015
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </section>

当我从站点加载整个页面时，此部分会加载有效的数字。 但如果我不重新加载页面，这个效果就不起作用，数字是静态的。 如何添加效果，每次向上或向下滚动此部分时，数字都会重新加载并再次查看效果？

我使用了 onscroll 事件，但这不起作用。

<script>
var div=getElementById("refresh")
div.addEventListener('scroll', () = > {div.load(document.URL + " #refresh")})
</script>


SCRIPT FROM THIS ANIMATION MAYBE IS:


ourNumbersProvenPerformance: function () {
            var performanceEl = $('.hp-performance .performance-wrap .performance-list');
            var speed = 0;
            performanceEl.elementPeek({
                onViewportIn: function (object) {
                    
                    if (!performanceEl.hasClass('done-calculation')) {
                        object.addClass('done-calculation');

                        performanceEl.find('li span i').each(function (index, value) {
                            
                            if ($(this).parent().parent().hasClass('fast')) {
                                speed = 300;      
                            }else{
                                speed = 1000;
                            }

                            // console.log(speed);

                            var _this = $(this),
                                value = _this.text();

                            _this.animateNumber({
                                number: value
                            }, speed);
                        });
                    }
                },
                peekAmountToTrigger: 0.1
            });
        },
        
        ipMarketingGlobalExposureNumbers: function () {
            var performanceEl = $('.page-template-template-marketing-list .ip-marketing-global-exposure-numbers');

            performanceEl.elementPeek({
                onViewportIn: function (object) {
                    if (!performanceEl.hasClass('done-calculation')) {
                        object.addClass('done-calculation');

                        performanceEl.find('div.ip-marketing-global-exposure-numbers-item span em').each(function (index, value) {
                            var _this = $(this),
                                value = _this.text();

                            _this.animateNumber({
                                number: value
                            }, 1000);
                        });
                    }
                },
                peekAmountToTrigger: 0.1
            });

            jQuery(".page-template-template-marketing-list .hp-performance .performance-wrap .performance-list li").chainHeight({
                breakpoints: [
                    {
                        min: 321,
                    }
                ]
            });
        },

"I dont know this syntax (name: function() {})"

Answer 1

在不深入研究特定 animation 代码的情况下，删除/添加用于触发它的 class 可能会更容易？

// Also... maybe double-check that this is the element being scrolled
var div = document.getElementById("refresh");

div.addEventListener("scroll", () => {
  $("#refresh .performance-list").removeClass("performance-list").addClass("performance-list");
}, false);

（如果您使用的是带有jQuery.noConflict()的东西，请将$替换为jQuery ）

另外，请注意您的代码。 看起来您正在尝试使用 .load() 将文件加载到 HTML div 中，但是 .load() 在这个意义上是 jQuery 方法。 也就是说，如果 div 只是一个 HTML 元素，则不能执行 div.load()，但您可以执行以下操作：

var div = $("refresh");
div.on('scroll', () = > {div.load(document.URL + " #refresh")});