Есть ли способ анимировать 3 иконки страницы только в окне просмотра? - PullRequest
Новая
       19

Есть ли способ анимировать 3 иконки страницы только в окне просмотра?

3 голосов
/ 22 апреля 2019

С веб-страницы: 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 различных раздела, я бы хотел, чтобы каждый значок каждого раздела "упрощался", когда конкретный раздел находится в окне просмотра. Тем не менее, то, что я сейчас получаю, это только первая иконка, которую нужно анимировать, тогда как две другие остаются статичными (неподвижными), также анимация запускается при загрузке страницы. Перейдите на веб-страницу для фактического просмотра.

...