Animar elementos no scroll da página

6 de dezembro de 201413 Comentários

Animação no scroll da página

A animação de elementos no scroll da página é uma nova tendência da web. Para criar esse efeito, eu uso um plugin chamado WOW.

O grande ponto positivo do WOW é que ele é mais leve que os plugins em parallax.

Passo a passo para usar o plugin WOW:

1) Baixar o plugin WOW no github do autor;

2) Baixar o animate.css , que é o responsável pelas animações do script;

3) Chamar o css animate.css no <head></head>;

4) Chamar o wow.min.js e iniciar o plugin:

5) Para fazer as animações, basta inserir a class .wow no elemento que deseja animar. Para escolher o tipo de animação, basta colocar a class com o mesmo nome da animação. Você pode conferir todos os tipos aqui.

O plugin permite também algumas configurações interessantes:

  • data-wow-duration: Você escolhe qual a duração daquela animação para determinado elemento.
  • data-wow-delay: Quantos segundos até a animação começar.
  • data-wow-offset: Distância, em relação ao rodapé, para iniciar a animação.
  • data-wow-iteration: Quantas vezes a animação vai se repetir.

Alguns exemplos de site que usam o WOW:

http://news.microsoft.com/stories/garage/index.html

http://popcorn-time.se/

Comentários

  • Douglas Delucca

    muito bom 🙂

  • Elvis

    thanks 🙂

  • Eduardo Pereira

    Preciso pagar para usar o WOW?

    • Olá Eduardo. Não precisa não. 🙂

      • Eduardo Pereira

        Vanessa e quanto a parte da licença comercial? Não seria errado utilizar para para fins comerciais, sem ter uma licença?
        Obrigado pela colaboração, parabéns!

        • Vanessa

          Olá Eduardo. Agora eles têm cobrado para uso comercial sim, infelizmente.

          • Eduardo Pereira

            Olá Vanessa, obrigado por ter respondido. É uma pena, você conhece outra tecnologia para alinhar a classe Animation? E caso venhamos a utilizar o WOW em projeto comercial, tem como os autores saberem que isso está sendo feito?

          • Vanessa

            Olá Eduardo, achei esse plugin: http://jackonthe.net/css3animateit/. Parece funcionar da mesma forma do WOW.
            Sobre os autores saberem, acredito que seja possível sim.

          • Eduardo Pereira

            Obrigado pelo compartilhamento. Mas parece que esse também tem licença, não? Você sabe dizer se tem como tem como usar a classe sem auxilio de terceiros? Eu teria que fazer na “unha” a manipulação no JS ?

          • Vanessa

            Não achei nada falando sobre licença.
            Teria que fazer via JS sim…

          • Eduardo Pereira

            Entendi Vanessa, obrigado pela atenção.

  • Pedro Freitas

    Boa noite, sabe me informar como é feito uma animação ao sair da página? Por exemplo, antes de sair da página os objetivos saírem com uma animação, obrigado!

  • Sirlene Bezerra

    Me ajudou bastante 🙂