este capítulo é novo 175
5
efeitos e animação com jQuery
Um leve deslizar
em seu andar
Fazer as coisas acontecerem em sua página é muito bom, mas se você não
conseguir deixá-la com uma boa aparência, as pessoas não desejarão usar seu site.
É aí que entram os efeitos e a animação com jQuery. Neste capítulo, você aprenderá
como fazer transição dos elementos em sua página com o passar do tempo, exibir ou
ocultar partes específicas dos elementos que são relevantes e reduzir ou aumentar um
elemento na página, tudo antes que seus usuários vejam. Você também verá como
agendar essas animações, para que elas aconteçam em vários intervalos e deem uma
aparência bastante dinâmica a sua página.
Veja como eu consigo me
movimentar bem: Sou tão
graciosa. Aposto que você não
consegue fazer isso!
BOOK - UCjQuery - PRODUTO FINAL.indb 175 16/05/2013 10:48:38
176 Capítulo 5
passando o flash
O DoodleStuff precisa de um aplicativo web
O DoodleStuff fornece materiais de arte legais para as crianças da Weblândia. Alguns anos
atrás, o DoodleStuff deu início a um site popular que fornece aplicativos de arte interativos
para as crianças. A quantidade de fãs da empresa aumentou tão rápido que ela está com
problemas para manter as requisições em dia.
Para atender ao público novo e mais amplo do DoodleStuff, o diretor de projetos web quer
construir um aplicativo que não use Flash ou quaisquer outros plugins do navegador.
Os projetos de nossas crianças têm tudo
a ver com tornar as coisas divertidas e
ser prático. Você consegue construir um
aplicativo para nosso grupo da faixa etária
de 6-10 anos? Precisamos de muitos
efeitos visuais e alguma interatividade
nele. Mas nada de Flash, por favor!
BOOK - UCjQuery - PRODUTO FINAL.indb 176 16/05/2013 10:48:38
você está aqui 177
efeitos e animação com jQuery
Faça a Mistura de Monstros
Esse é o modelo do projeto do diretor de projetos web, junto
com os arquivos do designer gráfico para o aplicativo.
Você tem muitos detalhes das requisições do projeto e dos arquivos gráficos que precisa, mas
o designer gráfico não escreveu qualquer coisa em HTML ou CSS – é a partir daí que você
precisará começar. O que é preciso fazer para iniciá-lo?
quadro.png
largura: 545 pixels
altura: 629 pixels
Projeto da Mistura de Monstros
A aplicativo da Mistura de Monstros pretende entreter as crianças da faixa etária alvo, permitindo que elas “mixem” a
cabeça de seus próprios monstros ao misturar 10 tipos diferentes de cabeças, olhos e bocas. As transições entre as
partes do rosto do monstro devem ser animadas.
Um modelo de como uma parte do monstro deve mudar.
Arquivos Gráficos
Interface do Usuário Animação
Depois de nove cliques, cada faixa
deve “voltar” para o início.
Um modelo de como as animações de relâmpago devem ficar.
As imagens de relâmpago devem aparecer e depois
desaparecer rapidamente, como se estivessem
piscando.
headsstrip.png largura: 3670 pixels, altura: 172 pixels
eyesstrip.png largura: 3670 pixels, altura: 79 pixels
nosesstrip.png largura: 3670 pixels, altura: 86 pixels
mouthsstrip.png largura: 3670 pixels, altura: 117 pixels
lightning_01.jpg
lightning_02.jpg
lightning_03.jpg
Área da cabeça
Área dos olhos
Área do nariz
Área da boca
Quadro
Container
img-
lightning1
img -
lightning2
img -
lightning3
Clicar para avançar a cabeça do
monstro.
Clicar para avançar os olhos do
monstro.
Clicar para avançar o nariz do
monstro.
Clicar para avançar a boca do
monstro.
BOOK - UCjQuery - PRODUTO FINAL.indb 177 16/05/2013 10:48:43
Get Use A Cabeça jQuery now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
