Seamless transition of text positioning and opacity as you scroll

Question

Seamless transition of text positioning and opacity as you scroll

After exploring multiple techniques for changing opacity and position on scroll, I am still struggling to connect them effectively.

What I'm Looking For:

I have a container with 4 words in a row. Only one word should be visible at a time, transitioning as the user scrolls. The next word should appear from the right as the user scrolls down, and vice versa when scrolling up. I have created a visual representation of my goal:

Step 1:

As the user scrolls, text begins to appear from the right (as shown with 'text 1' and 'text 2'). This transition should apply to each word in the row.

https://i.sstatic.net/V22yU.jpg

Step 2:

Continuing to scroll will move 'text 2' into the position of 'text 1' while 'text 1' becomes less opaque.

https://i.sstatic.net/kwLXj.jpg

Subsequent Steps:

The final two images illustrate how 'text 1' eventually disappears with an opacity change to 0, leaving 'text 2' in its place.

https://i.sstatic.net/oVZPs.jpg https://i.sstatic.net/PDMHk.jpg

The example above details the effect on scroll down, but it should also work in reverse for scroll up. As the user scrolls past 'text 2', 'text 3' should appear, and so forth.

Regrettably, I cannot provide the code I've attempted as I am unsure where to begin tackling this task. One idea I had was to establish current and next sliders.

I hope the description alongside the images is clear enough, as I myself am uncertain if I fully grasp it.

javascript html css reactjs

Answer 1

Answer №1

Adjust the height of the <body> element to create a vertical scroll.

body {
  height: 9999px;
  background-color: #333;
}

Add a container for the words and use position: fixed to keep it on screen while scrolling.

body {
  height: 9999px;
  background-color: #333;
}

.words {
  position: fixed;
  width: 300px;
  height: 200px;
  background-color: white;
}

<div class="words">
</div>

Place the texts on top of each other inside the container.

body {
  height: 9999px;
  background-color: #333;
}

.words {
  position: fixed;
  width: 300px;
  height: 200px;
  background-color: white;
}

.word {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: red;
}

<div class="words">
  <div class="word">Foo</div>
  <div class="word">Bar</div>
  <div class="word">Baz</div>
</div>

Align all words except the first to the far right of the container. Use overflow: hidden to hide them from view.

body {
  height: 9999px;
  background-color: #333;
}

.words {
  position: fixed;
  width: 300px;
  height: 200px;
  background-color: white;
  overflow: hidden;
}

.word {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: red;
}

.word:nth-child(n + 2) {
  transform: translate(calc(170px - 50%), -50%);
}

<div class="words">
  <div class="word">Foo</div>
  <div class="word">Bar</div>
  <div class="word">Baz</div>
</div>

Implement JavaScript to update a CSS variable as we scroll.

const container = document.querySelector('.words');

window.addEventListener('scroll', () => {
  container.style.setProperty('--scroll', window.scrollY);
});

body {
  height: 9999px;
  background-color: #333;
}

.words {
  position: fixed;
  width: 300px;
  height: 200px;
  background-color: white;
  overflow: hidden;
}

.word {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: red;
}

.word:nth-child(n + 2) {
  transform: translate(calc(170px - 50%), -50%);
}

<div class="words">
  <div class="word">Foo</div>
  <div class="word">Bar</div>
  <div class="word">Baz</div>
</div>

Utilize the CSS variable to adjust properties like opacity and transform for the .word elements based on scrolling.

const container = document.querySelector('.words');

window.addEventListener('scroll', () => {
  container.style.setProperty('--scroll', window.scrollY);
});

body {
  height: 9999px;
  background-color: #333;
}

.words {
  position: fixed;
  width: 300px;
  height: 200px;
  background-color: white;
  overflow: hidden;
  --segment-length: 200;
}

.word {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: red;
  opacity: calc(((var(--opacity-point) * var(--segment-length)) - var(--scroll, 0)) / var(--segment-length));
}

.word:nth-child(n + 2) {
  transform: translate(calc(clamp(0%, 170px * ((var(--translate-point) * var(--segment-length)) - var(--scroll, 0)) / var(--segment-length), 170px) - 50%), -50%);
}

.word:nth-child(1) {
  --opacity-point: 1;
}

.word:nth-child(2) {
  --opacity-point: 2;
  --translate-point: 1;
}

.word:nth-child(3) {
  --opacity-point: 3;
  --translate-point: 2;
}

<div class="words">
  <div class="word">Foo</div>
  <div class="word">Bar</div>
  <div class="word">Baz</div>
</div>

This script transitions between words at every 200px scrolled, defined by --segment-length.

Answer 2

Adjust the height of the <body> element to create a vertical scroll.

body {
  height: 9999px;
  background-color: #333;
}

Add a container for the words and use position: fixed to keep it on screen while scrolling.

body {
  height: 9999px;
  background-color: #333;
}

.words {
  position: fixed;
  width: 300px;
  height: 200px;
  background-color: white;
}

<div class="words">
</div>

Place the texts on top of each other inside the container.

body {
  height: 9999px;
  background-color: #333;
}

.words {
  position: fixed;
  width: 300px;
  height: 200px;
  background-color: white;
}

.word {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: red;
}

<div class="words">
  <div class="word">Foo</div>
  <div class="word">Bar</div>
  <div class="word">Baz</div>
</div>

Align all words except the first to the far right of the container. Use overflow: hidden to hide them from view.

body {
  height: 9999px;
  background-color: #333;
}

.words {
  position: fixed;
  width: 300px;
  height: 200px;
  background-color: white;
  overflow: hidden;
}

.word {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: red;
}

.word:nth-child(n + 2) {
  transform: translate(calc(170px - 50%), -50%);
}

<div class="words">
  <div class="word">Foo</div>
  <div class="word">Bar</div>
  <div class="word">Baz</div>
</div>

Implement JavaScript to update a CSS variable as we scroll.

const container = document.querySelector('.words');

window.addEventListener('scroll', () => {
  container.style.setProperty('--scroll', window.scrollY);
});

body {
  height: 9999px;
  background-color: #333;
}

.words {
  position: fixed;
  width: 300px;
  height: 200px;
  background-color: white;
  overflow: hidden;
}

.word {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: red;
}

.word:nth-child(n + 2) {
  transform: translate(calc(170px - 50%), -50%);
}

<div class="words">
  <div class="word">Foo</div>
  <div class="word">Bar</div>
  <div class="word">Baz</div>
</div>

Utilize the CSS variable to adjust properties like opacity and transform for the .word elements based on scrolling.

const container = document.querySelector('.words');

window.addEventListener('scroll', () => {
  container.style.setProperty('--scroll', window.scrollY);
});

body {
  height: 9999px;
  background-color: #333;
}

.words {
  position: fixed;
  width: 300px;
  height: 200px;
  background-color: white;
  overflow: hidden;
  --segment-length: 200;
}

.word {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: red;
  opacity: calc(((var(--opacity-point) * var(--segment-length)) - var(--scroll, 0)) / var(--segment-length));
}

.word:nth-child(n + 2) {
  transform: translate(calc(clamp(0%, 170px * ((var(--translate-point) * var(--segment-length)) - var(--scroll, 0)) / var(--segment-length), 170px) - 50%), -50%);
}

.word:nth-child(1) {
  --opacity-point: 1;
}

.word:nth-child(2) {
  --opacity-point: 2;
  --translate-point: 1;
}

.word:nth-child(3) {
  --opacity-point: 3;
  --translate-point: 2;
}

<div class="words">
  <div class="word">Foo</div>
  <div class="word">Bar</div>
  <div class="word">Baz</div>
</div>

This script transitions between words at every 200px scrolled, defined by --segment-length.

Seamless transition of text positioning and opacity as you scroll

What I'm Looking For:

Answer №1

Similar questions

Alignment issue with Bootstrap dropdowns noticed after dynamically loading dropdown content in Blazor

Maximize the benefits of using React with Typescript by utilizing assignable type for RefObject

What could be causing my component to not refresh when used as a child?

Tips for adjusting a div to perfectly fit your screen height

Converting JavaScript CanvasRenderingContext2D states array into a serialized format

Exploring AngularJS and Node.js Express: routing and page reloading

Update the current Backend React framework capabilities with Server Side Rendering

Utilizing Binding Time in Angular for Enhanced Views

Difficulty Aligning Header Elements - Combining Navigation and Logo on the Same Line

Is there a way to trigger an Ajax function after individually selecting each checkbox in a list in MVC 4 using Razor syntax?

Issues with the functionality of the Customer ListItem on a Selectable List have been identified within the material-ui framework

I am unable to log the response, but I can view it in Postman and the network tab

Guide on utilizing the root feature in babel-plugin-module-resolver?

Exploring Angular JS: Understanding the Framework's Structure and FAQs

The positioning problem arising from using a Vuetify select dropdown within a datatable

Why is it that a JSX element can take a method with parentheses or without as its child?

Adjust the height of images to be consistent

Initiate a connection to the cloud management system

Position Font Awesome to the right of the text in the list

Unable to Add Dependency to Subclassed Object