4

Tenho uma imagem vetorial

<img src="images/first-page/vectors/waves-723178.svg" alt="Imagem vetorial decorativa" class="vector-wave">

e a mesma está posicionada a esquerda da tela

.vector-wave {
    position: relative;
    transform: translate(-500px, 420px);
    z-index: 0;
}

exibindo então apenas parte da imagem.

A questão é: quando eu "scrollar" a minha página, esta imagem deverá ir para a direita, até certo ponto;

De forma que se "scrollo" para baixo a imagem vai para a direita, caso contraio, "scrollo" para cima a imagem retornar a esquerda.

Exemplo:Repare na imagem que que está a esquerda desta url

PS: Vi um plug in chamado Super scroll orama, mas achei complicado de usar, caso alguém saiba como usa-lo me ajudaria muito também.

1 Resposta 1

2

Precisas saber 3 coisas:

  • altura do scroll
  • largura da tela
  • o scroll específico a cada momento

Sabendo a altura do scroll e a largura da tela sabes a proporção que a imagem se deve mexer para cada tamanho de scroll. Para saber as dimensões podes usar o .getBoundingClientRect()

Para saber o scroll no momento tens de adicionar um oscultador de eventos para o scroll.

Um exemplo simples seria assim:

var dimensoes = document.body.getBoundingClientRect();
var altura = dimensoes.height;
var largura = dimensoes.width;
var imagem = document.querySelector('img');

window.addEventListener('scroll', function () {
    var scroll = window.scrollY;
    var posImagem = scroll * largura / altura;
    imagem.style.left = posImagem + 'px';
});

jsFiddle: http://jsfiddle.net/d2bu5edu/

0

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .