ParallaxScrolling – dos games à web – Paralaxe

View Github Repository Open presentation in a new window

talitagoulart

See all presentation from talitagoulart

ParallaxScrolling – dos games à web – Paralaxe

0 0

palestra-parallax-weweb-2013

Palestra Sobre Parallax Scrolling na We Web Conf 2013

On Github talitagoulart / palestra-parallax-weweb-2013

ParallaxScrolling

dos games à web

Talita Goulart

Desenvolvedora front-end

Savoir Tecnologia

talita_goulart@yahoo.com.br - @talitacgo

Paralaxe

Deslocamento aparente de um objeto, quando se muda o ponto de observação.

Paralaxe na animação

Stereoptical camera

Fleisher Studio - 1934

Multiplane camera

Walt Disney Animation Studios - 1933

Parallax scrolling em games

Moon Patrol - 1982

Shadow of the Beast - 1989

Super Mario World - 1990

Parallax Scrolling na Web

Busca pelo termo parallax

Buscas relacionadas a parallax scrolling

Exemplos de Parallax scrolling em sites

http://boy-coy.com

http://www.puma.com/mobium/

http://www.soul-reaper.com/

http://islreview.com/

http://hotdot.pro

Exemplos de Parallax scrolling em sites

http://journey.lifeofpimovie.com

http://www.tedxguc.com/

http://olszanska.pl/en/

http://www.cabletv.com/the-walking-dead

Como aplicar?

Página estática

Aplicando um pouco de js

Puro CSS

Editor online: http://dabblet.com/gist/6959829

Junto e misturado

Um exemplo mais real

Exemplo adaptado de http://tableless.com.br/parallax-simples-com-jquery-e-css/

Plugins

Skrollr - http://prinzhorn.github.io/skrollr/

<div data-0="background-color:rgb(0,0,255);transform:rotate(0deg);" data-500="background-color:rgb(255,0,0);transform:rotate(360deg);">WOOOT</div>

Stellar.js - http://markdalgleish.com/projects/stellar.js/

<div data-stellar-ratio="2"></div>

FIM