home Sem categoria Animações em CSS

Animações em CSS

Animações podem passar uma sensação de modernidade para seu site, além de chamarem a atenção do leitor para um conteúdo específico da página. As animações em CSS, apesar de não serem tão robustas quanto as feitas em JavaScript, são uma forma simples e rápida de se implementar essa funcionalidade. Se você não necessita de um controle preciso, nem de animações com muitos passos e transições, as animações em CSS, com o atributo animation, podem ser uma boa solução.

Uma das limitações do atributo de animações é que ele é ativado quando a página HTML é carregada, ou, logo após um tempo delimitado em código. Isso é um problema quando você quer ativar uma animação quando um evento específico acontece, por exemplo, quando o usuário rola a página até o elemento que deve ser animado. Para resolver este problema, usamos o JavaScript para adicionar uma classe CSS ao objeto HTML somente quando ele estiver visível. Esta classe será responsável por ativar a animação.

@KeyFrames

O primeiro passo é criar uma @KeyFrame no CSS, que é um elemento que vai especificar as transformações que serão aplicadas para formar a animação.

@keyframes Animacao-girar {

  0% {

       transform: rotate(0deg);

 }

 

 50% {

       transform: rotate(60deg);

 }

 

 100% {

       transform: rotate(-360deg);

 }

}

Neste exemplo, o elemento começa com uma rotação de 0 graus, gira até 60 graus até a metade do tempo da animação, e então, gira até -360 graus até o final da animação.

Classe CSS

Após criado uma @KeyFrame, ela deve ser inserida em uma classe do CSS para ser inserida no elemento HTML.

.Classe-animacao-girar.in-view{

  animation-name: Animacao-girar; /*Aqui deve ser o nome da @KeyFrame*/

  animation-duration: 2s; /*duração da animação*/

  animation-timing-function: linear; /*Especifica a curva de velocidade da animação*/

}

No nosso exemplo, selecionamos a classe .Classe-animacao-girar, que é a classe do elemento html que desejamos animar, e a classe .in-view, que será atribuída ao elemento quando ele entrar na visão do usuário (Faremos isso no próximo tópico). A propriedade animation-name deve conter o nome da @KeyFrame que criamos, animation-duration é o tempo que a animação durará, e animation-timing-function é a curva de velocidade da animação.

JavaScript

Agora, precisamos fazer um código em JavaScript que coloque a classe in-view nos elementos HTML quando eles entrarem na visão do usuário. Antes de fazermos o script em JS, temos que colocar a classe animation-element em todo elemento HTML que queremos animar, e então, usar o seguinte código:

var $animation_elements = $(‘.animation-element’);

var $window = $(window);

 

function check_if_in_view() {

var window_height = $window.height();

var window_top_position = $window.scrollTop();

var window_bottom_position = (window_top_position + window_height);

$.each($animation_elements, function() {

  var $element = $(this);

  var element_height = $element.outerHeight();

  var element_top_position = $element.offset().top;

  var element_bottom_position = (element_top_position + element_height);

  if ((element_bottom_position >= window_top_position) &&

      (element_top_position <= window_bottom_position)) {

    $element.addClass(‘in-view’);

  } else {

    $element.removeClass(‘in-view’);

  }

});

}

$window.on(‘scroll resize’, check_if_in_view);

$window.trigger(‘scroll’);

 

$(document).ready(function(){

$(“a”).on(‘click’, function(event) {

  if (this.hash !== “”) {

    event.preventDefault();

    var hash = this.hash;

    $(‘html, body’).animate({

      scrollTop: $(hash).offset().top

    }, 800, function(){

         window.location.hash = hash;

    });

  }

});

});

Para que a função $window.height() funcione corretamente, é necessário colocar a tag <!DOCTYPE html> no começo do documento HTML, antes mesmo da abertura da tag <html>

Gostou? Compartilhe:

Tiago Pereira de Faria

Tiago Pereira de Faria

Graduando em Ciência da Computação, apaixonado pela ciência dos dados e inteligência artificial e estagiando na Cedro.