Experimentos utilizados no Front-End

[raphaklaus]

Olá pessoal, quais experimentos de front end vocês consideram incríveis? Fiquem à vontade para comentar também como foram feitos, quais bibliotecas foram usadas por exemplo...

[bernardodiasc]

Alex the CSS Husky: http://codepen.io/davidkpiano/pen/wMqXea
Apenas Sass e HTML (com uma pitada de SVG).

Uma parte que achei sagaz é como ele aplicou a animação em todos os elementos:

@mixin effect($name, $kf) {
  @keyframes #{$name} {
    @each $interval, $transform in $kf {
      #{percentage($interval/$total-kf)} {
        transform: $transform;
      }
    }
  }
}

[vitor-mendrone-deel]

Gosto muito desse Gameboy:

http://bchanx.com/animated-gameboy-in-css

[vitor-mendrone-deel]

Outro que eu gosto bastante:

http://species-in-pieces.com/

[lucasbento]

Cara, curto demais animações mas num manjo quase nada, vocês tem algum material para recomendar para um beginner nisso?

[vitor-mendrone-deel]

@lucasbsilva Esse site tem alguns tutoriais interessantes pra ir pegando uma base.

Codepen também é um bom lugar pra encontrar coisas legais e dar uma xeretada nos códigos.

[felipefialho]

Vou colocar alguns que desenvolvi entre 2012 e 2014, posso? haha

• Eric Cartman
• Clockwork Orange
• Merry Christmas!
• Piano Keyboard

[vitorbritto]

Modificando o título para pt-BR.

Cc: @raphaklaus @frontendbr/admins

[felipefialho]

@vitorbritto +1

[raphaklaus]

👍

[kazzkiq]

O Tearable Cloth também é um exemplo muito show.

Eu também vou compartilhar dois meus 😄 (se você espera algo nível Husky, nem entre haha):
CSS Only Interactive Chart
CSS Only Responsive Menu

[Cleysonlb]

Fiz um superman Pixel por pixel e animei :) faz um tempo já mas ta ai!
http://codepen.io/Cleyson/pen/oGnsb

[lagden]

Todos os meus mockups ficam no codepen.io!!
codepen.io/lagden

o último que fiz foi a tela do Matrix!!!
a ideia era fazer com css, só que tava dando um puta trampo!
http://codepen.io/lagden/full/PZBBaE

[raphaklaus]

@lagden Woww! De alguma forma a gente tava conectado esses dias então, auhauhauh, porque eu fiz esse mesmo efeito, mas utilizando só CSS.

http://raphaklaus.github.io/matrix-fx/

Eu vi seus outros pens, muito bom cara.

[lagden]

@raphaklaus caraca!!! ficou animal!! 😲

[adamsalves]

E aí pessoal, salve!

Esses dias fiz essa animação http://codepen.io/adams_alves/pen/Xdpaer Tem alguns errinhos, mas no geral ficou legal. ;)