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 ).
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:
- é divertido e lunático.
- Como desenvolvedor CSS, você nem sempre tem acesso ao código JavaScript e, usando esse truque, não precisa.
- 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.