Desenvolvedor Web Blog

Postagens

Mostrando postagens com o rótulo JQUERY

Trocar de palavra com tempo e efeito usando Jquery.

- fevereiro 12, 2018

Trocando a palavra. Criar efeito é muito importante, torna a pagina mais interativa e agradável visualmente. Vamos aprender como fazer a troca de palavra e ao mesmo tempo tornar essa troca mais suave usando efeito. Prepare o arquivo HTML com um paragrafo e um span. <p>Chocolate <span id="frases"></span>.</p> 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 a troca de palavra. Primeiro vamos definir as variáveis, uma para guardar as frases, uma para o tempo e uma para definir o valor do array inicial. let textos = ["branco", "preto", "amargo"] let atual = 0 let tempo = 3000 Segundo pegar o ID do span que vai receber a frase, e cri...

Leia mais

Animar ao Scroll com jQuery

- janeiro 26, 2018

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

Leia mais

Diminuir o Menu fixo no Scroll.

- dezembro 01, 2017

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

Leia mais

Criando um botão scrollTop.

- novembro 30, 2017

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

Leia mais

JQuery - Efeitos Mostrar/Ocultar.

- abril 05, 2017

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

Leia mais