Desenvolvedor Web Blog

Animando com o evento scroll. Ter uma pagina animada torna o site visualmente mais divertido, e dependendo do seu objetivo pode otimizar o carregamento da pagina exibindo as imagens somente quando estiver encima dela. Antes de iniciar o seu Javascript prepare o documento HTML criando um atributo "data" e uma class para criarmos o CSS . <p data-anime="right" >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore reprehenderit ipsa, cum minus ipsum ratione, voluptas maiores. Itaque tempore maxime autem, numquam laboriosam! Nam totam dicta, accusamus porro veniam, asperiores.</p> Agora que temos um Tag HTML com um atributo "data", vamos fazer o codigo CSS . [data-anime="right"] {   opacity: 0;   animation-name: Out-Height;   transition: 1s;   animation-duration: 1s;   animation-fill-mode: both; } [data-anime="right"].animate {   opacity: 1;   animation-name: In-Height;   trans

Usando .length A propriedade length retorna o número de unidade ou tamanho de código muito utilizado em Arrays e S tring s, Antes de iniciar coloque no final do seu código HTML a seguinte tag. <script type="text/javascript"> // seu código  </script> Modo simples, descobrindo o valor de caracteres dentro da String . JS var caracteres = "Descobrindo" document.getElementById("resultado1").innerHTML = caracteres.length; HTML <p id=" resultado1"></p> Ativando por botão. JS  totalCaracteres = () =>{  var texto = "Descobrindo a quantidade de caracteres deste texto .";  document.getElementById("resultado2").innerHTML = "Este texto contém " +  texto.length; } HTML <button onclick="totalCaracteres()">Try it</button> <p id=" resultado2">0</p> Pegando o valor da um Array , neste exemplo