Cách cuộn theo đường chéo với jQuery hoặc Javascript

Question

Có các dự án hoặc plugin sử dụng javascript hoặc jQuery để cuộn theo đường chéo không?

ví dụ: khi bạn cuộn xuống nội dung của mình, nó sẽ được kéo ở góc trên bên trái của trình duyệt; và khi bạn cuộn lên, nội dung của bạn sẽ được kéo ở góc dưới cùng bên phải của góc.

Tôi thấy một số dự án/trang web tương tự mà chúng sinh động các yếu tố của chúng khi cuộn. Hầu hết các trang web sử dụng javascript có một số chậm với hiệu ứng mặc dù. Một điều tôi đã thấy là sử dụng hiệu ứng thị sai html5 + tương tự như "Nike a Better World" (http://coding.smashingmagazine.com/2011/07/12/behind-the-scenes-of-nike-better-world/)

Bạn có thể chỉ cho tôi nơi có thể là điểm khởi đầu tốt không? Về cơ bản, tôi muốn cuộn các mục theo đường chéo sang trái hoặc phải. Nếu điều này có thể được thực hiện một cách rõ ràng trong HTML5, tôi sẽ đánh giá cao rằng vì tôi cảm thấy nó sẽ có ít độ trễ hoặc ít tính toán được thực hiện.

Answer 1

tôi đã có thể tạo ra các hiệu ứng mà bạn muốn trong một fiddle:

http://jsfiddle.net/t0nyh0/8QTYt/36/

Tidbits quan trọng

1. A "cố định" toàn chiều rộng và trình bao bọc đầy đủ chiều cao chứa tất cả các phần tử di chuyển của bạn giúp bạn tạo hiệu ứng cho div một cách nhất quán hơn d trên vị trí cuộn (có hiệu quả là số "khung hình chính").
2. scroll_max, wrapper_width và wrapper_height giúp bình thường hóa kích thước của trình bao bọc. I E. phần dưới cùng của cuộn tương ứng với phần dưới cùng bên phải của trình bao bọc và phần đầu của cuộn tương ứng với phần trên cùng bên trái của trình bao bọc.
3. Đặt chiều cao cơ thể của bạn thành bất kỳ số lượng "khung hình chính" nào bạn muốn.
4. Để di chuyển từ trên cùng bên trái xuống dưới cùng bên phải khi đi xuống, hãy điều chỉnh các thuộc tính top và left. Ngược lại, điều chỉnh các thuộc tính bottom và right. Tất nhiên, bạn sẽ cần phải xây dựng các phép tính của riêng bạn cho các hoạt ảnh phức tạp hơn, nhưng biết rằng làm $window.scrollTop() sẽ cung cấp cho bạn số "khung hình chính".

HTML

<div id="wrapper"> 
    <div id="a"> 
     <h1>Meats</h1> 
    </div> 
    <div id="b"> 
     <h1>Veggies</h1> 
     <hr/> 
     <p>Veggies sunt bona vobis, proinde vos postulo esse magis daikon epazote peanut chickpea bamboo shoot rutabaga maize radish broccoli rabe lotus root kohlrabi napa cabbage courgette mustard squash mung bean.</p> 
    </div> 
</div>​ 

CSS

body 
{ 
    height: 1000px; // 1000 keyframes 
} 

#wrapper 
{ 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    border: 2px solid navy; 
    overflow:hidden; 
} 

#a { 
    position:absolute; 
    background-color: #daf1d7; 
    width: 300px; 
    height: 300px; 
} 
#b 
{ 
    position: absolute; 
    background-color: #d2d0ee; 
    width: 200px; 
    height: 200px; 
    bottom: 0px; 
    right: 0px; 
} 

javscript

var $window = $(window); 
var $a = $('#a'); 
var $b = $('#b'); 

var scroll_max = document.documentElement.scrollHeight - document.documentElement.clientHeight; 
var wrapper_height = $('#wrapper').height(); 
var wrapper_width = $('#wrapper').width(); 

$window.scroll(function() { 
    console.log(scroll_max); 
    $a.css({ 
     'top': ($window.scrollTop()/scroll_max) * wrapper_height, 
     'left': ($window.scrollTop()/scroll_max) * wrapper_width 
    }); 
    $b.css({ 
     'bottom': ($window.scrollTop()/scroll_max) * wrapper_height, 
     'right': ($window.scrollTop()/scroll_max) * wrapper_width 
    }); 
});​ 

Answer 2

Dưới đây là một giải pháp tiềm năng cho bạn (jsFiddle example):

jQuery:

$(window).scroll(function() { 
    console.log($(this).scrollTop()); 
    $('#a').css({ 
     'width': $(this).scrollTop(), 
     'height': $(this).scrollTop() 
    }); 
    $('#b').css({ 
     'width': 300-$(this).scrollTop(), 
     'height': 300-$(this).scrollTop() 
    }); 
}); 

CSS:

#a,#b { 
    position:fixed; 
    background: orange; 
} 
#a{ 
    top:0; 
    left:0; 
} 
#b { 
    bottom:0; 
    right:0; 
    width:300px; 
    height:300px; 
} 
body { 
height:2000px; 
} 

HTML:

<div id="a"></div> 
<div id="b"></div>