Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Fala galera,
Estou precisando da ajuda de vocês no seguinte:
Preciso que uma imagem apareça para o usuário quando ele descer 1500px da página.
Tipo, eu sei fazer o efeito de opacidade com transição suave e tal, só não sei como fazer pra esse efeito funcionar somente quando o usuário rolar a tela, e não quando ele passar o mouse em cima como seria no efeito "hover". Deu pra entender? ^^
Se alguém souber, ajuda ai =]
Complementando a resposta do Rikaschmitt.
Caso queira remover a imagem ao voltar, não esqueça da função else, ou pode permanecer com ela travada a todo momento.
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 400) {
$('img').addClass('efeito');
} else {
$('img').removeClass('efeito');
}
});Lembrando que a condição .on('scroll') pode ser substituída somente por .scroll. Quando a condição for só adicionar e remover, não há necessidade de criar uma classe e popular o CSS pra adicionar um display ou opacity. Nesse caso é mais viável e mais limpo para ambas as partes utilizar do .css. Ex.:
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 400) {
$('img').css("display", "block");
} else {
$('img').css("display", "none");
}
});Vlw galera, obrigado pela ajuda =]
Dá para fazer isso usando jQuery.
Fiz um exemplo aqui: https://jsfiddle.net/2rxjkn9x/
É uma função que verifica quando damos scroll na página, ele vai verificando o valor desse scroll e quando chegar no valor desejado, ele atribui uma classe para a imagem/elemento que fará o efeito.
Coloquei a imagem com position:fixed; apenas para facilitar a visualização, mas acredito que no seu caso a imagem/elemento estará na altura correta, neh?
Também utilizei um valor de scroll 400, mas altere para 1500 que é o valor que você quer.