Is there a way to adjust the transparency of individual words in text as you scroll down a page, similar to the effect on https://joincly

Is there a way to achieve a text filling effect on page scroll similar to the one found here: . The specific section reads: "Deepen customer relationships. Own the brand experience. Add high margin revenue. Manage it all in one place. Get back your precious time."

I attempted it myself here: https://codepen.io/sejalshah/pen/rNrdPmm

$(window).scroll(function () {
  var scrolled_val = window.scrollY;
         
  console.log( 'scroll pos: '+ scrolled_val );
  progress();
});

function progress() {
  var animation_elements = $('.progress-text_word');
  const delay = 2000;
  
  $(".progress-text_word").css('opacity','0.4').each(function(i) {
   //$(this).delay(i*1500).fadeIn(1500);
   $(this).delay(i*200).queue(function (next) { 
   $(this).css('opacity', '1'); 
    next(); 
   });
   })
  $(this).off('scroll');
}
body{
  background: #000;
  color: #fff;
  overflow: auto;
}
.gradient-text {
  position: relative;
  width: 55vw;
  font-size: 40px;
  color: #f6f6f4;
  margin: auto;
  line-height: 1.5;
  padding: 20px;
  //color: transparent;
  background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(25%, transparent), color-stop(#F8A17B), color-stop(#FDE9E7), color-stop(75%, transparent), to(transparent));
   background: linear-gradient(transparent, transparent 25%, #F8A17B, #FDE9E7, transparent 75%, transparent);
    -webkit-background-clip: text;
    background-clip: text;
    background-size: 100% 500%;
    background-position: center 0;
  
}
 .progress-text_word {
  opacity: 0.4;
  transition: .6s opacity cubic-bezier(0.19,1,0.22,1);
} 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gradient-text progress-text_text">
  
  
<span class="progress-text_word" >Inside</span>
<span class="progress-text_word" >our</span>
<span class="progress-text_word" >homes</span>
<span class="progress-text_word" >live</span>
<span class="progress-text_word" >millions</span>
<span class="progress-text_word" >of</span>
<span class="progress-text_word" >invisible</span>
<span class="progress-text_word" >pollutants</span>
<span class="progress-text_word" >generated</span>
<span class="progress-text_word" >by</span>
<span class="progress-text_word" >everyday</span>
<span class="progress-text_word" >moments.</span>
  <span class="progress-text_word" >homes</span>
<span class="progress-text_word" >live</span>
<span class="progress-text_word" >millions</span>
<span class="progress-text_word" >of</span>
<span class="progress-text_word" >invisible</span>
<span class="progress-text_word" >pollutants</span>
<span class="progress-text_word" >generated</span>
<span class="progress-text_word" >by</span>
<span class="progress-text_word" >everyday</span>
<span class="progress-text_word" >moments.</span>
  <span class="progress-text_word" >homes</span>
<span class="progress-text_word" >live</span>
<span class="progress-text_word" >millions</span>
<span class="progress-text_word" >of</span>
<span class="progress-text_word" >invisible</span>
<span class="progress-text_word" >pollutants</span>
<span class="progress-text_word" >generated</span>
<span class="progress-text_word" >by</span>
<span class="progress-text_word" >everyday</span>
<span class="progress-text_word" >moments.</span>
  <span class="progress-text_word" >homes</span>
<span class="progress-text_word" >live</span>
<span class="progress-text_word" >millions</span>
<span class="progress-text_word" >of</span>
<span class="progress-text_word" >invisible</span>
<span class="progress-text_word" >pollutants</span>
<span class="progress-text_word" >generated</span>
<span class="progress-text_word" >by</span>
<span class="progress-text_word" >everyday</span>
<span class="progress-text_word" >moments.</span>
  <span class="progress-text_word" >homes</span>
<span class="progress-text_word" >live</span>
<span class="progress-text_word" >millions</span>
<span class="progress-text_word" >of</span>
<span class="progress-text_word" >invisible</span>
<span class="progress-text_word" >pollutants</span>
<span class="progress-text_word" >generated</span>
<span class="progress-text_word" >by</span>
<span class="progress-text_word" >everyday</span>
<span class="progress-text_word" >moments.</span>
  ...


</div>

Unfortunately, I'm unable to fill in the text sequentially as the user scrolls down. I suspect that there might be a JavaScript library or solution available to accomplish this. Can anyone provide assistance?

javascriptcssanimationscrollopacity

Answer №1

One effective way to monitor the visibility of text within the viewport is by utilizing the intersection observer. This method allows you to adjust the opacity based on whether the text is appearing or disappearing.

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

Using TypeScript, let's take a closer look at an example of Angular

I am trying to replicate the chips example found at this link (https://material.angularjs.org/latest/#/demo/material.components.chips) using TypeScript. I have just started learning TypeScript this week and I am having some difficulties translating this co ...

javascriptangularjstypescriptangular-material

Encountering Axios errors while executing API calls at a high frequency

Recently, I have been facing some challenges with making API calls from localhost using axios in a loop. While it works smoothly at times, most often I encounter errors like: cause: Error: connect ECONNREFUSED ::1:8000 at TCPConnectWrap.afterConnect ...

javascriptnode.jsexpressaxiosbackend

What is the best way to respond to a hashchange event within AngularJs?

I am new to AngularJs and I am trying to update the page on hashchange events. Currently, I have this code which I know is not the proper way to do it: <!DOCTYPE html> <html> <head> <style> #hashdrop { display:block; ...

javascriptangularjshashchange

Avoid using the JQuery IIFE outside of the document ready function as it is considered a

Hey there! I've been coming across a puzzling "pattern" lately that doesn't sit well with me. The code seems messy and lacks clear structure. I've included a sample of the code for context. Is declaring all those IIFEs outside the document ...

javascriptjquerydesign-patternsmodule

The debate between utilizing CDN or installing a library through NPM

My journey with NPM has just begun, and I am struggling to grasp how the files within node_modules get integrated into my index.html. Scenario 1: CDN Take jQuery, for instance. When using a CDN, it's as simple as adding the CDN link to a <script& ...

javascripthtmljquerynpm

Unable to display script in the sources tab on NW.js 16

After updating to the latest version of NW.js (nwjs-sdk-v0.16.1-linux-x64) and attempting to migrate my project over, I encountered a strange issue with debugging. The script I was working on, named "bunny.js", would show up under "Applications" but not in ...

javascriptdevtoolsnw.jsnwjs

Creating a script in JavaScript to execute a command or query after midnight

I have a query regarding MongoDB and JavaScript (Express.js). Here is the scenario: I am working on developing a backend service for movies and TV series. I have already set up basic routes and functions. One of my requirements is to select a movie from ...

javascriptmongodbexpress

Which tag is best to use for applying a CSS style to a section of text?

When it comes to styling text, I usually opt for one of the following methods: <span class="header">...</span> <div class="header">...</div> <p class="header">...</p> <label class="header">...</label> Howeve ...

htmlcss

The image will remain hidden until it is fully loaded and ready to be displayed

I am currently working on a script that involves displaying a loading icon until an image is fully loaded, at which point the loading icon should disappear and the image should be shown. Unfortunately, my current code is not working as intended. Here is a ...

javascriptjqueryhtmlcss

Design a dynamic table using JavaScript

After spending hours working on my first JavaScript code, following the instructions in my textbook, I still can't get the table to display on my webpage. The id="eventList" is already included in my HTML and I've shortened the arrays. Here' ...

javascriptcssecmascript-6html

What is the best way to retrieve information in an autosuggest textbox from a server or database?

I am looking for a way to modify my autosuggest textbox to fetch data from a server instead of a defined array. Can anyone provide guidance on how to achieve this? Here is the code snippet I am currently working with: HTML code- <!doctype html> &l ...

javascriptjqueryajaxjquery-uijquery-autocomplete

Facing Issues with User.update in Mongoose and MongoDB

I have been struggling to create a new collection and push it into a specific user's collections array. Despite researching various stackoverflow posts, I am unable to achieve this using either User.update() or User.findOneAndUpdate(). I can confirm t ...

javascriptmongodbexpressmongoosemongoose-schema

Error message 'require is not defined' can occur in Meteor.js when trying to incorporate an NPM package

I'm facing an issue while trying to utilize an npm package in Meteor.js (Release 0.6.6.3) by using Meteor.require. The error thrown states that require is not defined. What could be causing this and how can it be resolved? mrt add npm npm install git ...

javascriptnode.jsmeteornpmmeteorite

Guide on utilizing regular expressions to match CSS selectors

Attempting to determine if the head section in jQuery contains the font-weight:bold property within CSS. That particular property may exist in 4 different variations: font-weight:bold font-weight: bold font-weight :bold font-weight : bold Is there a way ...

cssregex

Exploring the Power of Angular Toastr Callback Functions

Hey there! I'm currently working with Angular Toastr to display messages on my screen. I have a setup where only two messages can be open at the same time - one for errors and another for warnings. These messages are persistent and require user intera ...

javascriptangularjstoastrangular-toastr

Issue with alignment of Bootstrap inline form field on top and bottom levels

I seem to be encountering an issue highlighted in the image below: My goal is to have the state dropdown perfectly aligned with the top and bottom edges of the other two controls. Here's the code snippet I've used to create this section of the i ...

jqueryhtmlcsstwitter-bootstrap

Issue with Google Cloud Task failing to forward body data to an HTTP Cloud Function

I have a Google Cloud task where I took most of the code from the Cloud Tasks documentation. You can find the documentation here: https://cloud.google.com/tasks/docs/creating-http-target-tasks The purpose of the cloud function is to receive dateTo and dat ...

javascriptnode.jsgoogle-cloud-platformgoogle-cloud-functionsgoogle-cloud-tasks

Creating a unique JavaScript script that gradually adjusts the background color using the setTimeout() function

Is there a way to create a function that continuously changes the background color every 15 seconds by picking colors from an array that starts over once all colors have been used, without having the function run just one time? $(document).ready(() => ...

javascriptjquerycss

In React, what is the correct term for "selection boxes" when choosing multiple items in Finder?

I'm in search of a React component that allows me to select multiple elements on the screen by clicking, holding, and forming a square around them. I've tried searching for terms like 'selection box' and 'React select elements,&apo ...

javascriptreactjsreact-nativeterminology

In Vuejs, all assignments are made by reference, even when using object spreading

If the HTML structure is: <div id="app"> <button @click="doEditing">Edit</button> <input v-if="editing" v-model="editing.profile.name" /> <span>{{ user.profile.name }}</span> </div> And Vuejs setup is: va ...

javascriptvue.jsvuejs2variable-assignment