Оптимизировать код JavaScript, несколько вызовов анимации - PullRequest
Новая
       8

Оптимизировать код JavaScript, несколько вызовов анимации

0 голосов
/ 17 октября 2018

Я хочу оптимизировать свой код и исправить проблему, но я не знаю, как это сделать.

Вот мой HTML: 

<div id="page">
    <div id="intermed">
          <div id="section-presentation"></div>
          <div id="section-lasalle"></div>
    </div>
</div>
<div id="console1" style="position:fixed; top:50px; left:50px; color:#F0F; z-index:10000;"></div>
<div id="console2" style="position:fixed; top:100px; left:50px; color:#F0F; z-index:10000;"></div>

Мой JavaScript: 

function isVisible( row, container, padding ){
    var elementTop = $(row).offset().top,
        elementHeight = $(row).height(),
        containerTop = container.scrollTop() - padding,
        containerHeight = container.height();

    return ((((elementTop - containerTop) + elementHeight) > 0) && ((elementTop - containerTop) < containerHeight));
}

$(window).scroll(function(){
    Element.prototype.getElementById = function(id) {
        return document.getElementById(id);
    }

    // Détection section-presentation
    var section = '#section-presentation';
    var selector = section.replace('#', '');
    var target = document.getElementById('page').getElementById(selector);

    if (isVisible(target, $(window), 0)){
        var lineMaker = new LineMaker({
            parent: {element: section, position: 'append'},
            position: 'fixed',
            lines: [
                {top: 0, left: '6%', width: 20, height: '10vh', color: '#abc837', hidden: true, animation: { duration: 2000, easing: 'easeInOutSine', delay: 100, direction: 'TopBottom' }},
                {top: 0, left: '7.1%', width: 10, height: '10vh', color: '#447821', hidden: true, animation: { duration: 2000, easing: 'easeInOutQuad', delay: 80, direction: 'TopBottom' }},
            ]
        });
        lineMaker.animateLineIn(0);
        lineMaker.animateLineIn(1);
        document.getElementById('console1').innerHTML = section+" visible";
    } else {
       document.getElementById('console1').innerHTML = section+" invisible";
       lineMaker.animateLinesOut();
       lineMaker.animateLineOut(0);
       lineMaker.animateLineOut(1);
    };

    // Détection section-lasalle
    var section = '#section-lasalle';
    var selector = section.replace('#', '');
    var target = document.getElementById('page').getElementById(selector);

    if (isVisible(target, $(window), 0)){
        var lineMaker = new LineMaker({
            parent: {element: section, position: 'append'},
            position: 'fixed',
            lines: [
                {top: 0, left: '6%', width: 20, height: '10vh', color: '#abc837', hidden: true, animation: { duration: 2000, easing: 'easeInOutSine', delay: 100, direction: 'TopBottom' }},
                {top: 0, left: '7.1%', width: 10, height: '10vh', color: '#447821', hidden: true, animation: { duration: 2000, easing: 'easeInOutQuad', delay: 80, direction: 'TopBottom' }},
            ]
        });
        lineMaker.animateLineIn(0);
        lineMaker.animateLineIn(1);
        document.getElementById('console2').innerHTML = section+" visible";
    } else {
        document.getElementById('console2').innerHTML = section+" invisible";
        lineMaker.animateLinesOut();
        lineMaker.animateLineOut(0);
        lineMaker.animateLineOut(1);
    };
});

Моя цель - создать анимированную линию (от LineMaker: https://tympanus.net/Development/LineMaker/), когда div виден, но удалить его, когда div невидим.

Видимая / невидимая частьвсе в порядке, но я хочу оптимизировать часть LineMaker, так как у меня есть 4 дифференциала div в моем финальном проекте.

Последнее, что я хочу использовать функцию для перемотки Line Animation, но так как она требуетvar LineMaker это ошибка с помощью "lineMaker.animateLinesOut ();" или "lineMaker.animateLineOut (0);"

Вы можете проверить это в действии => https://jsfiddle.net/Lqykmahx/

...