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

O menu fixo pode ser uma boa solução de UX Design, esse tipo permite que o usuário navegue entre as principais páginas do site a qualquer momento durante a navegação, mas dependendo do tamanho do menu fixo isso pode ser um problema. Pensando nisso muitos sites usam um técnica que diminuem o tamanho de logo, fonte e até ocultam alguns elementos assim a barra fica menor e o usuário ainda pode usar o menu.  Podemos fazer isso utilizando o Jquery. <script   src="https://code.jquery.com/jquery-3.2.1.min.js"   integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="   crossorigin="anonymous"></script> Primeiro , defina o estilo da sua barra, ou copie o exemplo abaixo. <style> body{margin: 0; height: 1300px;} nav{ background-color: #8BC34A; display: flex; justify-content: space-around; align-items: center; position: fixed; top:10px; height: 120px; width: 100%; transition: all 0.6s; } .logo{ fon

ScrollTop. Possuir no site um botão que ajuda voltar ao topo da pagina com mais facilidade, agrada muito os usuários mas nem todos os sites tem esse botão de scrollTop . Antes de iniciar o desenvolvimento desse botão coloque em seu projeto o arquivo do Jquery . Definir o estilo do seu botão. Fique a vontade para estilizar na forma que mais o agrada, ou utilize o exemplo abaixo. <style> .btn { border:0; background-color: black; color:#fff; padding:1rem; font-size: 1rem; position: fixed; bottom:1rem; right: 1rem; } </style> Botão <button class="btn">Subir</button> Vamos ao código para controlar o botão. Primeiro , coloque em uma variável a class referente ao botão. var subir = $('.btn'); Segundo , vamos colocar a " Var" com o nome de subir e chamar o evento de click. subir.on('click', function(){ }) Terceiro , animar o Body e o HTML para isso passamos dois paramentos que se

Em algum momento você já teve a necessidade de criar uma animação ou algum efeito em uma imagem ao passar o mouse. Para facilitar o trabalho o Hover Animate criou um pequeno arquivo CSS que atende essa necessidade. É recomendado que junto ao Hover Animate seja utilizado algum framework para tornar o teu site responsivo. OBS: o estilo e cores tanto de letra quanto de botão é de responsabilidade sua. Confira. https://diegomoralesnavarro.github.io/-hover-animate.github.io/dist/index.html

Estrutura do @keyframes. Com o @keyframes podemos definir o início e fim da animação, possibilitando várias combinações. Podemos montar de duas formas sendo com from e to , ou por porcentagem 10% e 100% . @keyframes anim {     from {font-size: 10px;}     to {font-size: 50px;} } From é o inicio da animação, e to é o fim da animação. @keyframes anim {     10% {font-size: 10px;}     40% {font-size: 20px;}     80% {font-size: 10px;}     100% {font-size: 40px;} } Usando porcentagem podemos criar etapas mais específicas, fazendo ficar maior depois menor e no final maior novamente, entre outras formas. Chamar a animação. Após o nome @keyframes vem o nome da sua animação, esse nome vamos usar para chamar a animação. .anim {   animation-duration: 1s;   animation-name: anim; <!-- nome -->   animation-fill-mode: both; } Observe que usamos o mesmo nome tanto na chamada da class e na função css . Usando a anima

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

Efeitos Mostrar/Ocultar Existem varias formas de  mostrar e ocultar um conteúdo, com um ou vários botões de acordo com a necessidade. Para utilizar o Jquery é necessário baixar o arquivo javascript ou utilizar o CDN do Jquery. Coloque o seguinte CDN logo abaixo da Tag <body> do código HTML . <script  src="https://code.jquery.com/jquery-3.2.1.js"   integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="   crossorigin="anonymous"> </script> Efeitos utilizando hide(), show() e toggle(). Hide: Esconder o conteúdo. Show: Mostrar o conteúdo. Toggle: Mostrar e esconder o conteúdo de modo alternado. Efeitos utilizando fadeIn(), fadeOut, fadeToggle e fadeTo(). FadeIn: Esconder o conteúdo. fadeOut: Mostrar o conteúdo. FadeToggle: Mostrar e esconder o conteúdo de modo alternado. fadeTo: Tornar visível ou invisível configurado pela opacidade (valor entre 0,0 e 1,0) nesse caso o conteúdo não fica e

Criando um sistema de grid. Ter um site responsivo é muito importante, um site que é responsivo consegue se reconfigurar automaticamente de acordo com o tamanho e tipo de dispositivo que o visitante estiver utilizado. O sistema de grid permite que o site seja responsivo, muitas páginas da web são baseadas em Grid, isso significa que a página é dividida em colunas e assim fica mais fácil para colocar o elemento na página. Muitas vezes o sistema de grid possui 12 colunas, sendo que o tamanho total da tela sempre é 100% não importando o dispositivo usado. Para funcionar o sistema de grid é necessário uma <meta> tag conhecida como viewport , esteja colocada acima da tag <title> . <meta name="viewport" content="width=device-width, initial-scale=1.0"> width=device-widthparte: Define a largura da página, para acompanhar mudança da largura do dispositivo (que irá variar dependendo do dispositivo). A initial-scale=1.0: Define o nível d

Usando o seletor nth-child ( ) O seletor nth-child( ) é usado para marcar determinado local ou linha, possibilitando aplicar vários estilos no local escolhido. Este seletor costuma ser usando em tabela , lista , parágrafo , spam e outros . Dentro do ( ) vão estar as instruções podendo ser em nome ou número possibilitando fazer diversas combinações para atender sua necessidade.  Exemplo de seletores nth-child(odd): Representa as linhas impares “modo simples e não permite maiores alterações”. nth-child(even): Representa as linhas Pares “modo simples e não permite maiores alterações”. nth-child(3): Representa o número da linha que deseja aplicar o estilo e sem repetição. nth-child(2n): Representa as linha que deseja aplicar o estilo, neste caso existe repetição, nth-child(2n+1): Representa a linhas impares, o 2n é a sequência de um sim e um não e o +1 representa a linha que vai iniciar. nth-child(0n+4): Representa que não foi escolhida um sequencia 0n,