Dodawanie perspektywy do HTML dla globalnej Parallax - Czysty 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); 
}

Działa to idealny dla przeważającej części, na przykład na moim development website. Jednak muszę dodać ten efekt do innej strony, na której nie mogę w ogóle kontrolować struktury HTML, poniżej znajduje się podstawowe drzewo struktury, dodane komentarze do miejsca, w którym mogę edytować.

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

mogę dodać żadnych stylów chcę, po prostu nie może zmieniać strukturę HTML oprócz gdzie stwierdzono w komentarzach.

Mój problem jest, że nie może wydawać się uzyskać efekt paralaksy do pracy, jeśli mogę umieścić przykładzie container style dla efektu paralaksy (u góry tej wiadomości) na body efekt paralaksy działa ...

Z tego, co przeczytałem, musiałbym dodać styl transform-style: preserve-3d; na elementach między container a dziećmi, jednak to nie działa.

Ktoś wie, co się dzieje?

Edit:

Codepen z CSS roboczego na ciała.

Codepen z niedziałającego kodu CSS na HTML.

Edit: ze względu na bardziej powikłań ze stałymi pozycjami i wykrywanie przewijania ciała (nie możliwe wydaje), to naprawdę trzeba uzyskać tej pracy za pomocą elementu HTML.

Co jest dziwne, czy to jest rodzaj prac. Follow this link i kliknij i przesuń suwak w lewo/prawo, efekt paralaksy jest tam, po prostu nie podczas przewijania w dół ...

Nie jestem pewien, dlaczego ten efekt nie działa podczas przewijania w dół ...

Źródło

2017-06-05 Martyn Ball

Dlaczego zmieniasz go na HTML zamiast treści? – nitobuendia

Posiadanie go na ciele powoduje zatrzymanie stopki, ponieważ jest ona poniżej ciała. –

Zgadywanie, że nikt nie zna odpowiedzi na to pytanie, więc pomyślałem, że równie dobrze mogę napisać, co zrobiłem.

Wygląda na to, że po prostu nie możesz użyć znacznika HTML dla tego efektu paralaksy, więc właśnie umieściłem efekt na zawierającym div, więc w przypadku takich funkcji jak np. Lepkie nagłówki, mogę po prostu sprawdzić ilość przewijania na tym div i ustaw wszystko, co jest przyklejone do position: sticky.

Przyklejony nie działa na Edge ani IE, więc może to spowodować całkowite wyłączenie efektu paralaksy w tych przeglądarkach i przesunięcie do elementu HTML, aby można było używać position: fixed.

awaryjna:

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

Źródło

2017-06-06 10:41:34

Czy nadal potrzebujesz pomocy lub czy rozwiązano problem z tą odpowiedzią? – Christoph

Nadal potrzebuję pomocy, zaktualizuję moje pytanie bardziej rozbudowanymi przykładami i ponownie otworzę nagrodę, gdy dostanę szansę, jestem zajęty. –

Nie wiem, czy mam dość zrozumiałe problemu, ale dlaczego nie można ignorować ciała/HTML i po prostu map go do własnych elementów edytowalnych.

Zobacz przykład roboczych

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

Używa tego samego CSS w wersji twierdziłeś jako "pracę". Jedyną zmianą, jaką wprowadziłem, jest zmiana twojego ciała na .body, który jest dodatkowym opakowaniem div. W ten sposób dotykasz tylko elementów, które posiadasz/które możesz edytować.

Źródło

2017-06-10 05:24:10 nitobuendia

To sprawi, że tylko "div .body" przewinie się osobno na stronie, jutro ustanowię lepszy przykład, więc efekt będzie bardziej sensowny. –

Pewnie. Chętnie sprawdzę nowy przykład :) – nitobuendia

Dodawanie perspektywy do HTML dla globalnej Parallax - Czysty CSS

Odpowiedz

Powiązane problemy