What is the best way to gradually show the contents of the second div starting from the bottom?

Question

What is the best way to gradually show the contents of the second div starting from the bottom?

I want to create a scrolling effect where the contents of the second div are revealed as if they were fixed on the first div, similar to Conichi

View example in JSFiddle

.one {
  width: 768px;
  height: 700px;
  color: white;
  background-color: black;
  position: fixed;
  z-idex: -1;
}
.two {
  top: 700px;
  background-color: white;
  width: 768px;
  height: 700px;
  z-index:1;
  position: relative;
}

<body>
  <div class='one'>
    <p>
      What is Lorem Ipsum?
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
      It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </div>
  <div class='two'>
    <p>
      What is Lorem Ipsum?
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
      It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </div>
</body>

javascript jquery html css

Answer 1

Answer №1

I successfully replicated the desired effect - check it out here

Cascading Style Sheets (CSS)

.container_1 {
     background-color: black;
   color: #fff;
   z-index:3;
 }
 .container_2 {
     background-color: white;
     z-index:2;
 }
 .container_3 {
     background-color: red;
   color: #CCC;
     z-index:1;
 }
 .container {
     overflow: hidden;
     width: 100%;
     height: 100%;
     position: fixed;
 }

jQuery Script

var height = 0,
    divs = 0;

$('.container').each(function(){
    var eachdiv = $(this).outerHeight();
    height += eachdiv;
    divs ++;
});

$('body').css('height',height);

$(window).on('scroll', function () {
    var scrollTop = $(window).scrollTop();

    if(scrollTop <= (height/divs)){
        $('.container_1').css('height',(height/divs)-scrollTop);
    } else if (scrollTop <= (height/divs) * 2) {
        $('.container_1').css('height',0); // if the window scroll goes too quick
        $('.container_2').css('height',(height/divs)*2-scrollTop);
    } else if (scrollTop <= (height/divs) * 3) {
        $('.container_2').css('height',0);
    }// and so on...

});

HTML Markup

<body>
  <div class="container container_1">
      <p>What is Lorem Ipsum?</p>
  </div>
  <div class="container container_2">
      <p>What is Lorem Ipsum?</p>
  </div>
  <div class="container container_3">
      <p>What is Lorem Ipsum?</p>
  </div>  
</body>

Answer 2

I successfully replicated the desired effect - check it out here

Cascading Style Sheets (CSS)

.container_1 {
     background-color: black;
   color: #fff;
   z-index:3;
 }
 .container_2 {
     background-color: white;
     z-index:2;
 }
 .container_3 {
     background-color: red;
   color: #CCC;
     z-index:1;
 }
 .container {
     overflow: hidden;
     width: 100%;
     height: 100%;
     position: fixed;
 }

jQuery Script

var height = 0,
    divs = 0;

$('.container').each(function(){
    var eachdiv = $(this).outerHeight();
    height += eachdiv;
    divs ++;
});

$('body').css('height',height);

$(window).on('scroll', function () {
    var scrollTop = $(window).scrollTop();

    if(scrollTop <= (height/divs)){
        $('.container_1').css('height',(height/divs)-scrollTop);
    } else if (scrollTop <= (height/divs) * 2) {
        $('.container_1').css('height',0); // if the window scroll goes too quick
        $('.container_2').css('height',(height/divs)*2-scrollTop);
    } else if (scrollTop <= (height/divs) * 3) {
        $('.container_2').css('height',0);
    }// and so on...

});

HTML Markup

<body>
  <div class="container container_1">
      <p>What is Lorem Ipsum?</p>
  </div>
  <div class="container container_2">
      <p>What is Lorem Ipsum?</p>
  </div>
  <div class="container container_3">
      <p>What is Lorem Ipsum?</p>
  </div>  
</body>

Answer 3

Answer №2

If you want to implement a scrollspy feature on your website, you can utilize the Scrollspy component from Bootstrap. To see it in action, simply click on the link I have provided. Alternatively, you can include Bootstrap 4 and add the following code snippet:

body {
  position: relative;
}

<body data-spy="scroll" data-target="#navbar-example">
 ...
   <div id="navbar-example">
     <ul class="nav nav-tabs" role="tablist">
      ...
     </ul>
   </div>
  ...
</body>

To activate the scrollspy functionality using Javascript, you can use the following script:

$('body').scrollspy({ target: '#navbar-example' })

Answer 4

If you want to implement a scrollspy feature on your website, you can utilize the Scrollspy component from Bootstrap. To see it in action, simply click on the link I have provided. Alternatively, you can include Bootstrap 4 and add the following code snippet:

body {
  position: relative;
}

<body data-spy="scroll" data-target="#navbar-example">
 ...
   <div id="navbar-example">
     <ul class="nav nav-tabs" role="tablist">
      ...
     </ul>
   </div>
  ...
</body>

To activate the scrollspy functionality using Javascript, you can use the following script:

$('body').scrollspy({ target: '#navbar-example' })

What is the best way to gradually show the contents of the second div starting from the bottom?

Answer №1

Answer №2

Similar questions

Vue's keydown event will only fire when elements are in an active state

What is the best way to tally the number of fields in a JSON file based on their values

I'm curious why I can only see the HTML code and not the three.js code as well

Ways to substitute numerous instances of a string in javascript

How to retrieve a Typescript variable within an ngIf conditional statement in Angular

How can a controller in AngularJS detect when the back button of the browser is pressed

React Redux in conjunction with redux persist ensures that only a portion of the data remains stored persistently

Is there a way to have an HTML scrollbar automatically start at the bottom?

Is it the right time to dive into HTML5 & CSS3?

Enhancing elements in Bootstrap Studio with borders

Tips for expanding a script that relocates a logo into a navigation consisting of several unordered lists

What is the best way to extract an inner exception message from a JSON string using JavaScript?

Guide to bringing API information into a Material UI Card

Is the function replaceWith() a duplicate of replaceAll()?

Getting an error response with a status of 200 when making a jQuery ajax call

One way to dynamically retrieve the ID of a jQuery tab using a foreach loop in PHP OOP

Is there a way to maintain attributes when using jQuery's .replaceWith() function?

Styling the jQuery location picker input with background and focus effects

Problem with detecting collisions in Three.js

Utilizing components of GLTF to create an InstancedMesh