JavaScript code to make titles slide in as the user scrolls

Question

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>

javascript html css for-loop foreach

Answer 1

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);

Answer 2

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);

JavaScript code to make titles slide in as the user scrolls

Answer №1

Similar questions

Stylish border radius for Bootstrap progress bars

Switching Column Content with jQuery on Mobile Devices

The subsequent block within the code is being initiated following the initial block in Node.js

Creating a child element to fully span the width of its parent using floating techniques

Identify the class within a child division and include the class in a separate division

Viewing a Google Charts graph upon the loading of a web page

What is the best way to use requests in python to enter text in a textarea, then scrape the html with bs4, all while the input remains hidden?

Propelling Information using the Chakra-UI Drawer Element

Guidelines on Transferring Variables to a JavascriptExecutor Script

What is the best way to eliminate a vertical line from the canvas in react-chartjs-2?

What is the best way to ensure that my header remains responsive across all devices and screen sizes?

Swap out the svg element with an icon alternative

Broaden the reach of the ajax .done function to encompass the surrounding function

InvalidAction: The function forEach cannot be applied to "res"

Changing Images with Jquery on Click Event

section element is not receiving styles from the specified class

The best way to close a swipeable drawer from a different class

Comparing Mongoose and MongoDB in Node.js: Weighing the Benefits of Each

Tips for achieving compatibility between systemjs module loading and .net mvc architecture

React component with element style declared in module.css file and conditional state