scroll and animated

by cintia_rodrigues

HTML

<div class="m-ctn-form jq_mainContent jq_scroll">
    <div class="container">
        <div class="m-wrpp">
            <div class="wgt-form">
                <div class="col-6">
                    <div class="txt-content">
                        <h2>Comparação entre a energia consumida/ano por um termoventilador com outros tipos de sistemas de aquecimento</h2>
                    </div>
                    <div class="img-content">
                        <img src="~/Content/Images/sticker.png" alt="ballon"/>
                    </div>
                    <div class="graphic">
                    
                        <div class="content-red">
                            <p>Termoventilador ou Convector</p>
                            <br/>
                            <div class="img-content">
                                <img src="~/content/Images/p1-01.png"/>
                            </div>
                            <div class="barra red jq-red">
                                <span  class="nonumber">100%</span>
                                <i class="arrowred"></i>
                            </div>
                        </div>

                   
                        <div class="content-red">
                            <p>Caldeira a Gás Natural</p>
                            <br/>
                            <div class="img-content">
                                <img src="~/content/Images/p1-02.png"/>
                            </div>
                            <div class="barra yellow jq-yellow">
                                 <span class="nonumber">57%</span>
                                <i class="arrowyellow"></i>
                            </div>
                        </div>

                       
                        <div class="content-red">
                            <p>Salamandra a Pellets</p>
                            <br/>
                            <div class="img-content">
                              ...

JavaScript

var animated = false; //serve para parar a animação

$(window).scroll(function () {
    var alturaTop = $(window).scrollTop(); //1
    var alturaWindow = $(window).height();//2
    var alturaElement = $(".jq_scroll").offset().top;//3

    // 1+2 > 3
    // o !animated && coloca-se para que a animação so aconteça uma vez
    if (!animated && alturaTop + alturaWindow > alturaElement) {
        animated = true; // entra e só executa uma vez

        console.log("ola");
        $(".nonumber").hide();

        $('.jq-red').delay().animate({ width: "100%" }, 1200, "swing", function() {
            $(".nonumber").fadeIn("fast");
        });

        $('.jq-yellow').delay().animate({ width: "57%" }, 1200, "swing", function() {
            $(".nonumber").fadeIn("fast");
        });

        $('.jq-green').delay().animate({ width: "37%" }, 1200, "swing", function() {
            $(".nonumber").fadeIn("fast");
        });

        $('.jq-blue').delay().animate({ width: "24%" }, 1200, "swing", function() {
            $(".nonumber").fadeIn("fast");
        }); 
    }

});