Desenvolvedor Web Blog

Scroll com jQuery Animar uma pagina ao Scroll usando jQuery é muito simples, usaremos 3 variáveis e dua function, isso em poucas linhas. Antes de inciar visite o site do jQuery para baixar os arquivos ou utilize o CDN abaixo. <script   src="https://code.jquery.com/jquery-3.2.1.min.js"   integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="   crossorigin="anonymous"></script> Criando animação CSS simples. Vamos criar dua class sendo um para animação inicial e outra para quando for realizado o Scroll. .anime{ opacity: 0; transition: 0.5s; transform: translate3d(-200px, 0, 0); } .anime-ativa{ opacity: 1; transition: 0.5s; transform: translate3d(0px, 0, 0); } Aplicando Class no HTML A class pode ser aplicada direto na imagem ou paragrafo para animar, ou se preferir pode ser criada uma div para colocar tudo dentro a animar todos ao mesmo tempo. <div class="anime"> ...

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...