Latejo (hover + animations 01)

Ponto rosa

Um ponto? Nom, um círculo a representar um ponto.

Um ponto encarnado a latejar suave.

Pum-pum…
Pum-pum…
Pum-pum…

E se o acarinhamos umha miguinha com o cursor?

Até nom há muito tempo, para poder fazermos algo coma isto, usávamos JavaScript. Mas agora, graças as animaçons CSS3, podemos aforrar esta linguagem e utilizar só HTML e CSS1.

Existem três vantagens chave para animações CSS além das técnicas tradicionais de animação dirigidas por script:

  1. São de fácil utilização para animações simples; […]
  2. As animações executam bem, mesmo sobre moderada carga do sistema. […]
  3. Deixando o navegador controlar a sequência de animação permite ao navegador otimizar a performance […]

Making-of

Para construirmos o nosso latejo utilizamos umha div2

<div class="latejar"></div>

centrada horizontal e verticalmente com respeito ao elemento que a contem (pode ser o body, um article, outra div, etc.),

.latejar {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

à que primeiro lhe damos forma de ponto encarnado

.latejar {
	position: absolute;
	top: 50%;
	left: 50%;
    	transform: translate(-50%,-50%);

	/* estilo de ponto encarnado */
	width: 40px;
	height: 40px;
	border-radius: 50%; /* converte a div quadrada de 40x40px num círculo */
	background-color: #ff006c;
	cursor: pointer; /* forçamos a apariçom do cursor ao fazermos hover na div */
}

e logo aplicamos duas animaçons CSS3:

  1. Umha para o latejo suave, o estado inicial
  2. Outra para o latejo forte, quando fazemos hover

Latejo suave (estado inicial)

Para criarmos umha animaçom CSS3, primeiro engadimos à nossa classe (ou seletor) umha sequência de animaçom CSS, através da propriedade animation.

.latejar {
	position: absolute;
	top: 50%;
	left: 50%;
    	transform: translate(-50%,-50%);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: #ff006c;
	cursor: pointer;

	/* Sequência de animaçom */
	animation: 2.5s infinite latejinho; /* duraçom | vezes que se reproduz | nome */
}

Neste caso estamos a dizer que a animaçom dura 2.5s, que se reproduz infinitas vezes (loop) e que se chama “latejinho”.

Depois, para configuramos a aparência da animaçom, utilizamos um keyframes3 (de nome “latejinho”).

@keyframes latejinho {
	0% {
	        transform: translate(-50%,-50%) scale(1);
	}
	94% {
		background-color: #ff006c;
	        transform: translate(-50%,-50%) scale(1);
	}
	98% {
		background-color: #ff0000;
	        transform: translate(-50%,-50%) scale(1.35); /* Além do scale mantemos o translate, para o ponto continuar centrado ao variar de tamanho */
	}
	100% {
		background-color: #ff006c;
	        transform: translate(-50%,-50%) scale(1);
	}
}

Com ele, o ponto mantém o seu tamanho e cor de fundo entre o inicio da animaçom (0%) e o 94% dos 2.5s que ela dura. Logo, entre o 94% e o 98% varia de cor e aumenta o seu tamanho. E entre o 98% e o final (100%), volta ao seu tamanho e cor original.

Como este ciclo vai a se repeter em loop: aumentar-diminuir, aumentar-diminuir, aumentar-diminuir… conseguimos o pulso do nosso latejo.

Latejo forte (hover)

Para o latejo forte, o primeiro é variarmos o tamanho4 do ponto encarnado ao fazermos hover com o cursor

.latejar:hover {
	width: 102px;
	height: 102px;
}

e tamém trocarmos de animaçom com umha nova sequência de animaçom CSS, desta vez de nome “latejo”.

.latejar:hover {
	width: 102px;
	height: 102px;

	/* nova sequência de animaçom  */
	animation: 0.6s linear infinite latejo; /* duraçom | vezes que se reproduz | nome */
}

Logo só nos resta configuramos a aparência da nova animaçom com outro keyframes (“latejo”).

@keyframes latejinho {
	0% {
	        transform: translate(-50%,-50%) scale(1);
	}
	20% {
		background-color: #ff0000;
	        transform: translate(-50%,-50%) scale(1.5);
	}
	40% {
		background-color: #ff006c;
	        transform: translate(-50%,-50%) scale(1);
	}
}

et voilà, latejo completo 🙂

Exemplo ao vivo

Podedes ver/editar um exemplo ao vivo aqui ( Codepen).

1 Atençom à hora de utilizardes as animaçons em sites de produçom. Esta tecnologia é ainda experimental e pode nom ser compatível com alguns navegadores.
2 Nós utilizamos umha simples div, mas também valeria umha ligaçom (a), ou um botom (buttom).
3 @keyframes, animation e transform podem precisar de prefixos nos navegadores mais velhos. No exemplo ao vivo (Codepen) já vam com eles. Para saber que Vendor Prefix usarmos com as novas propriedades de CSS3, recomendamos Pleeease. Muito útil!
4 Para suavizar a variaçom de tamanho ao fazer/desfazer hover, só temos que engadir umha transition no nosso class (.latejar)

Licença: Domínio Público

2 thoughts on "Latejo (hover + animations 01)"

Deixar uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *