Я следил за Keith Clark's по CSS Parallax. Его концепция выглядит так:
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);
}
Это работает по большей части, например, на веб-сайте . Однако мне нужно добавить этот эффект на другой веб-сайт, где я не могу полностью контролировать структуру 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
эффект параллакса...
Из того, что я прочитал, мне нужно добавить стиль transform-style: preserve-3d;
к элементам между container
и детьми, однако это не работает.
Кто-нибудь знает, что пойдет не так?
Edit:
Codepen рабочего CSS на теле.
Codepen неработающего CSS на HTML.
Edit: Из-за большего количества осложнений с фиксированными позициями и обнаружения прокрутки тела (по-видимому, это не кажется), мне действительно нужно получить эту работу, используя элемент HTML.
Что странно, это то, что работает. Следуйте по этой ссылке и нажмите и перетащите ползунок влево/вправо, эффект параллакса есть, только когда вы прокрутите вниз...
Не слишком уверен, почему этот эффект не работает при прокрутке вниз...