Create a type of parallax effect where the text block is fixed in place, similar to a background-attachment

Question

Create a type of parallax effect where the text block is fixed in place, similar to a background-attachment

In my quest to create a unique parallax effect, I am exploring the idea of making each section scroll vertically to unveil the next one, with distinct background colors, images, and text blocks. The challenge lies in keeping the text fixed relative to its parent container while achieving this effect.

To visualize what I aim to achieve, I have created a static example using screenshots for each section: static example. However, my goal is to make the content dynamic rather than relying on flat images.

Below is a simplified version of the code I have written so far:

Code snippet here...

The parallax effect is implemented through CSS utilizing background-attachment: fixed, which functions correctly. However, the issue arises with positioning the text blocks. My intention is to have them remain stationary within their respective sections while centered. When set to position: fixed, the text elements overlap or all display at once in the initial section. Alternatively, any other position attribute causes them to scroll like standard elements.

I understand that setting an element's position to fixed removes its relation to the parent element flow; yet, I am searching for a solution involving advanced CSS techniques or even a JavaScript alternative to accomplish this desired effect.

I have experimented with various HTML/CSS structures and attempted multiple JavaScript solutions such as rellax, jarallax, and ScrollMagic, but these options are too complex for my requirements. Despite dedicating ample time to searching for examples matching my concept, I have been unable to find a suitable one thus far.

javascript html css

Answer 1

Answer №1

Previously, I experimented with a similar effect involving images and JavaScript. This time, I decided to use the same technique but with text content instead of images. As it turns out, there doesn't seem to be a pure CSS solution for this, so I'm simulating the fixed position by dynamically adjusting the top property using absolute positioning.

Below is an example where I've made some adjustments to the CSS to simplify things. Additionally, CSS variables are used extensively to keep the JavaScript code minimal and manageable through CSS.

window.onscroll = function() {
  var scroll = window.scrollY || window.scrollTop || document.getElementsByTagName("html")[0].scrollTop;
  document.documentElement.style.setProperty('--scroll-var', scroll + "px");
}

:root {
  --scroll-var: 0px
}

body {
  margin: 0;
  padding: 0;
}

h2 {
  font-size: 48px;
}

p {
  font-size: 18px;
}

/* CSS styles for sections go here */

.content {
  /* Content styling */
}

.copy {
  color: #fff;
  font-family: 'Noto Serif', serif;
  font-weight: 300;
  max-width: 300px;
}

.button {
  /* Button styling */
}

.button:hover {
  /* Hover effect for button */
}

<body>
  <section class="first">
    <div class="content">
      <div class="copy">
        <h2>Header 1 </h2>
        <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
      </div>
    </div>
  </section>
  <section class="second">
    <div class="content">
      <div class="copy">
        <h2>Header 2</h2>
        <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
      </div>
    </div>
  </section>
  <section class="third">
    <div class="content">
      <div class="copy">
        <h2>Header 3</h2>
        <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
      </div>
    </div>
  </section>
  <section class="fourth">
    <div class="content">
      <div class="copy">
        <h2>Call to action</h2>
        <a class="button">Button</a>
      </div>
    </div>
  </section>
</body>

Answer 2

Previously, I experimented with a similar effect involving images and JavaScript. This time, I decided to use the same technique but with text content instead of images. As it turns out, there doesn't seem to be a pure CSS solution for this, so I'm simulating the fixed position by dynamically adjusting the top property using absolute positioning.

Below is an example where I've made some adjustments to the CSS to simplify things. Additionally, CSS variables are used extensively to keep the JavaScript code minimal and manageable through CSS.

window.onscroll = function() {
  var scroll = window.scrollY || window.scrollTop || document.getElementsByTagName("html")[0].scrollTop;
  document.documentElement.style.setProperty('--scroll-var', scroll + "px");
}

:root {
  --scroll-var: 0px
}

body {
  margin: 0;
  padding: 0;
}

h2 {
  font-size: 48px;
}

p {
  font-size: 18px;
}

/* CSS styles for sections go here */

.content {
  /* Content styling */
}

.copy {
  color: #fff;
  font-family: 'Noto Serif', serif;
  font-weight: 300;
  max-width: 300px;
}

.button {
  /* Button styling */
}

.button:hover {
  /* Hover effect for button */
}

<body>
  <section class="first">
    <div class="content">
      <div class="copy">
        <h2>Header 1 </h2>
        <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
      </div>
    </div>
  </section>
  <section class="second">
    <div class="content">
      <div class="copy">
        <h2>Header 2</h2>
        <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
      </div>
    </div>
  </section>
  <section class="third">
    <div class="content">
      <div class="copy">
        <h2>Header 3</h2>
        <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
      </div>
    </div>
  </section>
  <section class="fourth">
    <div class="content">
      <div class="copy">
        <h2>Call to action</h2>
        <a class="button">Button</a>
      </div>
    </div>
  </section>
</body>

Answer 3

Answer №2

If you're looking to master the art of positioning elements on a webpage, I've got just the snippet for you. It's functional, but the real challenge lies in understanding the mathematical intricacies behind it. Pay attention to the details and unleash your creativity!

$( document ).ready(function() {
    $(document).scroll(function() {
      // Determining the position of the first slide for accurate movement tracking
      var rect = $(".first")[0].getBoundingClientRect();
      
      // Calculating the viewport height
      var screenHeight = $( window ).height();
      
      // Defining the offset for every .copy element to maintain consistent top alignment
      // Your task: Unravel the precise math required here
      $(".copy").offset({ top: screenHeight*1.5-rect.bottom});
    });
});

Your CSS goes here...

Your HTML structure can be found above :)

Answer 4

If you're looking to master the art of positioning elements on a webpage, I've got just the snippet for you. It's functional, but the real challenge lies in understanding the mathematical intricacies behind it. Pay attention to the details and unleash your creativity!

$( document ).ready(function() {
    $(document).scroll(function() {
      // Determining the position of the first slide for accurate movement tracking
      var rect = $(".first")[0].getBoundingClientRect();
      
      // Calculating the viewport height
      var screenHeight = $( window ).height();
      
      // Defining the offset for every .copy element to maintain consistent top alignment
      // Your task: Unravel the precise math required here
      $(".copy").offset({ top: screenHeight*1.5-rect.bottom});
    });
});

Your CSS goes here...

Your HTML structure can be found above :)

Create a type of parallax effect where the text block is fixed in place, similar to a background-attachment

Answer №1

Answer №2

Similar questions

Experiencing an "isTrusted" error while working with the GLTFLoader

Pass the value from JavaScript to PHP

Issue with event handling when using the `this` keyword in function

Unable to retrieve the data-id from the ajax response for extraction and transfer to the modal

Is there a way to identify which elements are currently within the visible viewport?

What is the method for executing a function enclosed within a variable?

Linking input to radio buttons in Vue.js

Can an object be transformed into a new object by destructuring in ES6?

Ways to dynamically alter the appearance of a conditionally displayed element in Svelte

My React project is not showing the text in the way that I had envisioned

Passing a variable from index.html to a script in Angular

The length of JSON data retrieved may vary between Internet Explorer and Firefox

The background hue does not cover the entire element

Steps to create an instance method that only accepts the name of another instance method

Slideshow with Jquery featuring image transitions from left to right and elegant fade-in effects

What are the steps for utilizing a map created by an exorcist?

What is the best way to make this row div vertically stretch to match the width of its container in Bootstrap 4?

Were you intending to import the file firebase/app/dist/index.cjs.js?

Seamless transition of text positioning and opacity as you scroll

populating a HTML image tag 'src' attribute with data extracted from API javascript code