O CodePen é um tesouro de demonstrações incríveis que aproveitam o poder das linguagens do lado do cliente. O lado do cliente é sempre limitado pelo que os navegadores nos oferecem, mas a criatividade e a esperteza dos desenvolvedores sempre ultrapassam os limites do que achamos que o front-end pode fazer. Graças ao CSS, à tela e ao WebGL, podemos fazer praticamente qualquer coisa em termos visuais. A seguir, apresentamos nove demonstrações do CodePen alucinantes que o deixarão de queixo caído.
Esta é uma demonstração God Tier™. A parte 3D da animação é excelente, mas adicionar a câmera do usuário leva essa demonstração para o próximo nível. A biblioteca three.js é incrível e é exatamente a ferramenta necessária para essa demonstração:
Veja a caneta playing kid – morph and skeletal animation por Sascha Sigl (@SaschaSigl) em CodePen.
É importante observar que não O JavaScript é necessário para essa demonstração de animação elegante. Especialmente agradável é a sombra mostrada na parte inferior do cubo:
Veja a caneta Controle deslizante de cubo animado por Alberto Hartzet (@hrtzt) em CodePen.
Um dos meus objetivos de vida é vencer um cubo de Rubik e, graças a essa demonstração, finalmente consigo! Um pequeno detalhe, mas também adoro o cursor de arrastar.
Veja a caneta Cubo RubiCSS por Gregor Adams (@pixelass) em CodePen.
A verdade está lá fora e essa verdade inclui o fato de que a animação flutuante dessa demonstração é excelente. Nada de jank, nada de trabalho, apenas
Veja a caneta Disco voador em SVG por Chris Gannon (@chrisgannon) em CodePen.
Não sou um colecionador de histórias em quadrinhos, mas a animação do texto da Marvel aqui me torna um fã. Uau!
Veja a caneta Animação do logotipo da Marvel | CSS puro por Gregor Adams (@pixelass) em CodePen.
Essa incrível animação de lobo não requer JavaScript ou CSS para ser executada. A animação é fluida e tão impressionante quanto qualquer demonstração da lista!
Veja a caneta Veja a senhora, sem CSS nem JS!!! por @rafszul (@rafszul) em CodePen.
Adoro a suavidade da aceleração nessa demonstração. Também adoro o fato de que o senhor pode aumentar a velocidade e o volume dos confetes sem problemas, aparentemente sem impacto no desempenho!
Veja a caneta Gerador de Confettis por 16octets (@16octets) em CodePen.
Criada pelo mesmo autor de Playing Kid acima, essa demonstração apresenta um cenário em 3D com nuvens, um avião e um planeta giratório com árvores e água corrente.
Veja a caneta Ilha de Partículas por Sascha Sigl (@SaschaSigl) em CodePen.
As imagens dessa demonstração são as principais, mas são lindas. A dobragem do eixo de diferentes partes também é muito bonita.
Veja a caneta yoga! por Gerard Ferrandez (@ge1doot) em CodePen.
Uau. UAU. O que uma galeria é para os artistas é o que o CodePen é para os desenvolvedores interativos. Vamos deixar que isso sirva de inspiração para melhorarmos nosso jogo de desenvolvimento visual!
