Gradient scroll effect for dynamic backgrounds

I am currently working on a code where I want the background to scroll instead of the text.

This means that the text will stay fixed in its position while the background scrolls behind it on the page.

Any suggestions on how I can achieve this?

For an example, you can check out this CodePen:

body {
  margin: 0;
  background-color: #000;
}

.page {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.container {
  height: 100vh;
  width: 100%;
  overflow-y: scroll;
}

.content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 250vh;
  font-size: 96px;
  background: linear-gradient(
    #000 0%,
    #66458e 40%,
    #fff 50%,
    #66458e 75%,
    #000 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-attachment: fixed;
}

.text {
  text-align: center;
}
<div class="page">
  <div class="container">
    <div class="content">
      <h1 class="text">TEST</h1>
    </div>
  </div>
</div>

cssreactjsscrollfrontend

Answer №1

If you want to achieve this effect, you can create a background div with a linear gradient and then position the h1 element using fixed positioning to prevent it from scrolling.

Instead of using background-clip text, you can utilize mix-blend-mode: multiply along with white text to allow the background to show through the text. To further enhance the design, a box shadow is used to mask out any remaining background outside the h1 element. See the example code snippet below:

body {
  margin: 0;
  background-color: #000;
}

.content {
  height: 250vh;
  background: linear-gradient(
    #000 0%,
    #66458e 40%,
    #fff 50%,
    #66458e 75%,
    #000 100%
  );
}

.text {
  margin:0;
  position: fixed;
  font-size: 8rem;
  font-weight: bold;
  left:50%;
  top:50%;
  box-shadow: 0px 0px 0px 200vh black;
  color:white;
  background-color: black;
  mix-blend-mode: multiply;
  transform: translate(-50%, -50%);
}
<div class="content">
  <h1 class="text">TEST</h1>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Prevent scrolling on Bootstrap columns

My webpage is built with Bootstrap and I have a layout with 4 columns on the left and 6 on the right. I want to prevent the 4 columns on the left from scrolling. How can I achieve this? I am aware of the option to use class="affix" on the left column, b ...

htmlcsstwitter-bootstrap

Experiencing difficulties in deploying to Heroku due to a conflicting peer dependency with email-validator@2.0

Encountering production issues while deploying my app to Heroku. The following error log is displayed when attempting to push from the node git: Counting objects: 100% (194/194), done. Delta compression using up to 8 threads Compressing objects: 100% (185/ ...

node.jsreactjsgitnpmheroku

The content is failing to push the footer downwards on the webpage

My footer refuses to stay at the bottom of the content no matter what I've tried, from z-index to sticky footers. Check out this link for more information This is my CSS: #footer { position: absolute; clear: both; bottom:0; width:10 ...

htmlcsstwitter-bootstrap-3

How to align text to the right in the selection box list on Chrome for Android

My website includes an Arabic version. When viewing the site on mobile, the menu is displayed as a select box list. Due to the right-to-left (RTL) nature of Arabic text, I need the text within the select box to be aligned to the right. I attempted to add C ...

androidhtmlcssright-to-leftmobile-chrome

Unwanted transparency issue in MaterialUI (MUI) BottomNavigation

Greetings fellow hobby developer! I recently embarked on a project using create-react-app and incorporated MUI dependencies. One feature I added was a fixed BottomNavigation, which you can view in action here. Interestingly, in CodeSandbox, the BottomNavi ...

javascriptcssreactjsmaterial-uijsx

PHP tag iteration for unordered list segmentation

My current method of fetching data from MySQL is as shown below: $catmapper = new Application_Model_Mapper_BusinessCategoryMapper(); $result = $catmapper->getBusinessCategory(); To display the results, I use a for loop to iterate through and wrap each ...

phpjqueryhtmlcsshtml-lists

Animating an image inside a bordered div

I'm attempting to create an animated effect where an image moves randomly within the boundaries of a div container. While I've come across solutions for animating within borders, none have specifically addressed keeping the image inside the div. ...

javascriptjqueryhtmlcss

Disappear the loading icon once all children have finished rendering

I'm facing a minor issue with rendering in React and struggling to find a solution. Here's what's happening: My component acts as a wrapper for multiple entries, like this: class MyWrapper extends Component { renderItems() { return ( ...

javascriptreactjs

Dexie is alerting us to a problem with a call that occurs before initialization

When setting up my application, I encountered an error related to the Courses Entity Class being called before initialization in my Dexie Database. Despite checking my code, I couldn't find any issues and there was no documentation available for this ...

reactjstypescriptnext.jsdexie

Initiate a replicated create-react-app project directly from GitHub

After cloning a React application from GitHub to my local computer, I encountered an error while trying to run npm start: > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5725323634237a23222338176779667967">[email  ...

reactjsnpm

Eliminate the CSS styles that are applied by default to embedded YouTube videos

<div id="videos"> <div id="channel_div" style="display: block;"> <div style="color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans-serif; font-size: 12px; width: 555px;" class="firstVideo"> .. trimmed <table here> ...

jqueryhtmlcssyoutube

What is the best way to have the slide shift to the left solely after the initial click and prevent it from moving left on subsequent clicks?

Is there a way to prevent the slide area from scrolling left when the left button is clicked before it has been scrolled right first? Additionally, how can we lock the scroll after it reaches the last div? var $slider = $("#recent-container") $("#right ...

javascriptjqueryhtmlcssslide

Tips for integrating Material UI Drawer with Redux

I have been attempting to incorporate a Drawer feature that displays on the left side while utilizing Redux to maintain the state of the Drawer. Unfortunately, I seem to have made an error as my onClick events are not responsive. Here is the code: Reduce ...

javascriptreactjsreduxmaterial-ui

What is the best way to ensure jQuery loads before CSS code on a website

I am currently working on a blog project that allows visitors to customize the background color by simply clicking on one of five available buttons. $(function(){ //Checking if a color scheme has already been selected var chosenColor = ...

javascriptjqueryhtmlcss

Implementing a function to reduce the quantity after submitting a form in Node.js

Before allowing the user to fill out a form, I need to make sure they have enough funds in their wallet. The fee for filling out the form should not exceed the amount in the user's wallet. If the user has sufficient funds in their walle ...

node.jsreactjsmongodbexpressmongoose

Customize your AutoComplete with MUI styling

Upon taking over a project, I found myself working with material ui for the first time. Here is an excerpt from my code: <FormControl fullWidth> <InputLabel className={className} htmlFor={id} error={error} > ...

cssmaterial-uigoogle-apiautocomplete

What is the best way to display numerical data within an inline list format?

Here is a list I have: <ol> <li>Login</li> <li>Address</li> <li>Shipping</li> </ol> The numbers in the list display correctly as decimals. However, when I change the <li> tag to inline or ...

csshtml-lists

The combination of Firebase and Next.js does not store data in the real-time database

I'm facing a major issue with the Firebase Realtime Database as it is not saving data. For instance, const createUserProfile = (email,user,username) => { console.log(email); console.log(user) const db = getDatabase(); console.log(db ...

javascriptreactjsfirebasefirebase-realtime-databasenext.js

delete the initial background color assigned to the button

The "ADD TO CART" and "save design" buttons are currently displaying as shown in the image below. I would like to make the "SAVE DESIGN" button look similar to the "ADD TO CART" button, meaning I want to remove the background-color and dot symbol. Code ...

htmlcss

Creating a custom React hook that takes a state variable as a parameter

There's a react function component that assigns an array of ids based on a user event when a link is clicked (triggering a popup with selectable options and a callback returning the selected element's id upon closure). These ids are then passed t ...

reactjsreact-hooks