jQuery Meetups
Atualização de posição de elementos
Oi pessoal, tudo bem?
Estou vendo esse site http://www.smokeybones.com/
Ele atualiza a posição de vário elememtos no mesmo tepo que desço a bassa de rolagem. Alguém sabe qual é a técnica?
Eu só consegui imaginar um verificador que cheque várias vezes por segundo a posição de uma div mestra e, através ta posição desta em relação ao topo, outros elementos se reposicionariam. Mas isso seria muito pesado eu acho.
Existe alguma função que cheque se a barra de rolagem está rolando?
Isso ajudaria muito.
Abraços!
Views: 919
Replies to This Discussion
-
Permalink Reply by Igor Alves on -
Muito interessante esse site.
Quando vc fala "atualizar posição" vc quer dizer o hamburger, o copo de cerveja e etc?
Se for isso, acho que eles devem ter craido uma função que recebe como parametro o quanto a pagina rolou no eixo Y (não lembro bem o nome mas acho que é offset).
Eu utilizei em um antigo projeto. A depender do Y da pagina vc pode alterar as propriedades dos elementos.
A medida que vc vai para baixo ou para cima (muda o Y) ele muda o objeto e nao sua posicao. Logo o scrow pae é o evento.
veja a cebola por exemplo -> style="background-position: 100% 553.6443525458775px;
acho que é isso
-
-
Permalink Reply by Marcos Nakid on -
Oi Igor,
Muito obrigado pela resposta.
É isso mesmo. Eu falo da cerveja, hamburguer e tudo mais que se desloca dependendo da rolagem no eixo Y.
Quanto ao offset tranquilo. Minha dúvida maior era o evento que dispara essa mudança.
Eu não imaginava que existia o scrill (http://api.jquery.com/scroll/) (shame on me), por isso imaginei um timer que checasse.
Mas agora acho que tudo está mais claro como isso pode ser feito.
Só estou pensando uma forma de trabalhar com blocos de objetos para não ficar muito bagunçado. Tipo hamburguer se move é um objeto de vários elementos que se movem dentro dele (pão carne, salada, etc.)
É isso, obrigado novamente.
Igor Alves said:Muito interessante esse site.
Quando vc fala "atualizar posição" vc quer dizer o hamburger, o copo de cerveja e etc?
Se for isso, acho que eles devem ter craido uma função que recebe como parametro o quanto a pagina rolou no eixo Y (não lembro bem o nome mas acho que é offset).
Eu utilizei em um antigo projeto. A depender do Y da pagina vc pode alterar as propriedades dos elementos.
A medida que vc vai para baixo ou para cima (muda o Y) ele muda o objeto e nao sua posicao. Logo o scrow pae é o evento.
veja a cebola por exemplo -> style="background-position: 100% 553.6443525458775px;
acho que é isso
-
-
Permalink Reply by Igor Alves on
-
Na verdade tem dois eventos.
O primeiro evento é o click na seta do seu teclado ou scroll.
Isso vai inicializar a mudança do Y.
O segundo evento e a mudança do Y.
Isso vai alterar as propriedades dos objetos.
Acho que é isso.
Abrcs
-
-
Permalink Reply by Igor Alves on
-
Essa forma que vc esta pensando em fazer eu utilizei para construir um ABACO web.
Ou seja. Vc tem de um lado uma peça que se move entre duas posições. Isso é fail e responde ao evento click.
Na segunda parte do abaco ve tem 4 peçãs que se movem em duas posicoes tbm. Porém a posição de cada uma depense da posição da outra. Ou seja, no seu caso sera mais facil por que o hambuerger vai estar ou aberto ou fechado.
Ou os objetos (salada carle alface) estarao juntos ou etrao afastados.
O que eu fiz foi detectar a posicao de cada objeto e criar um algoritmo em JS para tratar as possibilidades.
Depois vc utiliza jquery para redefinir as posicoes de cada objeto de acordo com a situação desejada
Marcos Nakid said:Oi Igor,
Muito obrigado pela resposta.
É isso mesmo. Eu falo da cerveja, hamburguer e tudo mais que se desloca dependendo da rolagem no eixo Y.
Quanto ao offset tranquilo. Minha dúvida maior era o evento que dispara essa mudança.
Eu não imaginava que existia o scrill (http://api.jquery.com/scroll/) (shame on me), por isso imaginei um timer que checasse.
Mas agora acho que tudo está mais claro como isso pode ser feito.
Só estou pensando uma forma de trabalhar com blocos de objetos para não ficar muito bagunçado. Tipo hamburguer se move é um objeto de vários elementos que se movem dentro dele (pão carne, salada, etc.)
É isso, obrigado novamente.
Igor Alves said:Muito interessante esse site.
Quando vc fala "atualizar posição" vc quer dizer o hamburger, o copo de cerveja e etc?
Se for isso, acho que eles devem ter craido uma função que recebe como parametro o quanto a pagina rolou no eixo Y (não lembro bem o nome mas acho que é offset).
Eu utilizei em um antigo projeto. A depender do Y da pagina vc pode alterar as propriedades dos elementos.
A medida que vc vai para baixo ou para cima (muda o Y) ele muda o objeto e nao sua posicao. Logo o scrow pae é o evento.
veja a cebola por exemplo -> style="background-position: 100% 553.6443525458775px;
acho que é isso
-
-
Permalink Reply by Clayton Gandraº on
-
Eaee pessoal!!
segue um link de tutorial e exemplo do efeito de scroll com Parallax bem parecido com o site.
-
© 2013 Created by jqueryadmin.
