2016-08-01 20 views
5

मैं एक निश्चित सीएसएस लंबन प्रभाव प्राप्त करने की कोशिश कर रहा हूं जो एक निश्चित पृष्ठभूमि ऊंचाई के बिना काम कर रहा है। यह fewplaces में वर्णित है, लेकिन उनके पास सामान्य बाधा है कि पृष्ठभूमि परत में एक निश्चित, ज्ञात ऊंचाई होनी चाहिए।निश्चित पृष्ठभूमि ऊंचाई के बिना शुद्ध सीएसएस लंबन?

मैं कुछ गतिशील सामग्री के कारण पृष्ठभूमि के लिए एक निश्चित, ज्ञात ऊंचाई के बिना प्रभाव प्राप्त करना चाहता हूं।

मेरे कम से कम उदाहरण यहाँ है: https://jsfiddle.net/yf8oyben/

#container { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    perspective: 1px; 
 
    overflow-x: hidden; 
 
    overflow-y: scroll; 
 
} 
 
.background { 
 
    transform: translateZ(-1px) scale(2); 
 
    width: 100%; 
 
    background: lightgreen; 
 
    height: 250px; /* Assumes bg height */ 
 
    position: absolute; /* Assumes bg height */ 
 
    top: calc(125px - 50vh); /* Assumes bg height */ 
 
} 
 
.foreground { 
 
    background: rgba(0, 0, 255, 0.5); 
 
    width: 100%; 
 
    position: absolute; /* Assumes bg height */ 
 
    top: 250px; /* Assumes bg height */ 
 
}
<body> 
 
    <div id='container'> 
 
    <div id="group1"> 
 
     <div class="background"> 
 
     <div style="height: 10rem"></div> 
 
     <center>Banner</center> 
 
     <div style="height: 10rem"></div> 
 
     </div> 
 
     <div class="foreground"> 
 
     <div style="height: 10rem"></div> 
 
     <center>Content</center> 
 
     <div style="height: 100rem"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

अब यह काम करता है लेकिन यह मानता है कि पृष्ठभूमि 250px है, के रूप में सीएसएस में एनोटेट। क्या इसे हटाने के लिए संभव है और अभी भी प्रभाव को बरकरार रखना है?

+0

मैं इस समस्या को एक बहुत के साथ संघर्ष किया है और किसी भी संभव समाधान नहीं मिला है, मूल रूप से मुख्य मुद्दा यह है कि एक माता पिता div नहीं कर सकता है अपनी ऊंचाई को एक पूर्ण बाल div पर सेट करें, इसलिए आपको इसकी ऊंचाई निर्धारित करने के लिए एक पंक्ति जेएस डालना होगा। –

उत्तर

2

आप बैनर की ऊंचाई को जानने के बिना इस लंबन प्रभाव को प्राप्त कर सकते हैं। आपको केवल पूर्ण स्थिति छोड़ने और perspective-origin और transform-orign गुणों को अनुकूलित करने की आवश्यकता है, उन्हें दूसरे के शीर्ष पर स्थित होना चाहिए।

यहाँ एक डेमो है: CSS only parallax effect

*{margin:0;padding:0;} 
 
#wrap{ 
 
    position:fixed; 
 
    width:100%; height:100%; 
 
    overflow-x:hidden; 
 
    overflow-y:scroll; 
 
    perspective: 1px; 
 
    perspective-origin:0 0; 
 
} 
 
.bg{ 
 
    background:teal; 
 
    transform-origin:0 0; 
 
    transform: translateZ(-1px) scale(2); 
 
} 
 
.bg img{ 
 
    display:block; 
 
    width:100%; height:auto; 
 
} 
 
.cont{ 
 
    position:relative; 
 
    background:rgba(0,0,0,0.8); 
 
    color:#fff; 
 
    padding:5%; 
 
} 
 
.cont *{ 
 
    max-width:900px; 
 
    margin:5% auto; 
 
}
<div id="wrap"> 
 
    <div class="bg"> 
 
    <img src="http://i.imgur.com/hPLqUtN.jpg" alt="" /> 
 
    </div> 
 
    <div class="cont"> 
 
    <h1>Lorem Ipsum</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et purus porta, porta dolor vel, pulvinar turpis. Suspendisse aliquam placerat turpis, sed ullamcorper nisl vestibulum eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod tempor elit a pulvinar. Integer vehicula purus ipsum, id ultricies risus placerat sit amet. Cras vel ante egestas diam egestas sagittis. Mauris facilisis, dolor pulvinar tempus vestibulum, elit lectus gravida sem, sed volutpat dui dolor vel purus. Praesent nec ligula ac mi faucibus hendrerit vitae sed felis. Nullam vehicula magna vitae ultrices dapibus. Pellentesque facilisis dui a diam scelerisque pharetra. Vestibulum dapibus imperdiet molestie. Fusce fringilla facilisis metus, in iaculis lectus fermentum eget. Ut tortor quam, imperdiet sit amet nisi in, fringilla porta sapien. Aenean a enim vestibulum, bibendum dolor sed, consequat mi.</p> 
 
    <p>Fusce faucibus nulla id iaculis sagittis. Duis ac arcu a ex elementum feugiat. Proin ut quam quis tortor vulputate semper a id nunc. Morbi rhoncus ultricies ultricies. Praesent semper id massa sed euismod. Fusce sagittis felis nec libero malesuada, in luctus enim aliquam. Aliquam sagittis, orci eget blandit vestibulum, mi dui blandit mauris, et tincidunt tellus nisi sagittis lacus. Sed dignissim, sapien vitae cursus imperdiet, augue massa tempor ex, non finibus risus metus ac enim. Mauris blandit eros nisi.</p> 
 
    <p>Sed bibendum ante ac metus hendrerit, nec commodo tortor venenatis. Pellentesque porta eros non eros cursus, vitae commodo sapien facilisis. Praesent sit amet volutpat lacus. Nullam sed quam ac dolor blandit lacinia. Ut euismod turpis sit amet libero pulvinar, non aliquet lacus bibendum. Nullam libero massa, facilisis sed neque id, porta fringilla eros. Curabitur vestibulum nisi nec tempor tempor. Sed fermentum mauris diam, eu volutpat magna tempus et. Ut semper dapibus purus eget ullamcorper. Aenean varius rutrum purus id congue. Mauris sit amet turpis ornare, pharetra ex et, porta lorem. In hac habitasse platea dictumst.</p> 
 
    <p>Nulla sed pellentesque nibh, eu consectetur neque. Curabitur eu risus at felis sagittis blandit. Nunc non massa non massa mattis semper. Curabitur dapibus tortor velit, id tincidunt ligula rutrum sed. Quisque feugiat consequat molestie. Curabitur lobortis neque ac porta imperdiet. Sed malesuada nibh sit amet magna commodo, sed bibendum turpis vestibulum. Suspendisse vel rutrum dolor, sed bibendum turpis. Morbi condimentum fermentum urna id venenatis.</p> 
 
    </div> 
 
</div>

संबंधित मुद्दे