15 fevereiro 2013

Fazendo seus Efeitos com KeyFrames

| |
{Créditos se repassar ou usar!}
Já faz um tempinho que me pediram para postar tipo uma base para fazer Efeitos com KeyFrames, só que não dá para fazer {exatamente} uma base, infelizmente. Tem que entender números e skew, translate, scale e rotate, essas coisinhas chatas. Mas não se preocupem! É super fácil!

Ah, repararam no novo lay do blog? Eu mudei porque aquele verde, apesar de ser fofinho e ter caído bem com aquele tom de vinho, fazia meus olhos doerem. Como eu disse, eu estou usando o monitor do meu pai que é bem velho e toda a vez que muda de monitor a cor que antes ficava bem agora ficou muito ruim, fazendo os olhos doerem.

Bem, vamos ao tutorial?

Primeiro temos que saber o CSS Transform {scale, translate, skew e rotate} para podermos montar um código.

Scale
Aumenta e/ou diminui uma foto/menu. Uma foto normal é definida por 1. Para aumentar a foto coloque, por exemplo, 1.1 ou para diminuir 0.8
Eu usei no efeito HeartBeat para representar um ♥ pulsando.

Exemplo de código {Veja o Live Preview de HeartBeat para entender do que eu falo}:
1% {-webkit-transform: scale(0.8);} | É a foto em tamanho pequeno

50% {-webkit-transform: scale(1);} | Foto em tamanho normal

100% {-webkit-transform: scale(1.1);} | Foto maior
Entenderam? um número maior que 1 é = a foto maior; números menores que 1 são = foto menor; uma foto com número 1 = a uma foto em seu tamanho normal.

Skew
Permite inclinar uma imagem. Números positivos vão para a direita e negativos para a esquerda.
Usado no efeito Vai e Volta.
Exemplo de código {LP do efeito}
0% {-webkit-transform: skew(15px);}

50% {-webkit-transform: skew(-25px);}

100% {-webkit-transform: skew(20px);}

100% {-webkit-transform: skew(-15deg);}
Entenderam?

Translate
Desloca a imagem/o menu para outro lugar. Eu usei em um menu {Jumping} e também é usado em um efeito bem legal, o efeito cool {LP da efeito}. O menu "pula" e o efeito cool dá uma viradinha para a direita.
10% {-webkit-transform: translatey(-5px);}

55% {-webkit-transform: translatey(-15px);}

100% {-webkit-transform: translatey(-10px);}
Rotate
Faz a imagem/menu girar. Porém só da uma volta por completo com 360deg ou -360deg. Em meus códigos quando eu uso o rotate, eu uso número pequeno como 5deg/-9deg, por exemplo.
Eu usei no efeito Shaking, um dos meus primeiros.

0% {-webkit-transform: rotate(-5deg); }
25% {-webkit-transform: rotate(4deg); }
50% {-webkit-transform: rotate(-6deg); }
75% {-webkit-transform: rotate(9deg); }
100% {-webkit-transform: rotate(-5deg); }
100% {-webkit-transform: translatey(-10px);} {pode se usar outro efeito junto}
Montando o código!
Agora que você já sabe as classes de CSS Transform, vamos aprender a montar o código.

@-webkit-keyframes NOME {
1% {-webkit-transform: CLASSE(NÚMEROpx); }
25% {-webkit-transform: CLASSE(NÚMEROpx); }
50% {-webkit-transform: CLASSE(NÚMEROpx); }
75% {-webkit-transform: CLASSE(NÚMEROpx); }
100% {-webkit-transform: CLASSE(NÚMEROpx); }
}
@-moz-keyframes NOME {
1% {-moz-transform: CLASSE(NÚMEROpx); }
25% {-moz-transform: CLASSE(NÚMEROpx); }
50% {-moz-transform: CLASSE(NÚMEROpx); }
75% {-moz-transform: CLASSE(NÚMEROpx); }
100% {-moz-transform: CLASSE(NÚMEROpx); }
}
@-o-keyframes NOME {
1% {-o-transform: CLASSE(NÚMEROpx); }
25% {-o-transform: CLASSE(NÚMEROpx); }
50% {-o-transform: CLASSE(NÚMEROpx); }
75% {-o-transform: CLASSE(NÚMEROpx); }
100% {-o-transform: CLASSE(NÚMEROpx); }
}
.NOME {-webkit-transition: .7s; border-radius: BORDAS ARREDONDADASpx; box-shadow: 1px 1px #caebe6;}
.NOME:hover {-webkit-animation: NOME .7s alternate infinite linear;}
Em NOME coloque qualquer palavra, mas tem que ser a mesma em todos em que se pede. Em classe, coloque uma das que aprendeu acima {scale, rotate, skew e translate}. Em número, é simples, coloque qualquer número, pode ser negativo (-nº) ou positivo.
Depois é só ir brincando com os números até achar algo que você quer. Vocês podem apagar uma das linhas que tenha 1% , 25% , 50% ou 75% {não mude o 100%}, ou você pode colocar número no lugar.

ATENÇÃO:
Só use NÚMEROpx se você for usar o skew e o translate |
Se usar o rotate use NÚMEROdeg |
Se usar Scale, coloque . com o pontinho no meio, nunca apague o ponto!
E sempre cole o código acima de ]]></b:skin>


Para colocar na imagem, no gadget HTML/JavaScript use:
<a href="LINK"><img class="NOME" src="URL DA IMAGEM" /></a> 
Em NOME coloque o mesmo que usou no outro código, e pronto ;P


Espero que eu tenha ajudado. Eu tentei fazer algo que pudessem entender, mas caso não tenha, eu posso mudar o tutorial. É só perguntar na Ask do blog.

Beijos!

19 comentários:

  1. Meu Deus amei seu layout linda, é maravilhoso seu blog, amei o tutorial, não pude deixar de notar que tem vagas para afiliados, aceita? :)
    Seguindo aqui

    Adolescente Nerd

    ResponderExcluir
  2. Embora não tenha entendido muita coisa,acho que tá até fácil. quero realmente aprender a criar meus efieto.Amei seu layout, na minha opnião,está mais bonito que o outro.Ontem eu levei um susto, vim dá uma passadinha aqui e o blog estava fechado para convidados,entrei em pânico,até que minha amiga falou,''ela deve tá arrumando o blog,fica calma''.Mas só hoje que chegou sua atualização no meu mural do blogger,fiquei mais calma.Obrigada.
    Sckitty World

    ResponderExcluir
  3. ola, seu blog é muito bonito, so quero te dar uma dica. muda a cor da fonte, pois branca fica muito ruim pra ler. bjos e mais sucesso

    ResponderExcluir
    Respostas
    1. Obrigada! Akie em casa fica bom para ler, mas depende do monitor, vai ver é o seu que tem uma configuração diferente.

      Excluir
    2. Aqui está tudo perfeito também, as letras dão para ver sem esforço nenhum.

      Já está na elite também, obrigada pela afiliação.
      adolescentenerd.blogspot.com.br/p/afiliados.html

      Excluir
  4. Amei o seu blog ele é lindo, bem diferente mesmo...amei!!!
    Já estou seguindo, quando puder visita lá o meu blog e me segue ta!
    Bjus, Dany
    http://diicascom.blogspot.com.br/

    ResponderExcluir
  5. Adorei o tutorial. Fica mais fácil fazer os efeitos, mas não acho que vai dar muito certo comigo. Logo vou tentar e ver oque sai, e depois aviso, ok?
    Beijos, Ana.
    TSD/perfil

    ResponderExcluir
  6. Adorei o tutorial, me ajuda bastante! Quando eu fizer um código, vou te colocar na área de créditos do meu blog!
    Ah, e seu layout está perfeito! Beijos!
    pqngarota.tk

    ResponderExcluir
  7. Muito bom o post,foi bem explicadinho! Com certeza vai ajudar muitos. waw amei o novo layout,ficou divo! beijos

    ~~ Quem precisa de tv para ver Beyoncé

    ResponderExcluir
  8. Era o que eu precisava *-* Isa diva, aqui tá lindo (como sempre, né u.u). Amei as cores.

    ~ Coisa linda, tem vaga para afiliação aqui?

    xx
    poisonhtml.blogspot.com

    ResponderExcluir
  9. Oie!
    Adorei o tutorial. Ele é bastante complicado, mas se acho que se eu prestar atenção eu consigo fazer ele direitinho pskoasopak Enfim, esse layout está simplesmente INCRÍVEL, eu adorei *--* Adoro esses tons de azul, dão uma sensação de tranquilidade, pois é. Ficou divo *--*
    Kissus ^.~

    ResponderExcluir
  10. Adorei o tutorial e o layout,esta lindo.

    Beijos
    Amora R.

    ResponderExcluir
  11. Amei o tutorial, vou fazer vários, ashuashua'. O seu novo layout, estpa mais do que perfeito, você pode abrir um portfólio, eu encomendaria, se fosse de graça, já que não tenho dinheiro. Beijos. Tem post novo lá no blog.
    Amantes de Moda | |

    ResponderExcluir
  12. Favoritadíssimo! Eu queria muito um tuto desses mas tinha preguiça de procurar uashuahshs obrigada mesmo, Isa! Vou ler amanhã pq já to indo nanar :3

    E eu adorei seu layout novo, ficou lindíssimo, sério, bem mais bonito que o outro. Mas eu também falo que a cor branca ta muito ruim pra ler, tive que reduzir o brilho, pois doi meus olhos ): mas fora isso ta uma graça, adoro seus códigos <3

    Beijos
    Too Kawaii

    ResponderExcluir
  13. plagiosinho do mutable-html hein??

    ResponderExcluir
    Respostas
    1. Onde?
      Eu, ao contrário de muita gente, tenho criatividade e inteligência suficiente para fazer meus próprios tutoriais, efeitos e códigos. Se você comparasse os tutoriais, saberia que isso não é plágio. Antes de acusar alguém, analise bem a situação para não ter que passar pela vergonha de ser mentiroso.

      Tenha um péssimo dia, liar ;*

      Excluir
  14. Este comentário foi removido pelo autor.

    ResponderExcluir
  15. Olá,linda seu blog é muito lindo d+,queria falar que eu tento tento tento tento muito fazer meu próprio efeito seguindo todos os seus passos mais nunca consigo,vc pode me ajudar por favor? : )

    ResponderExcluir
  16. Esse foi primeiro de tutorial de criar efeitos que funciona,e eu entendi!!!
    obrigada!

    ResponderExcluir

« »