Блог

С веб-страницы: 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 amp; Quality" class="home-icon" id="knight-icon">
        </div>
    </div>
</section>
  

Поскольку существует 3 разных раздела, я бы хотел, чтобы каждый значок каждого раздела был «включен», когда конкретный раздел находится в порту просмотра. Однако то, что я сейчас получаю, — это только первый анимированный значок, в то время как остальные 2 остаются статичными (неподвижными), также анимация начинается при загрузке страницы. Перейдите на веб-страницу для фактического просмотра.