Locaweb - Edição 55

57 / 68

57
GR VLWH 6H H[LVWLU XPD S£JLQD FRP
o cabeçalho, que seja um “include”
HP WRGDV DV S£JLQDV LQWHUQDV FRPR
WRS SKS RX WRS DVS « SRVV¯YHO
instanciar a biblioteca nela – junto a
outras já disponíveis.
Para testes, este cabeçalho
é mais seguro. Ele referencia
todos os arquivos necessários
diretamente nos servidores dos
desenvolvedores. Mas para
ambientes de produção, melhor
instalar tudo no próprio servidor,
por garantia.
<script src= .
googleapis.com/ajax/libs/
jquery/1.9.1/jquery.min.
js"></script>
<script src=
cloudflare.com/ajax/libs/
gsap/1.14.2/TweenMax.min.
js"></script>
<script src="https://
cdnjs.cloudflare.com/ajax/
libs/ScrollMagic/2.0.3/
ScrollMagic.js"></script>
<script src=
cloudflare.com/ajax/libs/
ScrollMagic/2.0.3/plugins/
animation.gsap.js"></script>
<script src=
cloudflare.com/ajax/libs/
ScrollMagic/2.0.3/plugins/
debug.addIndicators.js"></
script>
Primeiro exemplo
O uso da biblioteca se baseia
QR FRQFHLWR GH ÛJDWLOKRVÜ WULJJHU
e comandos posicionados pelo
código de cada página. Assim,
quando um “gatilho” atinge
a posição central da página,
como uma “ancora” de HTML
DQFRUD HOH GLVSDUD XP RX PDLV
FRPDQGRV IXQ©·HV
Para começar, crie um
elemento na página, um container
H XP WH[WR
<div id="container">
<div id="block">
Primeiro teste de rolamento de
S£JLQD FRP 6FUROO 0DJLF
</div>
</div>
A DIV “container” será a scene
FHQD H D GLY ÛEORFNÜ VHU£ DOWHUDGD
pelo disparo do gatilho.
2 SUµ[LPR SDVVR « JHUDU
uma formatação por CSS,
necessária para a cena ser
PRGLíFDGD SRVWHULRUPHQWH (VWH
FµGLJR ÛVW\OHÜ FULD XPD FDL[D H
a posiciona no centro da tela.
O ideal, entretanto, é usar um
arquivo CSS para maior controle e
precisão na formatação e ajustes.
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#container {
margin: 55vh 0;
padding: 50px;
outline: 1px dashed
orange;
}
#block {
padding: 10px;
border: 1px solid black;
font-family: Helvetica;
}
</style>
Também foi formatado o “body”
para ocupar todo espaço da tela e
permitir sua rolagem.
Ao abrir o arquivo no
navegador, o que vemos é algo
SDUHFLGR FRP D LPDJHP DEDL[R
Uma tela comum, com
XPD FDL[D FRPXP H XP WH[WR
comum. Agora, insira os códigos
necessários para tornar essa
página comum algo mais interativo
e dinâmico.
<script>
$(function() {
var controller = new
ScrollMagic.Controller();
var blockTween = new
TweenMax.to('#block', 1.5, {
backgroundColor: 'red'
});
var containerScene = new
ScrollMagic.Scene({
triggerElement:
'#container'
})
.setTween(blockTween)
.addIndicators()
.addTo(controller);
});
</script>
Dentro da função, há todos os
comandos necessários, iniciando
com a criação de uma variável
“controller”, que instancia um
controlador Scroll Magic. Em
seguida, uma variável que instancia
XP HOHPHQWR 7ZHHQ0D[ H GHíQH
uma variação de cor de fundo para
a div “block”.
Ao atualizar a página, surge
esta tela:
O fundo da div “block”
muda para vermelho, em uma
rápida animação.
Até o momento, nada que
um CSS padrão não seja capaz de
fazer. É preciso criar uma cena e um
gatilho para interagir com a rolagem
da tela.
O código a seguir faz isso:
var containerScene = new
ScrollMagic.Scene({
triggerElement:
'#container'
Uma página comum
pode se tornar mais
interativa e mais
dinâmica com o Magic
[O USO DA BIBLIOTECA SE BASEIA NO CONCEITO
DE “GATILHOS” E COMANDOS POSICIONADOS
PELO CÓDIGO DE CADA PÁGINA]
})
.setTween(blockTween)
.addIndicators()
.addTo(controller);
});
A primeira linha instancia
uma cena Scroll Magic. A
VHJXQGD GHíQH FRPR ÛJDWLOKRÜ
o elemento “container”, a div
que foi criada anteriormente.
As últimas três linhas fazem a
mágica e “disparam” a mudança,
TXH « GHíQLGD QR blockTween.
A tela agora mostra, além
GDV FDL[DV M£ DSUHVHQWDGDV RV
indicadores de “gatilho” e “disparo”.
,VVR Vµ VHU£ H[LELGR HQTXDQWR R
arquivo debug.addIndicators.js
estiver sendo incluído na página
e desaparece em ambiente de
produção com sua retirada.
$ S£JLQD DJRUD « H[LELGD
desta forma:
E muda dinamicamente quando
é feita a rolagem:
O indicador “start1” indica que
elemento, que é a posição da tela,
vai disparar o código, e o indicador
“trigger 1” indica a posição do
“gatilho”, que vai disparar o evento
quando o start 1 passar por ele.
É possível ter diversas cenas
e diversos elementos de “start”,
TXH GLVSDUDP HYHQWRV H IXQ©·HV
quando passam pelo “trigger”. Esses
elementos são dispostos na tela e
vão sendo animados, disparados,
conforme a rolagem de tela ocorre.
Cenas
‹ SRVV¯YHO GHíQLU Y£ULDV ÛFHQDVÜ
na página, que serão disparadas
conforme a rolagem avança pela
REVISTA LOCAWEB