-
Conteúdo Similar
-
Por Alessandro Bodão
Boa noite irmandade!
Ando reparando de alguns anos pra cá, uma forte tendência em que sites bem dinâmicos e interativos transitam de uma página pra outra sem que a outra página se quer passe por um processo de carregamento, você clica, simplesmente acontece algumas transições nos elementos da página, e de repente, você está em outra página, outro url. De forma suave, nada é carregado, apenas algo acontece e você já está em outra página.
Gostaria de saber como isso é feito pra aplicar em um site que estou desenvolvendo, se é algum framework, alguma ferramenta além do JavaScript...
Trouxe um belo exemplo: https://www.traffic.productions/
Se você chegou até aqui, agradeço desde já!
-
Por Omar~
Estou com uma tarefa aqui e não estou conseguindo criar uma lógica para adicionar uma transição entre os elementos.
Segue da seguinte forma:
Tenho uma caixa central que irá abrigar 3 ou mais caixas. Cada caixa filha tem exatamente as mesmas dimensões da paixa mãe. Ao executar a função a caixa que está ao centro move-se para esquerda e a da direita também assumindo a posição da caixa anterior. Quando por exemplo antes de chegar a última filha, a primeira que se moveu toma o lugar da ultima assim tornando-se uma espécie de loop infinito. Ou seja depois da última filha a primeira toma o lugar dela para que a atual última possa se mover ao centro.
Exemplo:
/ [1] / [2] - [3]
"clicou em avançar torna essa sequência"
[1] / [2] / [3]
Até aqui tudo bem, bastando eu clonar a primeira caixa atual, remover-la então logo em seguida adicionar a cópia no final.
Porém aqui que entra a questão pois teria que adicionar uma animação de transição, de forma que que as caixas movam-se lentamente para esquerda.
Aqui está o esboço de teste:
HTML:
CSS:
Javascript:
Eu pensei em recursos como marginLeft e translateX, mas em ambos casos sempre terei o problema que se eu mover negativamente as caixas, ao remover qualquer uma que é o caso da primeira ir para último, todas as demais caixas vão ficar fora da caixa central.
Quem tiver alguma ideia como adicionar essa transição de movimento, ficaria grato com a ajuda.
-
Por Sapinn
Opa galera tudo firmesa? Então, tenho um codigo que faz uma barra aparecer toda vez que eu role a pagina até um certo ponto e tudo funciona normal. Eu gostaria de saber se tem como fazer uma transição nessa barra para ele ir aparecendo devagarzinho com a opacidade em 0 e vai subindo até chegar a 1 coisa de um 0.8s. Não sei como fazer ou se tem como fazer preciso de ajuda.
Codigo js
window.onscroll = function(){
var top = window.pageXOffset || document.documentElement.scrollTop
var barra = document.querySelector(".barra");
if(top > 900){
barra.style.display = 'flex';
//aqui tentei adicionar uma class direto do css para fazer o efeito transition mas sem sucesso.
barra.classList.add('transition');
}else{
barra.style.display = 'none';
}
}
Codigo css
.barra{
width: 100%;
height: 70px;
background-color: #090b13;
display: none;
justify-content: space-between;
position: fixed;
opacity: 0;
}
.transition{
transition: 1s;
opacity: 0.7;
}
codigo HTML
<div class="barra" >
<img src="assets/images/logo-nopad.svg" alt="">
<button class="botao-assinatura-header">Assine Agora</button>
</div>
-
Por jackrs
Gostaria de saber como consigo colocar um animate/effect de transição mais "suave" na troca das divs do código anexo.
https://jsfiddle.net/h2av6nct/
-
Por Carlos Web Soluções Web
Olá, pessoal, boa tarde !!
Estudei toda uma apostila sobre CSS, porém não estou conseguindo realizar uma simples tarefa !!
Ao passar o mouse no 'button.botao', ativar o movimento do 'div.traco' ! Eis abaixo o 'Código Fonte' que estou tentando:
<!DOCTYPE html> <html> <head> <style> button.botao { width: 150px; height: 50px; border: none; background-color: black; color: red; font-size: 23px; } div.traco { width: 20px; height: 10px; background: red; -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */ transition: width 2s; } button.botao:hover div.traco { width: 150px; } </style> </head> <body> <button class="botao">Botao</button> <div class="traco"></div> </body> </html> Me ajudem por favor !
Obrigado !!
-
