Is there a way to achieve a parallax effect without relying on a background-image?

Question

Is there a way to achieve a parallax effect without relying on a background-image?

I am attempting to achieve a parallax effect without relying on background-image or background-attachment: fixed, as the latter doesn't function well on iOS. Below is my approach:

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

I am currently facing a challenge with making the image scroll for the desired parallax effect. I have experimented with setting the image to a fixed position, but it causes the image to disappear. What would be the correct approach to implement a parallax effect in this scenario?

html css parallax

Answer 1

Answer №1

Regrettably, I am not aware of a foolproof method using only CSS. The challenge lies in the inability to access the current scroll position, which is necessary for a calc() function. Additionally, when positioning an element with fixed, it disregards its parent's constraints and prevents enforcing overflow:hidden.

There are two alternative approaches to creating a parallax effect without relying on background images—we can either utilize JavaScript, as demonstrated by the provided functional example, or optimize the code to apply the effect selectively on visible elements to avoid excessive browser processing.

$(document).ready(function() {
  var onScroll = function() {
    var scrollTop = $(this).scrollTop();
    $('.parallax-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;
}

.parallax-image {
  overflow: hidden;
  height: 200px;
  position: relative;
}

.parallax-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="parallax-image">
    <img src="https://via.placeholder.com/400x200">
  </div>


</div>

In terms of implementing the full CSS solution, it can be quite intricate and may not be applicable to all layouts. The concept involves utilizing images with a position:fixed property at the lowest z-index level, designing cutouts within other elements' backgrounds to reveal the parallax image. While this technique presents challenges with background addition and necessitates multiple elements, I have simplified the demonstration to showcase the approach. This methodology supports a single image display; for multiple images, JavaScript functionality would be required to manage visibility transitions smoothly.

/* 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;
}

.parallaxed {
  z-index: -2;
  height: 100vh;
  position: fixed;
  top: 0;
}

.parallax-image {
  background: transparent;
  height: 200px;
}

<div class="container">
  <img class="parallaxed" src="https://via.placeholder.com/400x200">
  <h1>My Title here</h1>
  <div class="parallax-image"></div>
  <p>
    lorem ipsum...
  </p>
  <p>
    lorem ipsum...
  </p>
  <p>
    lorem ipsum...
  </p>
  <p>
    lorem ipsum...
  </p>
  <p>
    lorem ipsum...
  </p>
</div>

Answer 2

Regrettably, I am not aware of a foolproof method using only CSS. The challenge lies in the inability to access the current scroll position, which is necessary for a calc() function. Additionally, when positioning an element with fixed, it disregards its parent's constraints and prevents enforcing overflow:hidden.

There are two alternative approaches to creating a parallax effect without relying on background images—we can either utilize JavaScript, as demonstrated by the provided functional example, or optimize the code to apply the effect selectively on visible elements to avoid excessive browser processing.

$(document).ready(function() {
  var onScroll = function() {
    var scrollTop = $(this).scrollTop();
    $('.parallax-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;
}

.parallax-image {
  overflow: hidden;
  height: 200px;
  position: relative;
}

.parallax-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="parallax-image">
    <img src="https://via.placeholder.com/400x200">
  </div>


</div>

In terms of implementing the full CSS solution, it can be quite intricate and may not be applicable to all layouts. The concept involves utilizing images with a position:fixed property at the lowest z-index level, designing cutouts within other elements' backgrounds to reveal the parallax image. While this technique presents challenges with background addition and necessitates multiple elements, I have simplified the demonstration to showcase the approach. This methodology supports a single image display; for multiple images, JavaScript functionality would be required to manage visibility transitions smoothly.

/* 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;
}

.parallaxed {
  z-index: -2;
  height: 100vh;
  position: fixed;
  top: 0;
}

.parallax-image {
  background: transparent;
  height: 200px;
}

<div class="container">
  <img class="parallaxed" src="https://via.placeholder.com/400x200">
  <h1>My Title here</h1>
  <div class="parallax-image"></div>
  <p>
    lorem ipsum...
  </p>
  <p>
    lorem ipsum...
  </p>
  <p>
    lorem ipsum...
  </p>
  <p>
    lorem ipsum...
  </p>
  <p>
    lorem ipsum...
  </p>
</div>

Answer 3

Answer №2

If you're looking to create CSS parallax effects without relying on background-image or background-attachment, there's a neat approach worth exploring. Keith Clark has penned an insightful article and tutorial on this very subject, which serves as a valuable resource for understanding the mechanics.

HTML Structure

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

CSS Implementation

.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);
}

The key to achieving the parallax effect lies in the line of code

transform: translateZ(-1px) scale(2)

. This manipulation along the z-axis dictates the speed at which the effect unfolds. By adjusting values like translateZ, you can fine-tune the experience.

It's crucial to understand how setting perspective influences the visual output. By maintaining a thoughtful balance between transform properties and container attributes like overflow-y: auto, you can seamlessly integrate parallax elements into your design without resorting to JavaScript.

For a practical demonstration, check out this sample demo showcasing a single div parallax effect. Feel free to explore additional examples in this extensive showcase.

This technique is not only effective but also cross-browser compatible, making it a reliable choice for various projects. Be sure to delve into Keith Clark's tutorial for comprehensive guidance on leveraging these CSS capabilities.

Answer 4

If you're looking to create CSS parallax effects without relying on background-image or background-attachment, there's a neat approach worth exploring. Keith Clark has penned an insightful article and tutorial on this very subject, which serves as a valuable resource for understanding the mechanics.

HTML Structure

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

CSS Implementation

.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);
}

The key to achieving the parallax effect lies in the line of code

transform: translateZ(-1px) scale(2)

. This manipulation along the z-axis dictates the speed at which the effect unfolds. By adjusting values like translateZ, you can fine-tune the experience.

It's crucial to understand how setting perspective influences the visual output. By maintaining a thoughtful balance between transform properties and container attributes like overflow-y: auto, you can seamlessly integrate parallax elements into your design without resorting to JavaScript.

For a practical demonstration, check out this sample demo showcasing a single div parallax effect. Feel free to explore additional examples in this extensive showcase.

This technique is not only effective but also cross-browser compatible, making it a reliable choice for various projects. Be sure to delve into Keith Clark's tutorial for comprehensive guidance on leveraging these CSS capabilities.

Answer 5

Answer №3

Here is a solution that has worked well for me:

https://github.com/deggenschwiler/jquery_parallax

You will need to include jQuery in the header of your 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>

Answer 6

Here is a solution that has worked well for me:

https://github.com/deggenschwiler/jquery_parallax

You will need to include jQuery in the header of your 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>

Answer 7

Answer №4

Use a CSS workaround by adjusting the container-padding to match the height of the parallax (for example, 100vh), and then position the child element (parallax area) as fixed or absolute within it. Experiment with z-index values to create a smooth parallax scrolling effect. This method proved successful for my project :)

Answer 8

Use a CSS workaround by adjusting the container-padding to match the height of the parallax (for example, 100vh), and then position the child element (parallax area) as fixed or absolute within it. Experiment with z-index values to create a smooth parallax scrolling effect. This method proved successful for my project :)

Answer 9

Answer №5

Although this question may be a bit outdated, there is now a solution available that I would like to share for those who are still seeking it. You can utilize the scroll() function in CSS to control animation timelines based on the scrollbar axis. While not universally supported by all browsers (refer to here), this function enables you to create a parallax effect as demonstrated below:

body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 200dvh;
        }

        .container {
            width: 100%;
            height: 200px;
            overflow: hidden;
            display: flex;
        }

        img {
            object-fit: cover;
            animation-name: img-up-down;
            animation-duration: 1ms;
            animation-direction: alternate;
            animation-timing-function: linear;
            animation-timeline: scroll(root);
            min-width: 100%;
        }

        @keyframes img-up-down {
            0% {
                object-position: bottom;
            }

            100% {
                object-position: top;
            }
        }

<body>
    <div class="container">
        <img src="https://images.squarespace-cdn.com/content/v1/52540926e4b0d49865bee20d/1473520260750-LO9DJ4REDZYHU25BDX25/London+portrait+photographer"
            alt="">
    </div>
</body>

Answer 10

Although this question may be a bit outdated, there is now a solution available that I would like to share for those who are still seeking it. You can utilize the scroll() function in CSS to control animation timelines based on the scrollbar axis. While not universally supported by all browsers (refer to here), this function enables you to create a parallax effect as demonstrated below:

body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 200dvh;
        }

        .container {
            width: 100%;
            height: 200px;
            overflow: hidden;
            display: flex;
        }

        img {
            object-fit: cover;
            animation-name: img-up-down;
            animation-duration: 1ms;
            animation-direction: alternate;
            animation-timing-function: linear;
            animation-timeline: scroll(root);
            min-width: 100%;
        }

        @keyframes img-up-down {
            0% {
                object-position: bottom;
            }

            100% {
                object-position: top;
            }
        }

<body>
    <div class="container">
        <img src="https://images.squarespace-cdn.com/content/v1/52540926e4b0d49865bee20d/1473520260750-LO9DJ4REDZYHU25BDX25/London+portrait+photographer"
            alt="">
    </div>
</body>

Is there a way to achieve a parallax effect without relying on a background-image?

HTML

CSS

Answer №1

Answer №2

HTML Structure

CSS Implementation

Answer №3

Answer №4

Answer №5

Similar questions

Move the formatted text of a TFS work item description into a Word document

How can I add animation to an HTML5 video using jQuery?

displaying the local path when a hyperlink to a different website is clicked

the frame on the page is distorting

A error was encountered stating that the formValidation function is not defined when the HTML form element is submitted

Guide to Repairing Uncaught TypeError: players.setAttribute is not a recognized method?

How to center a label vertically within a button group using Bootstrap

What is the process for transforming information from a database into a clickable hyperlink?

Sliding background in a multi-column accordion

Creating a Web Form in Outlook Using the POST Method

Styling Rules for WebKit Browsers

`Carousel nested within tabbed interface`

Setting up only two input fields side by side in an Angular Form

What is the best way to align an image to the left side of the screen using Bootstrap 4?

Combining arrays that run parallel in Jquery

View's list fails to reflect changes in the Model

Is there a way to place a button in the top-right corner next to my Bootstrap 5 card?

Creating a bespoke scrollbar using Material UI

Unexplained vanishing of CSS padding upon form submission

svg rect mistakenly appearing as a rounded polygon