Eu gostaria de começar a compartilhar meus conhecimentos e habilidades adquiridos com o tempo estudando e trabalhando com programação, afinal a maioria de nós desenvolvedores temos imenso prazer em compartilhar aquilo que aprendemos.
Então, nada melhor que começar logo, e com um efeito que inicialmente achei que me daria muita dor de cabeça, mas depois que entendi o conceito, foi até bem fácil de desenvolver
O efeito
A principio, principalmente pra quem está começando, pode parecer algo muito complexo. Mas ao final desse artigo vamos descobrir que na verdade é algo bem simples de se fazer!
Como fazer cada letra 'girar' no próprio eixo? E mais, como fazer o efeito acontecer de modo cascata?
Parece um bicho de sete cabeças? Vamos ver que isso não passa de um pequeno e inofensivo gatinho. Mãos no código!
Para esse exemplo, vou assumir que você já tenha noção básica de HTML, CSS e JavaScript. Sobre este terceiro, mas precisamente irei usar a biblioteca JQuery, que facilita (e muito!!!!!) principalmente na hora de selecionarmos os elementos do documento.
HTML
<h1 id="titulo">
<span>H</span>
<span>E</span>
<span>L</span>
<span>L</span>
<span>O</span>
<span> </span>
<span>W</span>
<span>O</span>
<span>R</span>
<span>L</span>
<span>D</span>
</h1>
A primeira ação a se fazer é separar cada letra do texto e tratá-la como um elemento independente. Para tal, basta que dentro do meu h1 (ou qualquer tag: h2, p etc) eu adicione cada letra como um span. Assim o html vai tê-las como elementos independentes.
CSS
#titulo {
width: 340px;
margin: 0 auto;
align-text: center;
}
#titulo span {
display: inline-block;
transition: .5s ease-out;
transform: rotate3d(0,1,0,0deg);
}
Aqui já começamos a entender como o efeito vai acontecer.
No primeiro seletor, estamos definindo uma largura para o h1 com classe titulo, centralizando ele horizontalmente e alinhando seu texto ao centro. Como sua largura padrão é 100%, seria um incomodo pois qualquer passada com o mouse na mesma direção do titulo, iria ativar o efeito. E nós não queremos isso.
No segundo seletor estamos definindo o comportamento padrão das nossas letras:
display: inline-block; precisamos defini-los assim, pois um span por default é um elemento inline e não pode ser rotacionado. Com essa linha forçamos eles para block e isso vai permitir que sejam rotacionados.
transition: .5s ease-out; aqui não tem muito o que explicar. Simplesmente definimos quanto tempo a transição vai durar e como ela vai acontecer.
transform: rotate3d(0,1,0,0deg); aqui parece confuso, mas não é: o nome da função já é autoexplicativo. Ela faz o elemento em questão girar no seu próprio eixo, sem alterar seu tamanho ou forma. Os três primeiros valores são respectivamente os eixos x, y e z, e o ultimo é a quantidade em graus que a rotação acontecerá.
#titulo:hover span {
transform: rotate3d(0,1,0,360deg);
color: red
}
Nessas ultimas linhas estamos adicionando o efeito hover que vai atingir a todos os span dentro do elemento #titulo , ou seja, nossas letras. Repare que a única alteração significativa que estou fazendo é fazer o rotate3d fazer com que os elementos deem uma volta de 360 graus em torno do seu eixo X . Somente com essas linhas, já obteremos o seguinte resultado:
Bem legal, né ?! Mas ainda não terminamos.
Javascript (Jquery)
Precisamos definir um delay gradativo para o nosso texto. Isso poderia ser feito no próprio css, mas tem que ser feito item por item, e se o texto for um pouco grande, não vai ser nem um pouco legal digitar isso tudo. Então apelamos ao Javascript (no caso, Jquery).
$(document).ready(function(){
$('#titulo').on('mouseenter', function(){
var delay = 0
$(this).children().each(function(){
var el = $(this)
el.css('transition-delay', delay+'s')
delay += 0.03
})
})
})
O que está acontecendo aqui é simples, mas vamos por partes:
$('#titulo').on('mouseenter', function() Aqui estamos definindo um evento que será executado sempre que o mouse 'entrar' no campo do elemento #titulo
$(this).children().each(function() Nessa linha estamos definindo uma função que irá percorrer todos os elementos filhos de #titulo, ou seja, nossas letras.
el.css('transition-delay', delay+'s')
delay += 0.03
Veja bem, a propriedade transition-delay do css, recebe um valor numérico que representa justamente o tempo que levará ate a animação iniciar.
Repare que, a cada iteração, estamos atribuindo a propriedade transition-delay no item em questão e logo após incrementando a variável delay em 0.03 (3 centésimos de segundo).
Vamos testar ?!
E voilá! Nosso efeito está funcionando como esperado! Não foi tão difícil, foi?
Aprender as principais propriedades e efeitos css e depois aprender a manipulá-los com Javascript/Jquery pode fazer com que você faça animações muito legais nas suas páginas HTML!
Indo um pouco além
Mas somos programadores! Gostamos de desafios! Vamos pensar um pouco: se por um acaso eu precisasse que esse efeito ocorresse de forma contrária ao retirar o mouse do elemento?
Para isso, basta adicionarmos uma outra função com o evento 'mouseleave' e ao invés de incrementar a variável delay, vamos decresce-la em cada iteração, veja como fica nosso Javascript:
$(document).ready(function(){
var totalDelay;
$('#titulo').on('mouseenter', function(){
var delay = 0
obj.children().each(function(){
var el = $(this)
el.css('transition-delay', delay+'s')
delay += 0.03
totalDelay = delay
})
})
$('#titulo').on('mouseleave', function(){
var obj = $(this)
var delay = totalDelay
$(this).children().each(function(){
var el = $(this)
el.css('transition-delay', delay+'s')
delay -= 0.03
})
})
})
No final da função que já estava escrita adicionamos a linha totalDelay = delay justamente para guardarmos o valor em que o delay parou para o usarmos como referência.
A função que o evento 'mouseleave' invoca faz basicamente o inverso da de cima. A diferença é que delay inicia com o valor guardado em totalDelay (que vai ser o valor da ultima iteração). E como havia dito, ela vai decrescer o valor do delay ao invés de incrementá-lo.
Essa animação é muito simples, mas assim que me deparei com a necessidade de desenvolve-la eu confesso que me assustei um pouco... Mas no fim saiu!
Vou deixar o código escrito nesse post disponível no meu Codepen pra vocês usarem de referência e criarem suas próprias animações que com certeza serão muito daora!
Top comments (0)