Jquery/Javascript Animación de opacidad con desplazamiento

Question

Estoy buscando cambiar la opacidad de un objeto (y hacer que la transición sea animada) en función del desplazamiento de un usuario. ejemplo (http://davegamache.com/)

he buscado por todas partes como aquí, pero termina señalarme a los puntos de referencia de plugins (http://stackoverflow.com/questions/6316757/opacity- basado en la posición de desplazamiento)

Implementé el plugin [waypoints] [1] y he desvanecido el objeto una vez que es más alto que 100px. [Usando el atributo offet] pero me gustaría básicamente controlar la opacidad de un objeto y hacer que la animación sea visible como en el ejemplo anterior.

Lo he buscado por todas partes, este es mi último recurso. Cualquier ayuda es muy apreciada.

Answer 1

ejemplo con trabajo de partida y el punto final aquí: http://jsfiddle.net/z7E9u/1/

que copiar y pegar código básico aquí

var fadeStart=100 // 100px scroll or less will equiv to 1 opacity 
    ,fadeUntil=200 // 200px scroll or more will equiv to 0 opacity 
    ,fading = $('#fading') 
; 

$(window).bind('scroll', function(){ 
    var offset = $(document).scrollTop() 
     ,opacity=0 
    ; 
    if(offset<=fadeStart){ 
     opacity=1; 
    }else if(offset<=fadeUntil){ 
     opacity=1-offset/fadeUntil; 
    } 
    fading.css('opacity',opacity).html(opacity); 
}); 

Answer 2

Miré el código fuente de ese sitio. utiliza: $(document).scrollTop(); para determinar la altura de desplazamiento, y $(window).scroll(function(){}) para vincular un detector de eventos al desplazamiento.

probar esto:

$(window).scroll(function(){ 
    var fromtop = $(document).scrollTop();  // pixels from top of screen 
    $('#fademeout').css({opacity: 100-fromtop}); // use a better formula for better fading 
}); 

Answer 3

Aquí hay un ejemplo de trabajo: http://jsfiddle.net/meEf4/

Y el código:

var target = $('div'); 
var targetHeight = target.outerHeight(); 

$(document).scroll(function(e){ 
    var scrollPercent = (targetHeight - window.scrollY)/targetHeight; 
    if(scrollPercent >= 0){ 
     target.css('opacity', scrollPercent); 
    } 
}); 

único que hacemos es tomar la posición de desplazamiento actual de la ventana, averiguar qué porcentaje del elemento en cuestión está ahora fuera de la pantalla y establecer su opacidad con ese porcentaje.

Answer 4

me gusta esta solución

var fadeStart=100 // 100px scroll or less will equiv to 1 opacity 
    ,fadeUntil=200 // 200px scroll or more will equiv to 0 opacity 
    ,fading = $('#fading') 
; 

$(window).bind('scroll', function(){ 
    var offset = $(document).scrollTop() 
     ,opacity=0 
    ; 
    if(offset<=fadeStart){ 
     opacity=1; 
    }else if(offset<=fadeUntil){ 
     opacity=1-offset/fadeUntil; 
    } 
    fading.css('opacity',opacity).html(opacity); 
}); 

¿Cómo podría usar el desplazamiento del ratón para la extinción sólo hasta que se alcanza por ejemplo 0,2 opacidad y luego desplazarse por la página es demasiado? Las soluciones que he encontrado hasta ahora desactivan por completo la función de desplazamiento del mouse

Answer 5

Como tengo una reputación inferior a 50 no puedo responder a la pregunta de Lonut, cómo hacer lo contrario. Aquí está mi código si desea el reverso, bastante útil para las barras de navegación.

$(window).scroll(function() { 
     var offset = $(document).scrollTop() 
     var opacity = 0; 
     if (offset <= 0) { 
      opacity = 0; 
     } else if (offset > 0 & offset <= 200) { 
      opacity = (offset - 1)/200; 
     } 
     else { 
      opacity = 1; 
     } 
     $('.black-background').css('opacity', opacity).html(opacity); 
    });