ScrollMe – Veja como Criar Scroll Animado com este Plugin jQuery

Please log in or register to like posts.
News
ScrollMe

Na semana passada dissemos que iríamos mudar um pouco como apresentamos os scripts aqui no TekZoom e esta mudança começa agora. Não vamos apenas dizer o que faz, mas sim como fazer. Este é um pedido antigo dos Tekers que agora será prontamente atendido.

Para iniciar esta nova fase vamos falar sobre o ScrollMe, um plugin jQuery para criação de animações e transições durante a rolagem de páginas web. A ideia deste script é deixar a experiência do usuário mais rica e interessante.

O mais legal é que não é necessário perder muito tempo na implementação, tudo é rápido e simples, como você verá a seguir. Aproveite mais esta novidade TKZ e seja bem-vindo a nossa nova linha editorial.

O que é o ScrollMe

ScrollMe
Transições Modernas

ScrollMe é um plugin gratuito jQuery que pode ser utilizado gratuitamente na criação de sites que necessitam de transições entres os elementos de uma mesma página. A ideia é que durante o “scroll” as imagens e textos surjam na tela de diferentes formas e jeitos.

Enquanto o usuário desce para conferir todos os conteúdos as imagens podem surgir da lateral ou simplesmente aparecerem de forma automática através de um efeito de “fade”. Tudo depende da imaginação e necessidade dos desenvolvedores e criativos.

Utilização e Implementação ScrollMe

ScrollMe
Implementação Simples

Para o ScrollMe rodar perfeitamente você precisa do jQuery, recomendamos que neste caso utilize a versão 2.1.1. Para agilizar você pode utilizar o serviço de hospedagem de bibliotecas do Google.

O ScrollMe é composto pelos arquivos JavaScript “jquery.scrollme.js” e “jquery.scrollme.min.js”, em nosso exemplo utilizaremos a versão minificada.

1 – Implementação

Realize as chamadas do jQuery e ScrollMe entre as tags <head></head> do seu HTML:

<script src=’http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js’></script>
<script src=’http://scrollme.nckprsn.com/js/jquery.scrollme.js’></script>

Para baixar o ScrollMe siga até:

2 – Criação da transição/animação

Você pode escolher entre duas Classes para animar sua página: “animateme” e “scrollme”. A diferença básica entre elas é que a primeira deve ser utilizada para animar elementos da sua página (Ex.: imagens). A segunda, e que será mais utilizada, dever ser usada quando a animação será feita num container de elementos (Ex.: div, section, etc). Você pode utilizar as duas ao mesmo tempo, caso seja necessário.

No nosso exemplo iremos criar uma Div que quando o usuário rolar a página o seu conteúdo todo será rotacionado:

<div class=”animateme” data-when=”span” data-from=”0″ data-to=”1″  data-easing=”easeinout” data-rotatey=”360″>
<h2>ANIMADO!</h2>
</div>

3 – Opções e CSS

Todos os parâmetros podem ser alterados para que você possa criar a animação/transição ideal para a sua página. Confira algumas explicações:

  • data-when: Determina o limite de início e fim da rolagem
  • data-from / data-to: Especifica a posição de inicio e fim
  • data-easing: Define a atenuação da animação
  • data-rotatey: Especifica o ângulo de rotação dois eixos X, Y e Z  quando a rolagem acontece

No site oficial você encontra todas as opções que podem ser utilizadas. Basta trocar, incluir ou excluir os parâmetros/valores para modificar o tipo de transição e animação.

Você também pode personalizar as formas e elementos utilizando CSS:

.scrollme { padding:2em; perspective:600px; }
.animateme { width:80%; padding:10%; background:#e8e8e8; transform-origin:center center center; }

Download e Exemplo Online

ScrollMe
Plugin jQuery

Para exemplificar tudo que falamos criamos o código no CodePen. Você pode conferir e até utiliza-lo. Confira o link:

Curtiu? Participe deixando seu comentário e também acessando o TekZoom Responder para postar suas dúvidas e questões.

Seja um Pró-Tekker e Confira novos Vídeos Todos os Dias!

TekZoom no Patreon
Seja um Pró-Tekker!

O que acha de ajudar o TekZoom a continuar publicando novos conteúdos todas as semanas? O que seria mais bacana que conferir um vídeo novo por dia? Esta é a sua oportunidade de nos ajudar a criar cada vez mais artigos e TekCasts originais.

Conheça nossa campanha no Patreon e torne-se um Pró-Tekkers! Clique aqui para saber mais!

Curta este artigo :)

Deixe uma resposta