Desenvolvedor Web Blog

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