JavaScript code to make titles slide in as the user scrolls

Looking for a better way to make all titles slide in upon scrolling instead of coding individually? Consider using a forEach loop! Here's how you can modify the code below:

function slideInLeft() {
  document.querySelectorAll('.subtitle-left').forEach(title => {
    var greenPosition = title.getBoundingClientRect().top;
    var screenPosition = window.innerHeight / 1.2;

    if (greenPosition < screenPosition) {
      title.classList.add('slide-in-left');
    }
  });
}

window.addEventListener('scroll', slideInLeft);
.green-box-left {
  display: block;
  position: relative;
  width: 20vw;
  height: 6vw;
  background: #daf4dc;
}

.subtitle-left {
  font-family: 'termina', sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 2.3vw;
  position: absolute;
  color: black;
  transition: 1s all;
  left: 28%;
  margin-top: 9%;
  transform: translateX(-139%);
}

.slide-in-left {
  transform: translateX(0%);
}
<div class="green-box-left">
  <h5 class="subtitle-left">HOMEPAGES</h5>
</div>

<br><br>

<div class="green-box-left">
  <h5 class="subtitle-left">HOMEPAGES 2</h5>
</div>

javascripthtmlcssfor-loopforeach

Answer №1

In order to capture all occurrences of the specified class, you will need to utilize querySelectorAll and make some adjustments to your existing code by incorporating a forEach loop, which you have already followed. You may want to consider implementing something along these lines:

function fadeInRight() {
    var blueBoxes = document.querySelectorAll('.subtitle-right');
    
    blueBoxes.forEach(function(box) {

        var bluePosition = box.getBoundingClientRect().top;
        var screenPosition = window.innerHeight / 1.2;

        if (bluePosition < screenPosition) {
            box.classList.add('fade-in-right');
        }
    });
}
window.addEventListener('scroll', fadeInRight);

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

What is the best way to find the index of the smallest value in an array using JavaScript?

I recently created this function that currently outputs -1. function sayHello() { let buildingLevelsArray = [11,10,10]; var smallestIndex = buildingLevelsArray.indexOf(Math.max(buildingLevelsArray)); console.log(smallestIndex); } sayHello() ...

javascriptarraysmin

Repairing div after upward scrolling and maintaining its fixation after refreshing the page

I have encountered two issues with this particular example: One problem is that the fixed_header_bottom should stay fixed beneath the fixed_header_top when scrolling up, causing the fixed_header_middle to gradually disappear as you scroll up, or vice v ...

javascriptjqueryhtmlcss

"Exploring the Dynamic Duo of AngularJS ngAnimate and animate.css

I've been working on getting my animation to function correctly with AngularJS and animate.css. In order to achieve this, I set up the SASS in the following way: .slide-animate { &.ng-enter, &.ng-leave{ } &.ng-enter { ...

javascriptcssangularjsanimation

Looking to duplicate a row of input fields while maintaining the same validation rules as the original row?

form <form action="assign_web_menu_action.php" method="post" name="form1" id="form1" > <table id='menuAssign'> <tbody> <tr class="clone_row"> <td> <input type="text" name="menuname[]" id="menuname1" ...

javascriptphpjquerytwitter-bootstrapplsql

Steps for organizing an array based on unique requirements

My goal is to retrieve an array that consists of the first and second objects based on the "point" property of each object I have a specific condition where if it is satisfied, the positions will be swapped. Default: ENGLISH[0] ENGLISH[1] MATH[0] MATH[1] ...

javascriptreactjsarraysobject

Tips for customizing the appearance of this div using Material UI's card/box components

Hey there! I am currently using a flexible div to house the h1 and arrow image (you can see it https://i.sstatic.net/OgVBp.png). I was wondering if there is a way to utilize a material UI component to give this "black box" a new look? Here is the jsx code ...

htmlcssreactjsmaterial-uijsx

Is there a way to resolve the issue of my localStorage getting overridden on page refresh?

I am currently working on a simple React app and encountering an issue with the localStorage. Whenever I refresh the page, the todo list stored in the localStorage disappears. How can I ensure that the todos remain visible even after a refresh? Any sugges ...

javascriptreactjsnext.js

What exactly does the context parameter represent in the createEmbeddedView() method in Angular?

I am curious about the role of the context parameter in the createEmbeddedView() method within Angular. The official Angular documentation does not provide clear information on this aspect. For instance, I came across a piece of code where the developer i ...

javascriptangulartypescript

Module or its corresponding type declarations not found in the specified location.ts(2307)

After creating my own npm package at https://www.npmjs.com/package/leon-theme?activeTab=code, I proceeded to set up a basic create-react-app project at https://github.com/leongaban/test-project. In the src/index.tsx file of my react app, I attempted to im ...

javascripttypescriptnpmnpm-package

Unable to find the desired match with Regex

I'm attempting to use a regex to replace content within brackets, but I'm encountering an unexpected result. This is the text I'm trying to target: Foo (bar) Below is the regex pattern I am using: /(?=\().*(?=\))/ My expectati ...

javascriptjqueryregexreplace

Utilize Javascript to acquire the redirected URL

Seeking assistance with making a GET call to an API endpoint that redirects me. I have enabled CORS to access the Location, but struggling to find a way through Ajax or Fetch to retrieve only the Redirect URL. Any help would be highly appreciated. ...

javascriptajaxget

Creating a color icon for StackExchange using HTML

I am currently working on building my personal website. I am looking to include a link to my Stack Exchange profile on my site using the Stack Exchange icon. However, the icons available in Font Awesome are grayscale and not colored like other icons such a ...

htmlcsscolorsiconsstackexchange

What is the reason behind the absence of the C++ syntax for a string loop in javascript?

UPDATE: At first, I believed that the following syntax was not functioning due to a mistake in my code and the fact that I have not encountered it being utilized in Javascript before. My primary concern lies in why this particular syntax is not more preval ...

javascriptc++

``How can I prevent browser popups/tooltips from appearing when a user exceeds the maximum value in a number

Is there a way to prevent the tooltip from appearing on the image when a user manually enters a quantity that exceeds the maximum allowed? The tooltip pops up when the form is submitted, and I need to find a way to turn it off. It seems like this tooltip ...

htmlreactjsmaterial-uireact-hook-form

Using jQuery to toggle visibility based on scroll position

Recently, I received a web template equipped with a jQuery library called sticky, which essentially makes the navigation "stick" to the top of the page as you scroll. Now, my goal is to integrate a logo into the navigation once it reaches its final positio ...

javascriptjqueryscrollshow-hide

The alert function is not being triggered upon receiving a JSON response

I am having trouble with an alert not firing a json response. The response appears in firebug, but after upgrading from php4.4.7 to php5.3.5, I encountered this error. It could be my mistake as well. Could someone please review my code and point out where ...

javascriptjqueryjson

An improved solution for avoiding repetitive typeof checks when accessing nested properties in the DOM

One common issue I encounter when working with nested DOM objects is the risk of undefined errors. To address this, I often use a conditional check like the one shown below: if("undefined" != typeof parent && "undefined" != typeof parent.main ...

javascriptdomundefined

Issue with v-model not connecting to app.js in Laravel and Vue.js framework

Snippet from app.js const app = new Vue({ el: '#app', router, data:{ banana:'' } }); Code found in master.blade.php <div class="wrapper" id="app"> <router-view></router-view> //using Vue ...

javascriptlaravelvue.js

I'm not sure why, but for some strange reason, Markdown images refuse to display when surrounded by

Recently, I've encountered a strange issue where my markdown image tag doesn't display the image when wrapped in a <div> or a <section>. Instead, it just outputs markdown code. Take a look at this screenshot for reference. <sectio ...

htmlmarkdownjekyll

Positioning child divs using CSS

I am trying to arrange the #inner2 and #inner3 divs to float next to each other while also adjusting to fit perfectly within the #outer div when the browser window size changes. Unfortunately, inner3 is not floating correctly as it should be and is overlap ...

cssposition