Stacking components when scrolling in CSS to create a scrolling effect

Question

Stacking components when scrolling in CSS to create a scrolling effect

I've been attempting to replicate the scrolling animation seen on this particular website: . The effect involves keeping the previous content in place while new content stacks on top as you scroll. I have experimented with using position:sticky and adjusting the z-index for each element, but so far it has not yielded the desired outcome. Does anyone know how to achieve this scrolling effect using CSS?

Source: https://codepen.io/daniel5120/pen/PoEoaEP In essence, I am looking to maintain the original placement of the contents within the first container while allowing the second element to overlay the first.

html css web

Answer 1

Answer №1

Unfortunately, the code you provided on codepen did not function properly with the position: sticky property because of the specified height in the html and body elements. If you are interested in understanding why this occurred, I recommend checking out this explanation on Stack Overflow.

To view the modified version of your code on codepen, please click here.

In order to illustrate why your original code did not work as intended, I have created a sample example below:

html, body {
    margin: 0px;
    padding: 0px;
}

.pages {
    position: sticky;
    width: 100%;
    height: 100vh;
        top: 0;
    
    display: inline-block;
    padding: 10px;
    box-sizing: border-box;
}

<div class="pages" style="background-color:red;">
    <h1>Title RED</h1>
    <img src="https://picsum.photos/400/100?random=1">
</div>

<div class="pages" style="background-color:yellow;">
    <h1>Title YELLOW</h1>
    <img src="https://picsum.photos/400/100?random=2">
</div>

<div class="pages" style="background-color:blue;">
    <h1>Title BLUE</h1>
    <img src="https://picsum.photos/400/100?random=3">
</div>

<div class="pages" style="background-color:green;">
    <h1>Title GREEN</h1>
    <img src="https://picsum.photos/400/100?random=4">
</div>

Answer 2

Unfortunately, the code you provided on codepen did not function properly with the position: sticky property because of the specified height in the html and body elements. If you are interested in understanding why this occurred, I recommend checking out this explanation on Stack Overflow.

To view the modified version of your code on codepen, please click here.

In order to illustrate why your original code did not work as intended, I have created a sample example below:

html, body {
    margin: 0px;
    padding: 0px;
}

.pages {
    position: sticky;
    width: 100%;
    height: 100vh;
        top: 0;
    
    display: inline-block;
    padding: 10px;
    box-sizing: border-box;
}

<div class="pages" style="background-color:red;">
    <h1>Title RED</h1>
    <img src="https://picsum.photos/400/100?random=1">
</div>

<div class="pages" style="background-color:yellow;">
    <h1>Title YELLOW</h1>
    <img src="https://picsum.photos/400/100?random=2">
</div>

<div class="pages" style="background-color:blue;">
    <h1>Title BLUE</h1>
    <img src="https://picsum.photos/400/100?random=3">
</div>

<div class="pages" style="background-color:green;">
    <h1>Title GREEN</h1>
    <img src="https://picsum.photos/400/100?random=4">
</div>

Stacking components when scrolling in CSS to create a scrolling effect

Answer №1

Similar questions

Is there a way to relocate the play again button below the box?

The jQuery functions properly offline, but fails to load when connected to the

Implementing jQuery functionality on elements that are generated dynamically

sliderLighter: keep the slider moving smoothly at a constant speed

How can a server retrieve a file uploaded using FormData and Ajax on a cross-domain upload?

Leverage the geocode callback function results from Google Maps in NodeJS to render a map on the AngularJS 2 component template

Upon clicking the checkbox, only the ul tag will be displayed on the screen

Tips for achieving a slanted div design

Adjusting the height of the Sencha Touch container to accommodate its content

The Ruby on Rails application is having trouble detecting the stylesheet in the assets

In order to ensure JavaScript can be universally applied to all images, it needs to be made more generic

The color of the Angular md-switch .md-thumb is not showing up properly when switching the toggle

Exploring the wonders of Html5 Canvas with base64 encoded images

Express handlebars does not support client-side javascript

Integrate a feature in your form that allows users to preview and edit their submission before finalizing

Begin anew with Flip.js

Is it possible to create an index.html page with all the necessary head tags to prevent duplicate code across multiple html pages?

Extract information from a constantly changing HTML webpage using Java

Showing dynamic html based on conditions using Knockout

What is the most effective way to eliminate the title from any tag?