28

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:

HTML

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

CSS

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

Paolo Forgia
  • 6,572
  • 8
  • 46
  • 58
user979331
  • 11,039
  • 73
  • 223
  • 418

4 Answers4

16

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>
Silkster
  • 2,190
  • 15
  • 28
Salketer
  • 14,263
  • 2
  • 30
  • 58
  • Great solution Salketer! I would have recommended something similar. Here's some good examples of parallax effects that I found: https://blog.trackduck.com/2015/06/25/15-captivating-parallax-effects-from-codepen/ – Rocket Risa Sep 11 '17 at 21:12
  • You are right, those are nice. I opted for the simplest effect here mostly because a lot of effect require lot of code and good understanding to put everything together. Also, I have to say, because I do not understand how the CSS only on that page works... :) – Salketer Sep 12 '17 at 05:51
  • @Salketer Sorry, My edit got approved without your permission, I have added one small change here `.paralax-image img { position: absolute; height: 100vh; width:100%; }`, for smaller images the window was not set to max size, which is needed I guess, please revert back this change if needed, my only change is `width:100%;` – Naren Murali Sep 17 '17 at 10:28
  • 1
    @NarenMurali thanks for your addition! I've changed it to min-width, that way we can keep the ratio constraint if it would get bigger than 100%! – Salketer Sep 18 '17 at 06:34
11

You actually can make pure CSS parallax effects without the need for background-image or background-attachment. Keith Clark has a great write up & tutorial on it. I'm going to borrow his code for the sake of the example:

HTML

<div class="parallax">
  <div class="parallax__layer parallax__layer--back">
    ...
  </div>
  <div class="parallax__layer parallax__layer--base">
    ...
  </div>
</div>

CSS

.parallax {
  perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}
.parallax__layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.parallax__layer--base {
  transform: translateZ(0);
}
.parallax__layer--back {
  transform: translateZ(-1px) scale(2);
}

It's actually quite a simple solution, but it might take a second to grasp how it's all happening. The big thing that's going on here is the transform: translateZ(-1px) scale(2), which moves that <div> back along the z-axis and resizes it back to normal. Setting the z-axis is how the speed of the parallax is controlled. So translateZ(-1px) is slower than translateZ(-2px).

Now that the div has been moved back in the z-axis, it needs to be resized back to its normal size. To do that, you simply add scale to the transform property. The scale must be calculated using 1 + (translateZ * -1) / perspective. So transform: translateZ(-10px) should be transform: translateZ(-2px) scale(3) assuming you keep the perspective set to 1px.

Then the perspective is changed to 1px for the .parallax container which will set the <div> perspective to the center. Adding overflow-y: auto allows content to scroll normally, but descendant elements will be rendered to the fixed perspective.

Since this just uses <div>'s and CSS, you should be able to solve your problem without JS. You can easily just place your images within the divs. This is a simple demo that shows just a single <div> parallax effect. If you look at the source code, you'll see no JavaScript except the part for Google Analytics. Here's a demo with a ton of different sections.

I recommend you read this tutorial, as the code should do everything you want. Plus it works flawlessly on iOS, Safari, Chrome, & FF. I've used it a number of times, and I can't recommend the method enough. Needless to say I borrowed much of my answer from that tutorial, so props to Keith Clark for the great write up.

Matthew Beckman
  • 1,702
  • 2
  • 16
  • 28
  • 1
    Suggest Also this Guide (which inlcudes Keith Clark + Scott Kellum ) explaining why CSS parallax is better -> https://developers.google.com/web/updates/2016/12/performant-parallaxing – Federico Baù Jun 05 '21 at 15:44
0

For whatever reason this seems to have worked best for me:

https://github.com/deggenschwiler/jquery_parallax

Requires jQuery in header of page:

<html>
<head>
    <style>
      .parallax {
        height: 400px;
        width: 100%;
        background-image: url("SOMEBGIMAGE.jpg");
        background-position-y: 0%;
        background-repeat: no-repeat;
        background-size: cover;
      }
    </style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

    <script>
    $(window).scroll(function() {
          var y = 0;
          var scroll = $(window).scrollTop();
          var win = $(window).height()
          var height = $(".parallax").height();
          var offset = $(".parallax").offset().top;
          y = ((100 * scroll)/(height + win)) + ((100 * (win - offset))/(height + win));
          if (y > 100){y = 100;}
          else if (y < 0){y = 0;}
          var out = String(y) + "%";
          $(".parallax").css("background-position-y", out);
    });
    </script>
</head>
<body>
    <div class="parallax">
    </div>
</body>
</html>
Deggen
  • 91
  • 1
  • 2
0

Pure CSS-Workaround: Set the container-padding to the height of the parallax (eg. 100vh), then postion fixed/absolute the child (parallax area) in it. Play around with z-index to achieve a parallax scrolling effect. Worked for me :)

Adrian
  • 1
  • 2