Clever Geek Handbook

Truques de CSS e JavaScript para dar vida ao seu site estático

Tenho trabalhado no meu site nas últimas semanas e queria dar-lhe algum dinamismo. Este artigo não é sobre como criar uma página da web. Vou mostrar trechos prontos com explicações.







Animação 3D em JS

O primeiro truque é um efeito 3D maravilhoso em JS.





Como você pode ver, quando o ponteiro do mouse se move sobre este "cartão", os elementos dentro dele adquirem tridimensionalidade.



Como fazer



Primeiro, o div HTML é criado: 



<div class="card">
  <div class="header">
    <img src='image.png' alt="image">
  </div>
  <div class="info">
    <h1 class="title"><a href="https://hackerone.com/hensis">Hackerone</a></h1>
    <h3>Started on 6/20 Signal : 5.67 Reputation : 360 Impact : 26.25</h3>
  </div>
</div>


Aqui temos uma classe principal (cartão) e duas outras classes dentro do cartão (cabeçalho e informações). O cabeçalho será a classe que contém a imagem (em nosso exemplo, o logotipo do Medium) e as informações conterão o texto do cartão. Agora vamos adicionar CSS para melhorar a aparência do mapa. 



.card {
    transform-style: preserve-3d;
    min-height: 64vh;
    width: 20vw;
    border-radius: 30px;
    padding: 0rem 5rem;
    box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2), 0px 0px 50px rgba(0, 0, 0, 0.2);
}


Aqui eu declarei altura, largura, borda, preenchimento e sombra. Atualize a página e você verá os resultados. A última etapa é obter um efeito 3D quando você passa o mouse sobre o mapa. Para isso, usei JS: 



// declaring variables

const card = document.querySelector(".card");
const title = document.querySelector(".title");
const header = document.querySelector(".header img");
const description = document.querySelector(".info h3");

// Animate In

card.addEventListener("mouseenter", (e) => {
  card.style.transition = "none";
  title.style.transform = "translateZ(3px)";
  header.style.transform = "translateZ(3px) rotateZ(0deg)";
  description.style.transform = "translateZ(3px)";
});

// Animate Out

card.addEventListener("mouseleave", (e) => {
  card.style.transition = "all 0.5s ease";
  card.style.transform = `rotateY(0deg) rotateX(0deg)`;
  title.style.transform = "translateZ(0px)";
  header.style.transform = "translateZ(0px) rotateZ(0deg)";
  description.style.transform = "translateZ(0px)";
});


  1. Declare variáveis.
  2. Crie dois ouvintes de eventos para o cartão.
  3. No mouseenter, traduza Z para 3 pixels para título, cabeçalho e descrição. Você também pode decidir se deseja girar esses elementos ou não (rotateZ).
  4. Na saída do mouse, traga tudo de volta ao normal.


É isso: você tem uma bela animação 3D. Claro que está cru agora. Você pode adicionar CSS em qualquer lugar para alterar a largura, cor, etc.



Descubra Vanta.js para animação de fundo

Cansado de cores e imagens estáticas no fundo da sua página da web? O VantaJs foi projetado para dar vida ao cenário:







Como é feito



É muito simples. Adicione o seguinte código ao HTML: 



<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
<script>
  VANTA.GLOBE({
  el: "#htmlid",
  mouseControls: true,
  touchControls: true,
  gyroControls: true,
  minHeight: 200.00,
  minWidth: 200.00,
  scale: 1.00,
  scaleMobile: 1.00
  })
</script>


Isso definirá o fundo do globo Vanta.js para o htmlid.

Vanta.js tem 13 fundos pré-construídos




Para alternar entre eles, altere VANTA.GLOBE para VANTA. [Backgroundname]. Claro, antes disso você precisa adicionar o cdn.jsdelivr.net/npm/vanta@latest/dist/vanta correspondente . [Backgroundname] .min.js



ScrollReveal

Para quem não sabia sobre esta fantástica biblioteca JS, ScrollReveal pode exibir elementos ao rolar uma página da web:







Como isso é feito



  1. Adicione ao cabeçalho do seu HTML.
  2. No arquivo JS, escreva:


ScrollReveal().reveal('.htmlclass',{ delay: 400 })


O código irá renderizar um elemento com classe .htmlclass com 400ms de atraso na rolagem da página.



Altere o tamanho e a cor das letras

Este pequeno truque de CSS é realmente impressionante quando usado corretamente:







Como fazer



Crie alguns novos elementos HTML span e especifique sua classe: 



<span class="change">T</span><span class="change">e</span><span class="change">s</span><span class="change">t</span>




3. Aplicando CSS: passe o mouse, mudamos o tamanho das letras e sua cor: 




.blast:hover {
    color:#08fdd8;
    font-size: 30px;
}


Agora, ao passar o mouse sobre as letras, você verá como elas mudam de tamanho e cor. Para obter um efeito ainda mais dinâmico, sugiro criar uma classe separada para cada letra com tamanhos e cores diferentes. Além disso, você pode aplicar CSS: hover a cada tipo de elemento em HTML. Por exemplo, também o apliquei ao meu formulário de contato:







Propriedade de animação

Complementamos o material com a descrição de uma propriedade de um artigo de Chris Coyer.



A propriedade de animação em CSS pode ser usada para animar muitas outras propriedades CSS, como cor , cor de fundo , altura ou largura . Cada animação deve ser definida usando @keyframes, que é então chamado usando a propriedade de animação, por exemplo: 



.element {
  animation: pulse 5s infinite;
}

@keyframes pulse {
  0% {
    background-color: #001F3F;
  }
  100% {
    background-color: #FF4136;
  }
}




Cada regra @keyframes define o que deve acontecer em certos pontos da animação. Por exemplo, 0% é o início da animação e 100% é o final. Esses quadros-chave podem ser manipulados com a propriedade abreviada da animação ou suas oito subpropriedades para fornecer mais controle sobre os quadros-chave.



Subpropriedades

  • animation-name: declara o nome da regra @keyframes a ser controlada.
  • animação-duração: duração de um ciclo de animação.
  • animation-time-function: Define curvas de aceleração predefinidas, como facilidade ou linear.
  • animação-atraso: tempo entre o carregamento de um elemento e o início de uma sequência de animação ( exemplos interessantes ).
  • animação-direção: define a direção da animação após o loop. Seu valor padrão é redefinido a cada ciclo.
  • animation-iteration-count: quantas vezes a animação deve ser executada.
  • animation-fill-mode: define quais valores são aplicados antes / depois da animação.

    Por exemplo, você pode definir o último estado da animação para permanecer na tela ou pode voltar quando a animação for iniciada.
  • animation-play-state: pausar / reproduzir a animação.


Então, essas subpropriedades podem ser aplicadas assim: 



@keyframes stretch {
  /* declare animation actions here */
}

.element {
  animation-name: stretch;
  animation-duration: 1.5s; 
  animation-timing-function: ease-out; 
  animation-delay: 0s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running; 
}

/*
  is the same as:
*/

.element {
  animation: 
    stretch
    1.5s
    ease-out
    0s
    alternate
    infinite
    none
    running;
}




Aqui está uma lista completa de valores que cada uma dessas propriedades aninhadas pode assumir:



animation-timing-function



atenuação, atenuação, atenuação, consolidação, linear, cúbico-bezier (x1, y1, x2, y2) (por exemplo, cúbico-bezier (0,5, 0,2, 0,3, 1,0))
animation-duration



Xs ou Xms
animation-delay



Xs ou Xms
animation-iteration-count



X
animation-fill-mode



para a frente, para trás, ambos, nenhum
animation-direction



normal, alternativo
animation-play-state



pausado, correndo, correndo




Poucos passos

Se a animação tiver as mesmas propriedades de início e fim, é útil separar os valores 0 e 100% dentro de @keyframes com vírgulas: 



@keyframes pulse {
  0%, 100% {
    background-color: yellow;
  }
  50% {
    background-color: red;
  }
}




Múltiplas animações

Você pode separar os valores com vírgulas para também declarar várias animações no seletor. No exemplo abaixo, queremos mudar a cor do círculo em @keyframe enquanto o movemos de um lado para o outro com uma propriedade diferente. 



.element {
  animation: 
    pulse 3s ease infinite alternate, 
    nudge 5s linear infinite alternate;
}




atuação

Animar a maioria das propriedades é um problema de desempenho , portanto, devemos ter cuidado antes de animar qualquer propriedade. No entanto, existem certas combinações que podem ser animadas com segurança:



  • transform: translate ()

  • transformar: escala ()

  • transform: rotate ()

  • opacidade



Quais propriedades você pode animar?

O MDN possui uma lista de propriedades CSS que podem ser animadas . Eles tendem a ser cores e números. Um exemplo de propriedade não animada é a imagem de fundo.



Mais Informações
  • MDN.

  • CSS.

  • W3C.

  • Jank busting .

  • - .

  • .

  • , , .

  • CSS .



.



Suporte de navegador

Os dados de suporte do navegador foram retirados do site do Caniuse para obter mais informações. O número significa que o navegador oferece suporte à função nesta versão e acima.



Mesa

cromada

Raposa de fogo

IE

Beira

Safári

4 *

5 *

dez

12

5,1 *



Móvel

Android Chrome

Android Firefox

Android

iOS Safari

87

83

4 *

6,0-6,1 *



Prefixos

Embora o suporte para essa propriedade em navegadores modernos seja bom o suficiente, podemos querer oferecer suporte ao maior número possível de navegadores mais antigos. Nesse caso, você precisa usar prefixos de fornecedor: 



.element {
  -webkit-animation: KEYFRAME-NAME 5s infinite;
  -moz-animation:    KEYFRAME-NAME 5s infinite;
  -o-animation:      KEYFRAME-NAME 5s infinite;
  animation:         KEYFRAME-NAME 5s infinite;
}

@-webkit-keyframes KEYFRAME-NAME {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes KEYFRAME-NAME {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes KEYFRAME-NAME {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes KEYFRAME-NAME {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}




Esses truques são ótimos para dar vida ao seu site de cartão de visita ou ao site de um projeto de estimação em que você está trabalhando. Se você tiver algum truque próprio, encorajo-o a compartilhá-lo nos comentários. E não se esqueça do código promocional HABR , que dá um desconto adicional de 10% ao indicado no banner.



imagem






Outras profissões e cursos
















More articles:


All Articles