Arquivado
Este tópico foi arquivado e está fechado para novas respostas.
- 0
Biblioteca funciona apenas com a primeira transição
Perguntado por
luisnascimento
-
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 FabianoSouza
Estou tentando fazer algo simples: redimensionar a altura de uma UL, usando classList.toggle (javascript).
Percebo que, se no CSS eu tentar aplicar o estilo em cascata, não faz efeito na UL só por estar dentro de uma DIV.
Se no CSS eu colocar:
.cnt-filtro-body ul{ list-style:none; position:relative; float:left; width:100%; height:0px; overflow:hidden; transition: height 0.5s; background-color:#FF0; display:block; pra estilizar somente ULs que estejam dentro da DIV que tem a classe chamada cnt-filtro-body, a coisa não funciona.
Só funciona se partir direto da ul, assim:
ul{ list-style:none; position:relative; float:left; width:100%; height:0px; overflow:hidden; transition: height 0.5s; background-color:#FF0; display:block;
Vejam o código.
<!DOCTYPE html> <html> <head> <style> .cnt-filtro-body{position:relative; height:50px; width:100%; } .secao-toggle{height:160px; display:block; float:left; position:relative;} ul{ list-style:none; position:relative; float:left; width:100%; height:0px; overflow:hidden; transition: height 0.5s; background-color:#FF0; display:block; } </style> </head> <body> <button onclick="myFunction()">Clique aqui</button> <div class="cnt-filtro-body"> <ul id="myDIV"> This is a DIV element. </ul> </div> <script> function myFunction() { var element = document.getElementById("myDIV"); element.classList.toggle("secao-toggle"); } </script> </body> </html> Minha necessidade é: estilizar apenas UL que estejam dentro da DIV que esteja usando a classe cnt-filtro-body
-
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/
-
Olá, eu estava desenvolvendo um projeto para a escola e queria fazer meio que um efeito de transição entre as páginas para quando forem selecionados os conteúdos, encontrei uma biblioteca que fazia umas transições legais e a baixei. Entretanto fui fazer algumas adaptações para o que eu queria, onde quando saísse a primeira, eu selecionasse o tipo de dado da segunda, mas, eu não consigo fazer isso, o menu não aparece.
Segue a biblioteca e o meu código
PageTransitions-master.rar
Compartilhar este post
Link para o post
Compartilhar em outros sites