Küresel Paralaks - Saf CSS

için HTML'ye perspektif ekleme CSS Parallax'a Keith Clark's rehberini takip ediyorum. şöyle O'nun kavram it:Küresel Paralaks - Saf CSS

HTML:

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

CSS:

.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); 
}

Bu benim development website örneğin, çoğunlukla mükemmel çalışır. Ancak bu etkiyi HTML yapısını çok fazla kontrol edemediğim başka bir web sitesine eklemem gerekiyor, aşağıda temel yapı ağacı var, nerede düzenleyebileceğime yorum ekledim.

<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>

Sadece yorumların belirtilen yerden ayrı HTML yapısını düzenleyemezsiniz, istediğim herhangi stilleri ekleyebilir.

Sorunum ... Ben paralaks etkisi çalışır body üzerine (bu yazının üst kısmında) paralaks etki için ömeği container stilleri koyarsanız ben, paralaks etkisi çalışmak için görünmektedir olamaz

olduğunu

Okuduklarımdan, transform-style: preserve-3d; stilini container ve çocuklar arasındaki öğelere eklemeliyim, ancak bu işe yaramaz.

Neyin yanlış gittiğini bilen var mı?

Düzenleme: vücuda üzerinde çalışma CSS

Codepen. HTML'daki çalışmayan CSS'nin

Codepen numaralı URL'sini

Düzenleme: sabit pozisyonlarda ve tespit vücut kaydırma (mümkün değil görünüyor), gerçekten HTML öğesi kullanılarak bu çalışma almak gerekir daha komplikasyonlar nedeniyle.

Garip olan şey, bu bir tür iştir. Eğer aşağı kaydırma yaparken Follow this link ve tıklayıp sol/sağ kaydırıcıyı sürükleyin paralaks etkisi ... adil değil, orada

aşağı kaydırırken bu etki çalışmıyor neden çok emin değil

...

kaynak

2017-06-05 Martyn Ball

Neden onu beden yerine HTML'ye değiştiriyorsunuz? – nitobuendia

Vücudun üzerindeyken alt bölümün gövdenin altında kaldığından görüntülenmesini durdurur. –

Kimse bunun cevabını bilmiyor sanırım, bu yüzden yaptığım şeyi yayınlayabileceğimi düşündüm.

Bu Paralaks efektinin HTML etiketini kullanamayacağınız anlaşılıyor, bu yüzden ben sadece içeren bir div üzerinde etkisi koydum, bu yüzden yapışkan başlık gibi işlevler için kaydırma miktarını kontrol edebiliyorum Bu div üzerinde ve position: sticky için yapışkan bir şey ayarlayın.

Yapışkan, Edge'de veya IE'de çalışmaz, bu nedenle bir geri dönüş bu tarayıcılardaki paralaks etkisini tamamen devre dışı bırakabilir ve HTML öğesine geri kaydırarak position: fixed'u kullanabilirsiniz.

Yedek:

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

kaynak

2017-06-06 10:41:34

Hala yardıma ihtiyacınız var mı ya da probleminiz bu cevapla mı çözüldü? – Christoph

Hâlâ yardıma ihtiyacım var, daha kapsamlı örneklerle sorumu güncelleyeceğim ve şans bulduğumda, meşgul olduğumda ödülü yeniden açacağım. –

Sizin probleminizin anlamış olur, ama değil beden/HTML göz ardı edip sadece kendi düzenlenebilir öğelere eşlemek niye.

çalışma ömeği

.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>

Size "çalışma" olarak iddia versiyonunun aynı CSS kullanır bakın. Yaptığım tek değişiklik, bedenini ek bir div sopası olan bir kimse için değiştirmektir. Bu şekilde, yalnızca sahip olduğunuz/düzenleyebileceğiniz öğelere dokunmaktır.

kaynak

2017-06-10 05:24:10 nitobuendia

Bunu yapmak sadece 'div.body' sayfasını sayfaya kaydırırdı, daha iyi bir örnek oluşturacağım, böylece efekt daha anlamlı hale geliyor. –

Elbette. Yeni örneği kontrol etmek için mutluyum :) – nitobuendia

Küresel Paralaks - Saf CSS

cevap

İlgili konular