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...
3 Answers
Answers 1
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))) { Answers 2
Not sure if I quite understood your problem, but why don't you ignore the body/HTML and just map it to your own editable elements.
See working example
.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>It uses the same CSS of the version you claimed as "working". The only change I made is changing your body for a .body which is an additional div wrapper. This way, it is only touching elements you own / can edit.
Answers 3
Yes.! You can get parallex effect by changing this block of code:
CSS
html { perspective: 1px; height: 100vh !important; overflow-x: hidden; overflow-y: hidden; preserve-origin-x: 100%; position:relative; } body { height: 2000px; overflow-y: auto; } Here is the example->
html { perspective: 1px; height: 100vh !important; overflow-x: hidden; overflow-y: hidden; preserve-origin-x: 100%; position:relative; } body { height: 2000px; overflow-y: auto; } body > div { height: 200%;overflow-y:auto; } p { color: #fff; } .parallax__group { position: relative; // transform-style: preserve-3d; overflow: hidden; height: 200px; 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> <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> <!-- END Editable --> </div> </div> </div> </div> </body> </html>
0 comments:
Post a Comment