Jquery/Javascript Hoạt ảnh có độ mờ với cuộn

Question

Tôi đang tìm cách thay đổi độ mờ đục trên một đối tượng (và có quá trình chuyển đổi được làm động) dựa trên cuộn người dùng. ví dụ (http://davegamache.com/)

Tôi đã tìm kiếm ở mọi nơi như ở đây, nhưng nó kết thúc chỉ cho tôi đến plugin waypoints (http://stackoverflow.com/questions/6316757/opacity- dựa trên-scroll-position)

Tôi đã triển khai plugin [waypoints] [1] và có đối tượng mờ dần khi nó cao hơn 100px. [Sử dụng thuộc tính offet] nhưng muốn kiểm soát cơ bản độ mờ của một đối tượng và hiển thị hoạt ảnh như ví dụ trên.

Tôi đã tìm kiếm khắp nơi - đây là phương sách cuối cùng của tôi. Bất kỳ trợ giúp nào được đánh giá cao.

Answer 1

dụ với khởi đầu làm việc và điểm kết thúc ở đây: http://jsfiddle.net/z7E9u/1/

sao chép dán mã cơ bản ở đây

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

tôi nhìn vào mã nguồn của trang web đó. sử dụng: $(document).scrollTop(); để xác định chiều cao cuộn và $(window).scroll(function(){}) để liên kết trình xử lý sự kiện để cuộn.

thử điều này:

$(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

Dưới đây là một ví dụ làm việc: http://jsfiddle.net/meEf4/

Và mã:

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

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

Tất cả chúng tôi làm là lấy vị trí cuộn hiện tại của cửa sổ, tìm hiểu tỷ lệ phần trăm của phần tử được đề cập hiện ở chế độ ngoài màn hình và đặt độ mờ của phần tử đó với phần trăm đó.

Answer 4

Tôi thích giải pháp này

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); 
}); 

Làm thế nào bạn có thể sử dụng di chuyển chuột cho mờ dần cho đến khi chỉ ví dụ 0,2 opacity đạt được và sau đó cuộn trang quá? Các giải pháp mà tôi đã tìm thấy cho đến nay vô hiệu hóa chức năng cuộn chuột hoàn toàn

Answer 5

Vì tôi có ít hơn 50 danh tiếng nên tôi không thể trả lời câu hỏi của Lonut, cách làm ngược lại. Đây là mã của tôi nếu bạn muốn đảo ngược, khá tiện dụng cho các thanh điều hướng.

$(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); 
    });