Contator só inicia quando div estiver visível na tela.

[kaiquemix 1]

Olá galera tenho um contador e queria que ele só começasse quando a div for vista na tela.

<script type="text/javascript">
			$(document).ready(function (){
				$('.spincrement').spincrement({
					from: 0.0,
					decimalPlaces:0 ,
					duration: 5000,
				});
			});
		</script>

DIV:

  <div id="horario">
   
             <?php 
$dateTime = new DateTime('2015-08-13 00:00:00');
$dataAtual = new DateTime();// Irá depender da hora do servidor, no meu caso, para o teste eu configurei a hora para '2012-11-26 16:14:59'
$diferenca = $dateTime->diff($dataAtual);
$minutosDecorridos = ((($diferenca->format('%a') * 24) + $diferenca->format('%h')) * 60) + $diferenca->format('%i') -300 ;
$vitimas_cafe = floor($minutosDecorridos / 60); 
$projetos_fim = floor($minutosDecorridos / 480);
$horas_trab = floor($minutosDecorridos / 180);
$cafes = $vitimas_cafe + 2500;
$projetos = $projetos_fim + 9500;
$horas = $horas_trab + 25300;
$metro = $vitimas_cafe + 12354;?>
            <div id="img-horario">
                <div class="wrap4">
                    <ul>
                        <li class="liH2" style="margin-right: 145px;">
                             <img src="images/hora/02.png">
                            <h1 class="spincrement"><?php echo "$horas"?></h1>
                            <h2 style="
    margin-left: 13px;
">HORAS TRABALHADAS</h2>
                        </li>
                        <li class="liH2" style="margin-right: 145px;margin-top: 14px;">
                             <img src="images/hora/03.png">
                            <h1 class="spincrement"><?php echo "$projetos"?></h1>
                            <h2 style="
    margin-left: 8px;
">PROJETOS FINALIZADOS</h2>
                        </li>
                        <li class="liH2" style="margin-right: 145px;margin-top: 21px;">
                              <img src="images/hora/01.png">
                            <h1 class="spincrement"><?php echo "$metro"?></h1>
                            <h2 style="
    margin-left: 12px;
">METROS DE IMPRESSÃO</h2>
                        </li>
                        <li class="liH2" style="
    margin-top: -3px;
">
                            <img src="images/hora/04.png">
                            <h1 class="spincrement"><?php echo "$cafes"?></h1>
                            <h2 style="margin-left: 30px;">XÍCARAS DE CAFÉ</h2>
                        </li>
                    </ul>
                </div>
            </div>
   
    </div>

[Lucas Guima 164]

Vista em que sentido?

 

Ela está abaixo do scroll da tela? Ou tá oculta e será exibida?

[kaiquemix 1]

Vista em que sentido?

 

Ela está abaixo do scroll da tela? Ou tá oculta e será exibida?

 

é um site de pagina unica, essa div está em baixo da tela ae quando você rolar para essa DIV a animação do cotator começa

[Lucas Guima 164]

Utilize o valor do scroll da tela, quando alcançar a sua div, faça o que tem que fazer.

[kaiquemix 1]

Utilize o valor do scroll da tela, quando alcançar a sua div, faça o que tem que fazer.

 

Poderia me da um exemplo???

[kaiquemix 1]

Tentei assim mas não deu certo.....

<script type="text/javascript">
			$("#horario").ready(function (){
  $('.spincrement').spincrement({
    from: 0.0,
    decimalPlaces:0 ,
    duration: 4000,
  });
});
		</script>

[William Bruno 1501]

É a mesma técnica daqui:

 

http://wbruno.com.br/javascript-puro/como-fazer-menu-fixo-apartir-de-certa-rolagem-da-pagina/

 

Quando o scroll chegar a tal posição, ai sim vc ativa o contador.

[danicarla 3]

E no caso se ela estiver oculta?

[kaiquemix 1]

É a mesma técnica daqui:

 

http://wbruno.com.br/javascript-puro/como-fazer-menu-fixo-apartir-de-certa-rolagem-da-pagina/

 

Quando o scroll chegar a tal posição, ai sim você ativa o contador.

 

Ae a animação só pega se eu atualizar a pagina quando top > 2800