सीएसएस एकाधिक पृष्ठभूमि अलग अलग गति

Question

पर स्क्रॉल मैं आज इस वेबसाइट में आए और मैं चक्कर में पड़ गया था: http://www.actionbutton.net/

उसकी पृष्ठभूमि है कि एक अलग दर पर स्क्रॉल करें और एक दूसरे पर व्याप्त के लिए जाना जाता है तकनीक के कुछ प्रकार का उपयोग कर वह है। मैंने स्रोत को देखा लेकिन बहुत उलझन में हूँ। क्या किसी को पता है कि तकनीक क्या कहलाती है और इसे कैसे सीखें?

Answer 1

यह कॉल parallax है इस के लिए plugin के बहुत सारे हैं। http://www.ianlunn.co.uk/plugins/jquery-parallax/

Answer 2

तुम भी (कोई जावास्क्रिप्ट की आवश्यकता है) ऐसा ही कुछ विचार कर सकते हैं:

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

जाहिर है आप जानते हैं कि इस ब्राउज़रों कि CSS3 समर्थन के साथ ही काम करेंगे होना चाहिए और आप भी शामिल करने पर विचार करना चाहते हैं एक बहुत ही उपयोगी जावास्क्रिप्ट जो उपसर्ग को जोड़ने की देखभाल करता है, जहां और यदि आवश्यक हो: http://leaverou.github.com/prefixfree/

Answer 3

यहां लंबन प्रभाव का अनुमान है जो जेएस का उपयोग नहीं करता है (इस प्रकार पृष्ठभूमि लगातार गति पर स्क्रॉल कर रही है)। jfiddle उदाहरण: http://jsfiddle.net/MFC9B/2/

कुंजी एक 2-परत नेस्टेड divs बाहरी एक पृष्ठभूमि धारण करने के लिए, सामग्री धारण करने के लिए आंतरिक एक है कि वहाँ, है:

.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 */  
}