Hiệu ứng hình ảnh này được tạo ra như thế nào?

Question

Tôi đã xem trang này một thời gian. Thật tuyệt vời. Nhưng tôi không thể biết hiệu ứng hình nền xảy ra khi cuộn hoạt động như thế nào. Đã đi qua các mã được tìm thấy rằng họ đang sử dụng Jquery cộng với một số bổ sung di chuyển, nhưng không có gì về những hình ảnh mà tôi có thể nhìn thấy.

Bạn sẽ nói như thế nào?

Các trang web: http://herohousing.org/UBBT/

Answer 1

Thủ thuật này khá đơn giản và chỉ cần một số CSS đó mỗi một ô có hình nền là cố định:

<style type="text/css"> 
    div { 
     height: 100%; 
     background-image: url(http://sstatic.net/so/img/logo.png); 
     background-attachment: fixed; 
     border: thin solid; 
    } 
    div.a { 
     background-repeat: repeat-x; 
     background-color: #FDD; 
    } 
    div.b { 
     background-repeat: repeat-y; 
     background-color: #DFD; 
    } 
    div.c { 
     background-repeat: no-repeat; 
     background-color: #DDF; 
    } 
</style> 

<div class="a">A</div> 
<div class="b">B</div> 
<div class="c">C</div> 

Ở đây tôi đang sử dụng hình nền tương tự nhưng màu nền và lặp lại hình ảnh khác nhau sẽ cho bạn thấy rằng đó là ba phần tử khác nhau.

---

Sửa Ok, nó có vẻ rằng một số nghi ngờ những gì tôi viết. Và trên thực tế, trang web được trích dẫn sử dụng jQuery cho điều này. Nhưng chỉ để vừa với hình ảnh với chiều rộng và chiều cao của chế độ xem của trình duyệt vì bạn chưa thể định kích thước hình nền. CSS 3 chỉ định background-size property nhưng hỗ trợ của nó vẫn là độc quyền sử dụng tiền tố cụ thể của nhà cung cấp như -khtml- (Konqueror), -moz- (Trình duyệt dựa trên Gecko như Firefox), -o- (Opera) và -webkit- (WebKit based browsing as Safari).

Nếu bạn có thể tránh điều đó, bạn có thể sử dụng kỹ thuật CSS mà tôi đã giới thiệu cho bạn.

Answer 2

Đó là 4 div có hình nền khác nhau cho từng ảnh, điều làm cho hiệu ứng hoạt động tốt đặc biệt là "nền được đính kèm: cố định;" tài sản để dừng cuộn nền.

Nếu bạn tải xuống Firebug cho Firefox, bạn có thể kiểm tra div's và quan sát cách CSS làm cho trang hoạt động và cố gắng tái tạo nó cho chính bạn.

Hiệu ứng thực sự đẹp mắt Tôi phải thừa nhận :-)