CSS nhiều nền di chuyển ở tốc độ khác nhau

Question

Tôi đã xem qua trang web này ngày hôm nay và tôi cảm thấy bối rối: http://www.actionbutton.net/

là ông sử dụng một số loại kỹ thuật được biết đến cho nền của ông rằng di chuyển với tốc độ khác nhau và chồng chéo nhau. Tôi nhìn vào nguồn nhưng tôi khá bối rối. Có ai biết kỹ thuật này được gọi là gì không và cách học nó?

Answer 1

Đó là cuộc gọi parallax có rất nhiều plugin cho điều này, ví dụ: http://www.ianlunn.co.uk/plugins/jquery-parallax/

Answer 2

Bạn cũng có thể xem xét một cái gì đó như thế (không javascript là bắt buộc):

@keyframes backgroundscroller { 
    from { 
    background-position: 0% 0%;  
    } 
    to { 
    background-position: 500% 500%, 400% 400%, 300% 300%, 200% 200%, 100% 100%;  
    } 
} 

#yourdivid { 
    background-image: url('full/sprite1.png'), url('512/sprite2.png'), url('256/sprite3.png'), url('128/sprite4.png'), url('64/sprite5.png'); 

    animation-name: backgroundscroller; 
    animation-duration: 300s; 
    animation-timing-function: linear; 
    animation-iteration-count: infinite; 
    animation-direction: normal; 
} 

Rõ ràng bạn phải lưu ý rằng này sẽ chỉ làm việc với trình duyệt hỗ trợ CSS3 và bạn cũng muốn xem xét bao gồm một javascript rất hữu ích giúp bạn thêm tiền tố vào vị trí và nếu cần: http://leaverou.github.com/prefixfree/

Answer 3

Đây là hiệu ứng thị sai không sử dụng JS (do đó nền được cuộn ở tốc độ không đổi). Ví dụ jfiddle: http://jsfiddle.net/MFC9B/2/

chính là có 2 lớp div lồng nhau, một bên ngoài để giữ nền, là bên trong để giữ nội dung:

.section {   
    position:relative; 
    z-index:1; 
    height:500px; 
    width:100%; 
    background-attachment:fixed; /* this keeps the background in place */ 
    background-size:100% 100%; 
    background-repeat:no-repeat; 
} 
.content { 
    position:relative; 
    z-index:2; 
    background-color:#fff; 
    border:2px solid #666;  
    height:50%; /* this height difference allows the bg to show through */  
}