वैश्विक लंबन के लिए एचटीएमएल में परिप्रेक्ष्य जोड़ना - शुद्ध सीएसएस

मैं सीएसएस लंबैक्स के लिए Keith Clark's मार्गदर्शिका का पालन कर रहा हूं। इसलिए जैसे उनकी अवधारणा यह:वैश्विक लंबन के लिए एचटीएमएल में परिप्रेक्ष्य जोड़ना - शुद्ध सीएसएस

HTML:

<div class="container”> 
    <div class="parallax-child”></div> 
</div>

सीएसएस:

.container { 
    width: 100%; 
    height: 100%; 
    overflow-x: hidden; 
    overflow-y: scroll; 
    perspective: 1px; 
    perspective-origin: 0 0; 
} 

.parallax-child { 
    transform-origin: 0 0; 
    transform: translateZ(-2px) scale(3); 
}

यह मेरा development website पर सबसे अधिक भाग के लिए एकदम सही काम करता है, उदाहरण के लिए। हालांकि मैं एक वेबसाइट है, जहां मैं बहुत बिल्कुल HTML संरचना नियंत्रित नहीं कर सकते करने के लिए इस आशय जोड़ने की जरूरत है, नीचे दिए गए बुनियादी संरचना का पेड़ है, जहां मैं संपादित कर सकते हैं पर टिप्पणियां जोड़ीं।

<html> 
    <body> 
    <div itemscope itemtype="http://schema.org/AutoDealer"> 
     <div id="main-wrap"> 
     <div class="row"> 
      <div class="main twelvecol"> 

      <!-- Editable --> 
      <div> 
       <div class="row-block finance parallax__group"> 
       <div class="parallax__layer--back parallax__layer"> 
        <p>Content in here scrolls slower than everything else</p> 
       </div> 
       <div class="wrapper"> 
        <div class="container"> 
        <div class="parallax__layer--base parallax__layer"> 
         <p>This is all of the top level content</p> 
        </div> 
        </div> 
       </div> 
       </div> 
      </div> 
      <!-- END Editable --> 

      </div> 
     </div> 
     </div> 
    </div> 
    </body> 
</html>

मैं अपनी इच्छित शैलियों को जोड़ सकता हूं, बस टिप्पणियों में बताए गए HTML संरचना को संपादित नहीं कर सकता।

मेरे मुद्दा रहा, लंबन प्रभाव काम करने के लिए प्राप्त करने के लिए नहीं कर पा रहे है कि अगर मैं उदाहरण container शैलियों लंबन प्रभाव के लिए body लंबन प्रभाव से काम करता है पर डाल (इस पोस्ट के शीर्ष पर) है ...

जो मैंने पढ़ा है उससे मुझे शैली container और बच्चों के बीच तत्वों पर जोड़ने की आवश्यकता होगी, हालांकि यह काम नहीं करता है।

किसी को भी पता है कि क्या गलत हो रहा है?

संपादित करें:

शरीर पर काम कर रहे सीएसएस के Codepen।

एचटीएमएल पर गैर काम कर सीएसएस के Codepen।

संपादित करें: तय पदों और पता लगाने के शरीर स्क्रॉल (संभव नहीं ऐसा लगता है), मैं वास्तव में HTML तत्व का उपयोग करके यह काम कर प्राप्त करने की आवश्यकता के साथ और अधिक जटिलताओं के कारण।

क्या अजीब बात है, कि काम करता है की तरह है। Follow this link और क्लिक करें और स्लाइडर/दाएँ से बाएँ खींचें, लंबन प्रभाव नहीं है, न कि केवल आपके द्वारा नीचे स्क्रॉल ...

भी सुनिश्चित नहीं हैं कि क्यों इस आशय नीचे स्क्रॉल करने पर काम नहीं करता है ...

स्रोत

2017-06-05 Martyn Ball

आप इसे शरीर के बजाय HTML में क्यों बदल रहे हैं? – nitobuendia

शरीर पर होने से पाद लेख प्रदर्शित होने से रोकता है क्योंकि यह शरीर के नीचे है। –

कोई भी अनुमान इसका जवाब जानता है, इसलिए मैं साथ ही पोस्ट कर सकते हैं कि मैं क्या किया था सोचा।

ऐसा लगता है कि आप बस HTML टैग इस लंबन प्रभाव के लिए चीजों कार्यों के लिए इस तरह के चिपचिपा हेडर मैं बस स्क्रॉल राशि के लिए जाँच कर सकते हैं के रूप में उपयोग कर सकते हैं नहीं है, इसलिए मैं सिर्फ एक युक्त div पर प्रभाव डाल दिया है, तो फिर इस div और कुछ भी करने के लिए position: sticky चिपचिपा सेट पर।

स्टिकी एज या आईई पर काम नहीं करता है तो एक पतन वापस इन ब्राउज़रों पर लंबन प्रभाव को पूरी तरह से अक्षम करने और HTML तत्व पर स्क्रॉलिंग देने के लिए होगा ताकि आप position: fixed का उपयोग कर सकें।

निवर्तन:

@supports ((perspective: 1px) and (not (-webkit-overflow-scrolling: touch)) and ((position: sticky))) {

स्रोत

2017-06-06 10:41:34

क्या आपको अभी भी मदद की ज़रूरत है या क्या आपकी समस्या इस उत्तर के साथ हल हो गई है? – Christoph

अभी भी मदद की ज़रूरत है, मैं अपने प्रश्न को अधिक व्यापक उदाहरणों के साथ अपडेट कर दूंगा और जब मुझे मौका मिलेगा तो व्यस्त रहें, व्यस्त रहें। –

सुनिश्चित नहीं हैं कि अगर मैं काफी आपकी समस्या को समझा है, लेकिन तुम क्यों शरीर/HTML को अनदेखा न करें और बस अपने खुद के संपादन योग्य तत्वों से मैप करें।

काम कर उदाहरण

.body { 
 
    perspective: 1px; 
 
    height: 100vh !important; 
 
    overflow-x: hidden; 
 
    overflow-y: auto; 
 
    preserve-origin-x: 100%; 
 
} 
 
.body > div { height: 200%; } 
 
p { color: #fff; } 
 
.parallax__group { 
 
    position: relative; 
 
    // transform-style: preserve-3d; 
 
    overflow: hidden; 
 
    height: 300px; 
 
    margin-top: 100px; 
 
} 
 
.parallax__layer { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
} 
 
.parallax__layer--base { 
 
    transform: translateZ(0); 
 
    position: relative; 
 
    float: left; 
 
} 
 
.parallax__layer--back { 
 
    transform: translateZ(-1px) scale(2); 
 
    height: 100vh; 
 
    background-image: url('https://static.pexels.com/photos/173383/pexels-photo-173383.jpeg'); 
 
    background-size: cover; 
 
    background-position: center center; 
 
} 
 

 
.row-block { 
 
    background: red; 
 
}

<html> 
 

 
<body> 
 
    <div itemscope itemtype="http://schema.org/AutoDealer"> 
 
    <div id="main-wrap"> 
 
     <div class="row"> 
 
     <div class="main twelvecol"> 
 

 
      <!-- Editable --> 
 
      <div class="body"> 
 
      <div> 
 
       <div class="row-block finance parallax__group"> 
 
       <div class="parallax__layer--back parallax__layer"></div> 
 
       <div class="wrapper"> 
 
        <div class="container"> 
 
        <div class="parallax__layer--base parallax__layer"> 
 
         <p>This is all of the top level content</p> 
 
        </div> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
      <!-- END Editable --> 
 

 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

यह संस्करण आप के रूप में "काम" ने दावा किया है की एक ही सीएसएस का उपयोग करता है। मैंने जो परिवर्तन किया है वह आपके शरीर को एक के लिए बदल रहा है जो एक अतिरिक्त div wrapper है। इस तरह, यह केवल उन तत्वों को छूता है जिन्हें आप स्वयं संपादित/संपादित कर सकते हैं।

स्रोत

2017-06-10 05:24:10 nitobuendia

ऐसा करने से पृष्ठ पर अलग-अलग 'div.body' स्क्रॉल होगा, मैं कल एक बेहतर उदाहरण स्थापित करूंगा ताकि प्रभाव अधिक समझ में आता है। –

निश्चित बात। नया उदाहरण जांचने के लिए खुश :) – nitobuendia

वैश्विक लंबन के लिए एचटीएमएल में परिप्रेक्ष्य जोड़ना - शुद्ध सीएसएस

उत्तर

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