Desenvolvedor Web Blog

Anime um texto usando efeito de maquina de escreve ou alguém digitante, onde cada letra é carregada uma de cada vez. Primeiro crie uma Tag HTML , com uma Class e um pequeno texto. <h2 class="escrever">Estou escrevendo uma frase.</h2> Agora vamos criar o código em Javascript . Primeiro, pegue a frase usando o "querySelector", colocando dentro de uma constante. const texto = document.querySelector(".escrever"); Segundo, vamos criar um objeto construtor, com a função "animar" que recebe um parâmetro "frase". function animar(frase) { } OBS o parâmetro "frase" recebe o valor da constante. Terceiro, será criado outra constante, transformando o texto em um Array usando split , e logo depois transformando o valor em uma string vazia, dessa forma permite que cada letra seja carregada. function animar(frase) {       const textoArray = frase.innerHTML.split('');    

Overlay Fade Criar um efeito overlay pode ser muito útil quando tem a necessidade de um efeito Hover, assim permite sobrepor uma div com outro conteúdo criando um efeito interessante.   Vamos iniciar criando o HTML , com uma div principal onde fica a imagem e outra div dentro dela que vai conter um texto. <div class="limite"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaphjgLO9MW3ubrVvy1GJVa5p-odTKZbdulJJM65N24zhSvUaBR-HzgO7hUqVCtrEPwKYFfs-eD8jTGGZBZdDijGo5_QBTYE-1lfoZR-Hn6u83uxMIrm1G8JakAbe_YDfxwj5mPhOMTUPV/s320/CSS32.jpg" alt="css" class="img"> <div class="overlay"> <h2>Overlay Fade</h2> </div> </div> Preparando o CSS Vamos iniciar o CSS  da div principal, primeiro será necessário definir o tamanho da div principal que vamos atribuir uma class chamada "limite". .limite{ position: relative; width: 300px; he

Estilo no Range. Criar um estilo no input tipo range é simples, vamos criar uma class chamada de ".estilo" com esta class vamos edita o background e também a bolinha que se movimenta. Antes de inciar o estilo será necessário criar o HTML . <input type="range" min="0" max="100" value="50" class="estilo" id="valor">  <br>  <p id="resultado">.</p> No final vamos usar o ID resultado para informar o valor. Criando o estilo CSS Primeiro o estilo do background. Aqui você vai manter o width como 100%, mas pode alterar o height e o border. .estilo {     -webkit-appearance: none;     background: #d3d3d3;     outline: none;     width: 100%;     height: 20px;     border-radius: 9px;    } Segunda parte criar a estilo da bolinha. .estilo::-webkit-slider-thumb {     -webkit-appearance: none;     appearance: none;     width: 25px;     he

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

Criar uma calculadora simples. Vamos desenvolver um calculadora simples usando os operadores básicos, contendo 3 campo input 1 campo select e um paragrafo para o resultado. Primeiro criar o HTML . <form> <input type="number" name="" id="numero1"> <select id="operacao">   <option value="+"> + </option>   <option value="-"> - </option>   <option value="*"> * </option>   <option value="/"> / </option> </select> <input type="number" name="" id="numero2"> <input type="button"  value="calcular" id="calcular"> <br> <p>Resultado: <span id="resultado">.</span></p> </form> Criando o objeto construtor com JavaScript. Vamos chamar de  calculadora e dentro serão criadas variáveis para

Mudando o estilo com JavaScript. Hoje vamos mudar o estilo de um titulo, apertando botões, e esses botões vão passar o nome de uma variável que estará guardando o estilo. Primeiro construir o HTML basico, contendo <H1> e <button>. <button id="estilo1">Estilo 1</button> <button id="estilo2">Estilo 2</button> <br> <h1 id="resultado"> Titulo </h1> Vamos para o nosso JS. Segunda parte colocar o ID em variáveis. let estilo1 = document.getElementById('estilo1'); let estilo2 = document.getElementById('estilo2'); let  resultado  = document.getElementById(' resultado '); Terceira parte criar a variáveis em forma de ARRAY para guardar os valores. var bt1 = { color: 'red', fontSize: '1rem',} var bt2 = { color: 'blue', fontSize: '3rem',} Quarta parte, vamos usar o ID do botão e colocar um evento de Clic

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