I am trying to create a parallax effect without using background-image
with background-attachment: fixed
, as background-attachment: fixed
doesn't work on iOS so well. Here's what I came up with:
<article class="twentyseventeen-panel"> <div class="panel-image"> <div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;" > <img src="<?php echo esc_url( $thumbnail[0] ); ?>" style="width: 100%;" /> </div> </div> </article>
.twentyseventeen-panel { overflow: hidden; position: relative; } .panel-image { position: relative; height: 100vh; max-height: 200px; }
Now I am stuck on getting to image to scroll to do the parallax effect. I have tried setting the image to a fixed
position, but my image no longer appears when I do that. How do I get this image to have a parallax effect?
To make a parallax effect, every element is moving at a different pace and time. That is how we achieve the illusion of depth, even though we are scrolling in 2D. The rule of thumb moves the “furthest” objects the least, like how it looks in the real world.
Parallax scrolling effect using CSS.
Unfortunately, I do not know of any sure fire way using pure CSS. The reason for it is because there is no way to get the current scroll position (which we could be using in a calc()
). Also, when positioning an element using fixed
, it does not care about its parent anymore and it becomes impossible to enforce an overflow:hidden
.
There are two ways of creating a paralax effect without using background, is to either make use of JavaScript, I've given you a full working example. It is minimal, might make the browser work way too much for nothing, but it works. You'll certainly want to optimize it to only apply on elements that are visible if you have a lot.
$(document).ready(function() { var onScroll = function() { var scrollTop = $(this).scrollTop(); $('.paralax-image').each(function(index, elem) { var $elem = $(elem); $elem.find('img').css('top', scrollTop - $elem.offset().top); }); }; onScroll.apply(window); $(window).on('scroll', onScroll); });
.content { height: 500px; } .paralax-image { overflow: hidden; height: 200px; position: relative; } .paralax-image img { position: absolute; height: 100vh; min-width:100%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="content"> <h2>Lorem Ipsum</h2> <div class="paralax-image"> <img src="https://via.placeholder.com/400x200"> </div> </div>
Now for the full CSS part... It is a bit complexe to implement and cannot be done for every kind of layout. The trick would be to have your image(s) using a position:fixed
rule. But instead of unsuccessfully relying on overflow:hidden
, you would have them at the lowest z-index, have all your elements with a background and create "holes" where you want to display the image. This will create a lot of problems when adding backgrounds, you'd have to make multiple different elements to make sure you have always a possibility to display the paralax image. I've tried to demonstrate how this could be achieved, without creating a too complexe example. This technique will only work for 1 image. If you want it to work with multiple images, you'd have to use javascript to switch visibility accordingly, and only 1 paralax effect visible at a time.
/* Can't use margins no more... */ h1 { margin: 0; padding: 0.67em 0; } p { margin: 0; padding: 1em 0 0; } body { margin: 0; } .container>* { background-color: white; } .paralaxed { z-index: -2; height: 100vh; position: fixed; top: 0; } .paralax-image { background: transparent; height: 200px; }
<div class="container"> <img class="paralaxed" src="https://via.placeholder.com/400x200"> <h1>My Title here</h1> <div class="paralax-image"></div> <p> lorem ipsum... </p> <p> lorem ipsum... </p> <p> lorem ipsum... </p> <p> lorem ipsum... </p> <p> lorem ipsum... </p> </div>
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