Enquanto a tecnologia melhorou browser, JavaScript veio de idade, e quadros como o JQuery permitem empurrar o envelope do que é possível nas páginas HTML.
Neste tutorial, Sam Hampton-Smith mostra como criar uma imagem interativa em uma página web usando os princípios da rolagem de paralaxe. rolagem Parallax ajuda a transmitir uma sensação de profundidade e distância dentro de uma cena. Objetos mais distantes se movem mais lentamente do que os de perto.
Imensamente popular na década de 1980 jogos de vídeo, que costumava ser impossível criar no navegador, sem recorrer a Flash.
No entanto, a última geração de browsers, motores de JavaScript, CSS e fez os efeitos de paralaxe possível.
Nós vamos criar uma série de gráficos em tamanhos diferentes, empilhá-los e movê-los a taxas diferentes dentro de uma janela de exibição. Vamos então criar um código JQuery simples para mover as camadas como os movimentos do mouse.
O código vamos criar é suficientemente flexível para lidar com tantas camadas de paralaxe, como desejado, para obter um resultado convincente interativo.
Para todas as etapas onde há um código para entrar, você encontrará um documento de texto na capa do CD com o código do modo que você pode simplesmente copiar e colá-lo em, cada documento é nomeado após a etapa é relacionado.
Aberto desolation.ai da capa do CD - ou a partir do arquivo zip desde oposta - no Illustrator, ou se você preferir, crie algumas obras de sua preferência, no Illustrator ou Photoshop. Separe cada plano de distância em uma nova camada ou novo arquivo, de modo que você pode salvar esses individualmente mais tarde.
Tenha em mente que à medida que se aproxima do ponto de câmera, os objetos destas camadas terá de ser maior. No Illustrator isso é bom porque os vetores são redimensionáveis, mas no Photoshop você precisa planejar com antecedência.
Desligue todas as camadas, exceto no céu, em seguida, escolha File> Save for Web & Devices. Nosso viewport ou 'câmera' vai ser 960 pixels de largura, e gostaríamos que o céu se mover um pouco, mas não muito, para salvar a imagem em 980 pixels de largura, indo até a guia Tamanho da Imagem e entrando em uma largura de 980 pixels. Use o PNG-24 preset e salvar.
Tutorial continua ...
Desligue a camada "céu" e ligue o 'level1 "camada. Novamente escolha File> Save for Web & Devices. Dessa vez, verifique se a caixa está marcada Transparência e escolha PNG-24 novamente. Esta imagem é o plano mais distante da paisagem, por isso pretende avançar mais um pouco do que o céu, torná-lo 990 pixels de largura, em seguida, clique em Salvar.
Repita o passo anterior para cada um dos restantes planos: "level2 ',' level3 'e' title '. Certifique-se que cada um é maior do que o passado usando as opções de redimensionamento em Salvar para Web diálogo. Faça uma nota do tamanho que você escolher, tendo em conta a maior da imagem, mais ele se move como você pan ao redor, de forma a aproximar ela vai aparecer para a câmera.
Abra o JQuery site no seu navegador (jquery.com) E baixar a versão mais recente do quadro JQuery. Em seguida, crie um novo documento HTML no Dreamweaver (ou outro editor HTML). Você precisa do esqueleto de uma página HTML, incluindo uma
Precisamos criar o código HTML que será utilizado para exibir as imagens na janela do navegador. Estamos usando fundos CSS para o nosso código, mas você poderia usar o
![]()
O código a próxima a entrar é realmente muito longo, você pode encontrá-lo na etapa 7 na capa do CD ou dentro do arquivo Zip. No
Observe que o visor está posicionada relativamente, e cada uma das camadas da imagem está posicionada absolutamente. Nós também definir cada camada deve ser posicionado centralmente usando deixaram negativo e alto valores, e defina a propriedade overflow para a visualização de oculto para garantir que você não pode ver as camadas de fora da área do visor.
Teste a página no seu navegador e você deve ver tudo que alinham perfeitamente para criar uma imagem. A imagem é estática, no entanto, assim que nós vamos lidar com a adição da funcionalidade de paralaxe agora. Comece por adicionar um link para a biblioteca JQuery que você baixou anteriormente. Adicione o seguinte ao seu
type="text/javascript" 
Nenhum comentário:
Postar um comentário