Todos os passos, htmls e scripts estão disponíveis para download.
O primeiro passo não vai ter nenhuma explicação pois ele já é um post antigo meu, explicando parallax e o evento mousemove>, o myParallax Parallax com javascript com jQuery. Quem não viu, veja pois é interessante, e quem já viu o post, reveja, pois vou utilizar esse script de base para o ImageZoom.
Lá no post eu explico linha por linha, o que o Javascript faz.
Passe o mouse sobre a imagem, que se deslocará horizontalmente e verticalmente:
E o que mudou do passo 1?
Agora o “parallax” é horizontal e vertical, quem abrir o código vai ver que basicamente só duplicamos o script do passo 1, alterando left por top, width por height, x por y.
O que mudou do passo 2?
Pouco, só que agora temos o thumb, e quando passamos o mouse em cima do thumb, obtenho uma porcentagem (por exemplo, se eu passar o mouse bem no meio do thumb seria 50% e 50%.
Depois é só posicionar a imagem dentro do container, com top e left.
E pra dar um efeito maior de zoom, coloquei a imagem da lupa como cursor.
O que mudou do passo 3?
Esse teve a maior mudança, como funciona a caixa de luz?
São quatro quadrados com opacidade:
E quando movemos o mouse em cima do thumb os quadrados são redimensionados e reposicionados. E pra dar um efeito melhor, tirei o mouse no css com o cursor: none;
Lembrando que todos os exemplos, scripts e htmls estão disponíveis para download.
[]s
Passo 1 - MyParallax
Passe o mouse sobre a imagem, que se deslocará horizontalmente:O primeiro passo não vai ter nenhuma explicação pois ele já é um post antigo meu, explicando parallax e o evento mousemove>, o myParallax Parallax com javascript com jQuery. Quem não viu, veja pois é interessante, e quem já viu o post, reveja, pois vou utilizar esse script de base para o ImageZoom.
Lá no post eu explico linha por linha, o que o Javascript faz.
Passo 2 - Mouse Move Horizontal e Vertical
Passe o mouse sobre a imagem, que se deslocará horizontalmente e verticalmente:
E o que mudou do passo 1?
Agora o “parallax” é horizontal e vertical, quem abrir o código vai ver que basicamente só duplicamos o script do passo 1, alterando left por top, width por height, x por y.
Passo 3 - Mouse Move Horizontal e Vertical sobre outra imagem
Passe o mouse sobre o thumb:O que mudou do passo 2?
Pouco, só que agora temos o thumb, e quando passamos o mouse em cima do thumb, obtenho uma porcentagem (por exemplo, se eu passar o mouse bem no meio do thumb seria 50% e 50%.
Depois é só posicionar a imagem dentro do container, com top e left.
E pra dar um efeito maior de zoom, coloquei a imagem da lupa como cursor.
Passo 4 - Caixa de luz
Passe o mouse sobre o thumb:O que mudou do passo 3?
Esse teve a maior mudança, como funciona a caixa de luz?
São quatro quadrados com opacidade:
E quando movemos o mouse em cima do thumb os quadrados são redimensionados e reposicionados. E pra dar um efeito melhor, tirei o mouse no css com o cursor: none;
Lembrando que todos os exemplos, scripts e htmls estão disponíveis para download.
[]s
February 12th, 2009 at 10:03 am
Mais uma das coisas que anos atrás eu me matei pra fazer na mão, com javascript, e hoje em dia todas bibliotecas tem plugins para… hehe
[]s!