Text Parallax Effect

Question

Text Parallax Effect

For my website, I am interested in incorporating a unique parallax effect. Instead of just fixing a background image and allowing scrolling over it, I want to apply this effect to all of the content on my site.

The website consists of a single page with multiple sections. Each section is set to a minimum height of 100vh on landscape screens. When a particular section is in view, users should be able to scroll normally until the bottom of that section aligns with the bottom of the screen. Once the next container begins to enter the viewport, the previous section should become fixed, allowing the new section to slide over it seamlessly like sheets of paper stacking up.

Do you have any suggestions on how to achieve this effect? I don't need fully coded examples, but rather some ideas on how you would approach this design challenge.

Thank you for your help.

Additional Details

I feel like my description may still be vague, so let me elaborate further. Picture having five sheets of paper, each containing different content such as an "About" section or "Features." Each sheet is the height of your viewport, so only one sheet is visible at a time. If the content extends beyond the viewport height, the sheet expands accordingly. As you scroll down the page, instead of the current sheet moving upwards, it remains stationary while the next sheet slides over it like layers of paper.

javascript jquery html css parallax

Answer 1

Answer №1

Maybe you're thinking of something like this?

<main>
  <section class="orange fixed">
    <h2>
      Some text
    </h2>
  </section>
  <section class="blue">
    <h2>
      Some text
    </h2>
  </section>
  <section class="orange">
    <h2>
      Some text
    </h2>
  </section>
</main>

JS:

var $sections = $('main section');
var sectionHeight = $sections.eq(0).outerHeight();
var setCurrent = function(position ) {
    $sections.eq(position).addClass('fixed').siblings().removeClass('fixed');  
}

$(window).on('scroll', function() {
  var scTop = $(window).scrollTop();
  var position = Math.ceil( scTop / sectionHeight );
  setCurrent( position - 1 );

})

And here's some sass code

body {
  margin: 0;
}

main {
  padding: 0;
  padding-top: 100vh; // This is the key point
  section {
    height: 100vh;
    text-align: center;
    color: white;
    padding-top: 200px;
    position: relative;
    margin: 0;
    h2 {
      margin: 0;
      padding: 0;
    }
    &.orange {
      background: orange;
    }
    &.blue {
      background: blue;
    }
    &.fixed { // This is important
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
    }
  }
}

You can try it out here

https://jsfiddle.net/3r1Lm4ha/8/ (Possibly more recent)

Note: There may be room for improvement, but I hope this aligns with what you had in mind

Answer 2

Maybe you're thinking of something like this?

<main>
  <section class="orange fixed">
    <h2>
      Some text
    </h2>
  </section>
  <section class="blue">
    <h2>
      Some text
    </h2>
  </section>
  <section class="orange">
    <h2>
      Some text
    </h2>
  </section>
</main>

JS:

var $sections = $('main section');
var sectionHeight = $sections.eq(0).outerHeight();
var setCurrent = function(position ) {
    $sections.eq(position).addClass('fixed').siblings().removeClass('fixed');  
}

$(window).on('scroll', function() {
  var scTop = $(window).scrollTop();
  var position = Math.ceil( scTop / sectionHeight );
  setCurrent( position - 1 );

})

And here's some sass code

body {
  margin: 0;
}

main {
  padding: 0;
  padding-top: 100vh; // This is the key point
  section {
    height: 100vh;
    text-align: center;
    color: white;
    padding-top: 200px;
    position: relative;
    margin: 0;
    h2 {
      margin: 0;
      padding: 0;
    }
    &.orange {
      background: orange;
    }
    &.blue {
      background: blue;
    }
    &.fixed { // This is important
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
    }
  }
}

You can try it out here

https://jsfiddle.net/3r1Lm4ha/8/ (Possibly more recent)

Note: There may be room for improvement, but I hope this aligns with what you had in mind

Text Parallax Effect

Answer №1

Similar questions

The error message states: "An uncaught TypeError has occurred - the object does not possess the 'jqzoom' method."

Trouble with closing Bootstrap 4 modal

Can you explain the distinction between [att|=val] and [att~=val] in css?

The ng-view in index.html is not being loaded by AngularJS

Render a select field multiple instances in React

Exclude the node_modules directory when searching for files using a global file pattern

Retrieving data from NodeJS ExpressJS variables

Addressing a jquery.ajax relative path problem

Vue components are failing to appear in the live environment, however they function perfectly in the development environment

What is the best way to exclude input elements that have either an empty value or no value attribute specified?

Guide on integrating a JavaScript control (JavaScript package) obtained from GitHub into my asp.net application

Hide the overlay fullscreen menu upon clicking an anchor link

Displaying a blank column in a table using JavaScript

Issue with mobile browser validation for text field functionality not functioning properly

Is there a way to adjust the position of the scrolling bar to be closer to the post area?

It appears that the JS function is not being triggered

Django is indicating that the path is not reachable

extracting ID values from a looped table with the use of PHP and JavaScript

How can I smoothly navigate to the top of a page using AngularJS?

What is the solution to the error "Maximum update depth exceeded. Calls to setState inside componentWillUpdate or componentDidUpdate" in React?