Ir ao conteúdo
  • Cadastre-se

exaltada

Membro Júnior
  • Posts

    4
  • Cadastrado em

  • Última visita

Reputação

4
  1. Alguém sabe qual nome da animação de texto do clipe "Alone - Alan walker"? no final "You are not alone" onde as letras se movem e faz uma animação glitch. Quem souber eu apenas preciso do nome, pois irei fazer no after effects.
  2. html, body { width: 100%; height: 100%; margin: 0; padding: 0; background-color: blue; overflow: hidden; } h1 { font-family: sans-serif; font-size: 50px; color: #f00; margin-top: 0; } div.imagem { background-image: url(http://placecage.com/201/80); width: 200px; height: 80px; } p.centro { position: relative; z-index: 3; text-align: center; top: 50%; transform: translateY(-50%); color: #fff; font-family: 'Anonymous Pro', monospace; } .line { position: relative; width: 0px; margin: auto; border-right: 2px solid transparent; font-size: 180%; text-align: center; white-space: nowrap; overflow: hidden; } .anim-typewriter { animation: typewriter 5500ms steps(17) 500ms forwards, /* aqui você controla o tempo do efeito escrita mais 1 steps(X) para cada caracter */ blinkTextCursor 500ms steps(17) 12 backwards; /* aqui você controla o tempo da linha mais 1 steps(X) para cada caracter e ela repete 12x500ms = 6000ms */ } @keyframes typewriter { 0% { width: 0px; } 10% { width: 0px; } 25% { width: 270px; } 75% { width: 270px; } 90% { width: 0px; } 91% { width: 0px; display: none; } } @keyframes blinkTextCursor { from { border-right-color: transparent; } to { border-right-color: rgba(255, 255, 255, 0.75); } } div.bg { position: absolute; overflow: hidden; z-index: 2; width: 100%; height: 100%; background-color: #000000; top: 0; left: 0; opacity: 1; animation: fade 7500ms forwards; /* aqui você controla o tempo que a tela preta demora para sumir XXXms */ } @keyframes fade { 0% { opacity: 1; height: 100%; } 80% { opacity: 1; height: 100%; } 99% { opacity: 0; height: 100%; } 100% { opacity: 0; height: 0; } } <p class="centro line anim-typewriter">Sejam bem vindos!</p> <div class="bg"></div> <Section> <h1>Meu site</h1> <div class="imagem"></div> </Section>
  3. Obrigada DIF! Mas já consegui resolver, agradeço por tentar ajudar..
  4. HELP AMIGOS, inclui uma animação de inicio do meu projeto ( exemplo "sejam bem vindos" ) e logo em seguida ir pra home principal, mas no caso fica os 2 junto... Será que é possível?

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...