Ir para conteúdo
New Job

animação ao carregar a página

Recommended Posts

Olá, alguem tem alguma ideia de como foi feito, ou como pdoeria ser feito algo como neste site, que ao navegar nos links, aparece uma pequena e simples animação com o título da página antes de carregar o conteúdo?

tela preta e título

 

https://www.thesocietymanagement.com/

Compartilhar este post


Link para o post
Compartilhar em outros sites

"New Job",

Considerando que você esteja usando uma biblioteca ou framework (por exemplo, React), pense o seguinte:

  • Você tem componentes e estados desses componentes;
  • No momento em que você acessa uma página, ele exibe o componente da imagem no topo da página;
  • E, por trás dos panos, ele atualiza todo o componente da página com os novos dados.

Esse seria o jeito mais leigo possível de te explicar como as coisas funcionam. É como um mágico que desaparece, primeiro aparece um pano na frente, enquanto, por trás, o mágico está se trocando.

Mas, para uma referência mais simples, imagine que você só tenha HTML, CSS e JS puros. A ideia é que você troque o innerHTML de um conteúdo mas, antes disso, exiba um elemento com position fixed e que preencha toda a sua tela. Quando o innerHTML terminar o que precisa fazer, você remove o elemento overlay.

Eu fiz uma versão bem gambiarra e simples utilizando, inclusive, setTimeout como referência para você entender como esse efeito pode funcionar. Lembrando que, no mundo real, não existem setTimeouts e, sim, alterações de estado que sua aplicação fica "escutando". O conceito não é complexo, mas vamos focar na transição dos efeitos. Veja aqui o exemplo: https://jsfiddle.net/pwo86qkr/1/

No caso de você precisar recarregar uma página (imagina que está num Wordpress), a página anterior pode exibir o overlay e, a página posterior já iniciar com o overlay ativo e desativá-lo no window load.

Em resumo: Existem várias maneiras de chegar nesse resultado e alguns deles dependem muito da escolha de tecnologia que você realizou mas, em suma, o efeito é super simples e pode ser gerenciado somente por JS e CSS.

Abraço!
 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Para fins de estudo de caso outros cheguem até aqui.

O site sem si fornecido pelo autor do tópico usa como referencia elemento de autua e largura totais, a a propriedade fixed sobre esses elementos para cobrir.

Quando uma página é trocada ela não é trocada... Vou explicar apesar de ser um link da tag <a> exite um evento a espera desse click.

No momento do click a função responsável troca o conteúdo da tag que irá cobrir ao mesmo tempo que a mostra pois ela está oculta.

Os efeitos nada mais é que css de margin, opacity etc... 

Voltando ao caso do click a função executa Asynchronous JavaScript And XML a um arquivo que irá devolver a resposta como texto html.

Durante o processo de comunicação do AJAX, o histórico da url é manipulado. Fazendo pensar que na verdade clicasse em algum link.

Quando a resposta está pronta a mesma função altera o html da página com o html da resposta e oculta o elemento que cobre a tela.

 

Etapas:

1 - Obter todos links

2 - Remover comportamento padrão dos links.

3 - Acionar uma requisição ajax quando o link é ativado.

4 - Enviar pedido ao servidor para que forneça o arquivo referente ao link ativado.

5 - Obter solicitar a resposta como text/html.  (Etapa 7 inicia aqui.)

6 - Alterar HTML do elemento de animação. 

7 - Alterar o histórico da url.

8 - Alterar o HTML do elemento que irá carregar a página.

9 - Alterar o HTML do elemento de animação.

 

O resto é só css simples e básico position/opacity/margin/translate.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Manoel Cicero
      bom, estou utilizando um programa que transforma ppt em html5. coloco o arquivo gerado em minha hospedagem, testo, funciona perfeitamente no pc ou notebook, até aí tudo bem!
      mas quando testo no smartphone ai complica!
      o desenvolvedor me indicou limpar o cache, mas, mesmo assim não funciona e o pior de tudo é que, se isso não funcionasse apenas no meu smartphone não seria problema. o problema é que ja testei em alguns outros e o problema se mantem. alguem poderia me ajudar?
      link de teste: http://www.biodidata.com.br/teste/revis.html
      no PC - tudo ok!
      No smartphone --> na imagem que surgir vá em "click para iniciar", em seguida clique na pergunta 2 - a página para!
      limpar o cache não funciona e não queria alterar qualquer coisa no smartphone porque não seria legal para o meu publico fazer alterações no seu celular só pra ver uma coisa que disponibilizo.
      agradeço!
    • Por Wallacy Pasqualini
      Olá!
       
      Sou iniciante em HTML, CSS e JavaScript. Recentemente, criei uma apresentação de slides com animação usando os programas InkScape, Enve 2D e Sozi. Gerou o seguinte código: (envio o link do Google Drive, pois não estou conseguindo anexar aqui: https://drive.google.com/file/d/1iqt_y6VBj8dogmZnx_kiuqCe2j50rad0/view?usp=sharing)
       
      O problema é que a animação contida no "layer5" ("texto.animado") é executada assim que o HTML é aberto, sendo que eu gostaria que ela fosse executada apenas no "frameId": "slide2".
       
      Alguém sabe como eu posso corrigir isso?
       
      Desde já, agradeço a disponibilidade e atenção!
       
      Atenciosamente,
       
      Wallacy Pasqualini
    • Por LucasSamuel
      Olá! Sou participante do grupo em um projeto de desenvolvimento de jogos em grupo. Estamos aceitando participantes de todos os tipos de categorias de desenvolvimento de jogos ... Convido você a participar deste projeto. A ideia de criar um grupo e ganhar US $ foi tirada de um colega meu que tinha câncer e acabou morrendo com esse sonho. Até agora, temos 4 participantes que, juntos, estamos tentando reunir 20 pessoas que têm idéias como a nossa…
      O grupo está na versão beta, porque ainda precisamos conversar com todos os participantes e convocar uma reunião para decidir democraticamente sobre jogos de categoria de mecanismo, lucros, servidores ... Mas, a princípio, o dinheiro que você ganhará estará relacionado à sua porcentagem no desenvolvimento de jogos . EX: 10% do jogo que você ajudou a criar; portanto, 10% do jogo é seu. Portanto, 10% de todos os lucros do jogo serão seus.
      Você escolhe seus turnos e horários e quanto ajudará. Pedimos apenas que você tente realizar determinadas tarefas determinadas para você, caso contrário, outro desenvolvedor fará em seu lugar. NOTA: Quanto mais você contribuir para a criação do jogo, mais lucros obterá.
      O grupo não terá um chefe ou um “comandante” organizador… Pois no grupo somos todos os chefes. Portanto, as decisões são tomadas em grupos por meio de reuniões e também de votos onde colocamos nossas idéias.
      Precisamos de mais de 20 participantes para iniciar nosso projeto. Todos no início do projeto assinaram um contrato com todos os termos “legais” do grupo, que serão decididos com todos os participantes. Portanto, se você não gosta de algum aspecto do grupo, pode e deve comentar e alterar os termos ... 
      O nome da categoria de estilo de jogo ... será decidido em grupos para que cada participante apresente 1 ou mais idéias de jogo. Serão escolhidos os mais votados e os mais adequados para todos os participantes. será vendido em várias plataformas ... android, PC ... em muitas lojas online diferentes ... será vendido acima de 5US $ e abaixo de 30US $
      Diga o que você pensa se quiser saber mais ou ligue para mim no whatsapp: +55 51 993700013 
      Vamos apresentar a todos os participantes do nosso grupo e aplicá-lo ao nosso grupo, discutir, conversar, criar, testar, aplicar e vir com idéias para o grupo com você.
    • Por andre2654
      Bom dia, peço humildemente a ajuda de vocês,
      Enfim, estou fazendo um exemplo de site, só para teste mesmo, onde terá uma janela principal perguntando em qual site a pessoa quer ir(1 só empresa, porém dois negócios) ai se a pessoa clicar em alguma das melecas, quero que ela abra mostrando o site, ou só uma imagem mesmo

    • Por rakas
      ola pessoal, preciso mesmo de umas opiniões sobre - Que equipamento vale a pena para desenho - para posteriormente os desenhos serem usados para animação e ou modelação 3D.
       então a minha duvida é qual vale a pena um ipad ou uma mesa digitalizadora!?!? 
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.