Menu
I have been following Keith Clark's guide to CSS Parallax. His concept it like so:
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);
}
This works perfect for the most part, for example on my development website. However I need to add this effect to another website where I can't control the HTML structure much at all, below is the basic structure tree, added comments to where I can edit.
<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>
I can add any styles I want, just can't edit the HTML structure apart from where stated in the comments.
My issue is I can't seem to get the parallax effect to work, if I put the example container styles for the parallax effect (at the top of this post) on the body the parallax effect works...
From what I have read I would need to add the transform-style: preserve-3d; style onto elements between the container and the children, however this doesn't appear to work.
Anyone know what's going wrong?
Edit:
Codepen of the working CSS on the body.
Codepen of the non-working CSS on the HTML.
Edit: Due to more complications with fixed positions and detecting body scroll (not possible it seems), I really need to get this working by using the HTML element.
What is strange, is that is sort of works. Follow this link and click and drag the slider left/right, the parallax effect is there, just not when you scroll down...
Not too sure why this effect doesn't work when you scroll down...
988
We will use basic tags of HTML like div, paragraph, and heading to write our content and will use CSS to align and beautify our basic HTML design. We have used a container element and add a background image to the container. Then we have used the background-attachment: fixed to create the actual parallax effect.
Learn how to create a parallax scrolling effect with CSS. Parallax scrolling is a web site trend where the background content (i.e. an image) is moved at a different speed than the foreground content while scrolling. Click on the links below to see the difference between a website with and without parallax scrolling.
Definition and Usage. The perspective property is used to give a 3D-positioned element some perspective. The perspective property defines how far the object is away from the user. So, a lower value will result in a more intensive 3D effect than a higher value. When defining the perspective property for an element, ...
Adrian Payne November 2, 2018 Links demo and code Made with HTML / CSS (SCSS) / JavaScript (Babel) About the code 3D CSS Parallax Depth Effect Playing with CSS translate and rotate transforms based on mousemove(sorry mobile users) to simulate some z-axis depth on the card and individual movie characters.
Guessing no one knows the answer to this, so thought I may as well post what I did.
It appears that you simply can't use the HTML tag for this Parallax effect, so I have just put the effect on a containing div, so then for things functions such as sticky headers I can simply check for the scroll amount on this div and set anything sticky to position: sticky.
Sticky doesn't work on Edge or IE so a fall back would be just to completely disable the parallax effect on these browsers and give the scrolling back to the HTML element so you can use position: fixed.
Fallback:
@supports ((perspective: 1px) and (not (-webkit-overflow-scrolling: touch)) and ((position: sticky))) {
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With