Question

在网页上：http://supply54.herokuapp.com/，当滚动到视图中时，我要设置3个图标的动画。但是，我尝试了多种编码方式，但我不知道如何： +循环代码（如果可能发生任何循环，请参阅下面的代码） +为它们设置不同的动画

这是我到目前为止尝试过的：

jQuery(document).ready(function(){
    $('.home-icon').waypoint(function(){
        let cssTransforms = anime({
            targets: ['knight-icon', 'people-icon', 'globe-icon'],
            easing: 'easeOutExpo',
            translateY: [100, 0],
            opacity: [0, 1],
            delay: 500,
        });
        this.destroy();
    })
})

还

document.addEventListener('DOMContentLoaded', function() {
    let waypoint1 = new Waypoint({
        element: document.querySelector('#globe-icon'),
        handler: function() {
            anime({
                targets: '#globe-icon',
                easing: 'easeOutExpo',
                translateY: [100, 0],
                opacity: [0, 1],
                delay: 500,
            });
            this.destroy();
        },
        context: document.querySelector('.about'),
        offset: '100%',
    });
    let waypoint2 = new Waypoint({
        element: document.querySelector('#poeple-icon'),
        handler: function() {
            anime({
                targets: '#poeple-icon',
                easing: 'easeOutExpo',
                translateY: [100, 0],
                opacity: [0, 1],
                delay: 500,
            });
            this.destroy();
        },
        context: document.querySelector('.work'),
        offset: '100%',
    });
    let waypoint3 = new Waypoint({
        element: document.querySelector('#knight-icon'),
        handler: function() {
            anime({
                targets: '#knight-icon',
                easing: 'easeOutExpo',
                translateY: [100, 0],
                opacity: [0, 1],
                delay: 500,
            });
            this.destroy();
        },
        context: document.querySelector('.modus'),
        offset: '100%',
    });
});

这是它的html部分。

<section class="about normal">
    <div class="container">
        <h2 class="text-center section-title">ABOUT US</h2>
        <p class="section-description">We represent a worldwide network of reliable partners in the petroleum in the petroleum industry that has been built up over many years of solidifying our reputation. We go the extra mile for our partners, especially within the Southeast Asian and European region. Our core products are within the paraffin, base oil, hydraulic oil and HSD industries.</p>
            <div class="text-center animated-icon image-globe" id="animated-icon">
                <img src="./images/icon-globe.png" alt="Globe Icon" class="home-icon" id="globe-icon">
            </div>
        </div>
    </section>

<section class="work normal">
    <h2 class="text-center section-title">HOW WE WORK</h2>
    <div class="container">
        <p class="section-description">Supply 54 serves as mediators between an extensive portfolio of suppliers and consumers within our key markets. We thrive on optimizing partnerships through highly efficient and dynamic ways in today's hyper connected world.</p>
        <div class="text-center animated-icon image-links">
            <img src="./images/icon-people.png" alt="People Icon" class="home-icon" id="people-icon">
        </div>
    </div>
</section>

<section class="modus normal">
    <h2 class="text-center section-title">OUR MODUS OPERANDI</h2>
    <div class="container">
        <p class="section-description">With effective costing, reliability and quality constantly being the basis of our operations, we benefit from long-term and satisfactory cooperation with our clients.</p>
        <div class="text-center animated-icon image-knight">
            <img src="./images/icon-knight.png" alt="Reliability & Quality" class="home-icon" id="knight-icon">
        </div>
    </div>
</section>

由于有3个不同的部分，所以当特定部分在视口中时，我希望每个部分的每个图标都“缓入”。但是，我现在得到的只是第一个要动画的图标，而另外两个图标保持静态（不可移动），并且动画在页面加载时开始。请访问该网页以获取实际视图。

只有在视口中时，才可以对页面的3个图标进行动画处理吗？

0 个答案: