Executar script somente quando chegar na div

[GustavoDose 1]

Galera estou com um duvida preciso que o script carregue apenas quando chegar na minha div, pois como a div que via ser carregada tem uma animação e o conteúdo só vai ser mostrado quando o usuário chegar naquele div preciso que o script seja carregado somente quando o usuário rolar a pagina e chegar a determinada div

 

 

 

HTML:

<div class="post">
  <div class="skills">
     <h2>Teste</h2>
     <div class="demo" data-percent="65"></div>
  </div>
</div>

SCRIPT QUE FAZ APARECER QUANDO CHEGA NA DIV:

        post();
        function post(){
            jQuery('.post').addClass("hidden").viewportChecker({
                classToAdd: 'visible animated zoomIn',
                offset: 100,             
               });   
        }

SCRIPT DO CONTEUDO ANIMADO:

skill();
        function skill(){
            $('.demo').percentcircle({
                    animate : true,
                    diameter : 100,
                    guage: 2,
                    coverBg: '#fff',
                    bgColor: '#efefef',
                    fillColor: '#5c93c8',
                    percentSize: '15px',
                    percentWeight: 'normal'
            });
        }

Então como faço para executar a função skill ao chegar na div post?

 

[Lucas Medina 17]

Olá!

Tente colocar dúvidas sobre Javascript na seção de Javascript. Um por todos, todos pelo fórum!

No caso, você está utilizando jQuery no seu projeto? Existe um event handler no jQuery chamado .scroll(), que aciona um evento sempre que o scroll é feito no site.

Uma solução legal para o seu caso é fazer o seguinte:

* Definir se o evento acontece no início, no final ou no meio da div;

* Definir em que posição da tela esta div precisa estar;

* Utilizar uma fórmula para pegar o valor da posição da div através da propriedade .offset();

Um exemplo:

* Para quando a div estiver no meio da página:

$(document).scroll(function(){

  if (window.scrollY > $('#minha-div').offset().top - window.innerHeight / 2) {

    console.log('Estou no meio da tela');

  }

});

* Para quando a div aparecer completamente, somente:

$(document).scroll(function(){

  if (window.scrollY > $('#minha-div').offset().top + $('#minha-div').outerHeight) {

    console.log('Surgi completamente');

  }

});

* Para quando a div for aparecer:

$(document).scroll(function(){

  if (window.scrolly > $('#minha-div').offset().top) {

    console.log('A div aparece');

  }

});

Vai depender bastante de como você quer que tal procedimento seja aplicado, mas o .scroll() deve ser suficiente para esta ocasião ;)

Boa sorte!

[GustavoDose 1]

 

 

Lucas ja tentei isso, mas meu problema é que o script que tem a animação não funciona corretamente dai, ou não aparece a div que tem que aparecer ou quando aparece div fica em loop e a cada scroll aparece mais uma div ;/

[Lucas Medina 17]

Você precisa criar triggers pra isso.

Como um interruptor, fazer com que um evento só ocorra uma vez, enquanto uma variável em boolean seja verdadeira, ou semelhante:

  var check = true;
  $(document).scroll(function() {
      console.log(window.scrollY);
      if (check && window.scrollY > 500) {
          console.log('Animação de entrada');
          check = false;
          console.log('Fim de evento');
      }
  });

[GustavoDose 1]

 

Fiz desta forma mas não consigo tirar o loop, preciso de quatro div .demo mas desta forma que foi mostrado só carrega uma e não carrega mais nenhum outra ;/

    $(document).ready(function() {
        $(window).scroll( function(){
            $('.hidem').each( function(i){        
                var bottom_of_object = $(this).offset().top + $(this).outerHeight();
                var bottom_of_window = $(window).scrollTop() + $(window).height();
                if( bottom_of_window > bottom_of_object ){    
                    $(this).animate({'opacity':'1'},500);
                        skill();
                        function skill(){
                            $('.demo').percentcircle({
                                    animate : true,
                                    diameter : 100,
                                    guage: 2,
                                    coverBg: '#fff',
                                    bgColor: '#efefef',
                                    fillColor: '#5c93c8',
                                    percentSize: '15px',
                                    percentWeight: 'normal'
                        });
                    }    
                }
            });
        });
    });