aguarde...

25 de dezembro de 2020

Criação de aleatoriedade com CSS puro

Criação de aleatoriedade com CSS puro

Esses cartões foram feitos usando HTML e CSS apenas, sem JavaScript, sem Sass e sem outros scripts externos ou pré-processadores envolvidos.

Cada vez que você clica em uma carta, ele compra uma diferente, às vezes é um Rei de Copas, às vezes é um Ás de Espadas, às vezes é até um 9 de ouros ou qualquer outra carta em um baralho de cartas padrão.

<iframe height="265" style="width: 100%;" scrolling="no" title="CSS Random Cards" src="https://codepen.io/Adir-SL/embed/RwRMPwR?height=265&theme-id=light&default-tab=css,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/Adir-SL/pen/RwRMPwR'>CSS Random Cards</a> by Adir
  (<a href='https://codepen.io/Adir-SL'>@Adir-SL</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

Deixe-me tirar isso do caminho primeiro – CSS não tem nenhuma função “aleatória” embutida, nenhum Math.random()equivalente e nenhuma maneira de gerar um número aleatório ou uma cor aleatória.

Então, o que está acontecendo aqui?

Eleme nts não pode agir de forma aleatória em CSS porque não temos a função aleatória para controlá-los com, mas elementos ainda pode aparecer para agir de forma aleatória usando uma forma intrincada de animação.

Os cartões no exemplo acima são animados por diferentes estados muito rápido, e o clique do usuário em cada cartão pausa a animação, fazendo o cartão virar em qualquer um dos estados.

O usuário pode clicar nos cartões a qualquer momento, mas a animação é tão rápida que atua como uma semente aleatória para nossa interação. Esses cartões, por exemplo, percorrem todos os 52 estados em apenas 1 segundo.

Isso é o que eu gosto de chamar de Animação de Schrödinger, já que os elementos estão em ambos os estados ao mesmo tempo e somente pela interação os fazemos colapsar em um estado definitivo de ser.

Eu a chamo carinhosamente de Animação de Schrödinger em homenagem ao físico austríaco que criou o experimento mental na física quântica (o experimento é conhecido como o gato de Schrödinger ).

Criação de aleatoriedade com CSS puro
O gato de Schrödinger, desta vez o gato está vivo, para mais leitura – Wikipedia

No experimento de Schrödinger, o gato está vivo e morto ao mesmo tempo, enquanto apenas uma inspeção mais detalhada (interação do usuário) pode fazê-lo permanecer em um dos dois estados.

O truque de Schrödinger é exatamente o que estamos usando, estamos fazendo a animação muito rápida para que o usuário não consiga nem ver os quadros individuais, e então uma interação do usuário irá pausar a animação.

O truque de Schrödinger é exatamente o que estamos usando, estamos fazendo a animação muito rápida para que o usuário não consiga nem ver os quadros individuais, e então uma interação do usuário irá pausar a animação.

Este truque é especialmente útil se você for capaz de esconder o próprio mecanismo, se você esconder a animação, como nossas cartas viradas ou nossas galinhas (o Codepen no final deste artigo), então o usuário nunca pensará em tentar cronometrar ao contrário de uma máquina caça-níqueis, que pode ser puxada exatamente no momento certo.

Mesmo que o usuário tentasse cronometrar, a animação entre os diferentes estados é tão rápida que é quase impossível cronometrar corretamente.

Por que usar random em CSS puro e não em JavaScript?

Essa forma de randomização tem algumas vantagens principais:

  1. é divertido e lunático.
  2. Como desenvolvedor CSS, você nem sempre tem acesso ao código JavaScript e, usando esse truque, não precisa.
  3. Não é um método conhecido, o que significa que nem seus companheiros de equipe nem seus usuários entenderão o que está acontecendo, os usuários não serão capazes de jogar este sistema tão facilmente e como um bônus – você pode deixar outros desenvolvedores em sua equipe loucos tentando depure-o.

Nem seus colegas de equipe nem seus usuários entenderão o que está acontecendo, os usuários não serão capazes de manipular este sistema tão facilmente e como um bônus – você pode deixar outros desenvolvedores em sua equipe loucos tentando depurá-lo.

Postado em Blog
Escreva um comentário