Guide for creating a scroll-triggered rotation animation using only JavaScript

Question

Guide for creating a scroll-triggered rotation animation using only JavaScript

Looking to achieve a cool scroll effect with an image that rotates on the X-axis by a specific degree, such as 70deg.

The goal is to have the image's rotateX value change to 0deg when it enters the viewport upon scrolling and revert back to 70deg when it exits the viewport.

Below is the code snippet for reference:

let a = 70
function test(){
let image = document.querySelector("img");
let imageTop = image.getBoundingClientRect().top;
  
let screenpos = window.innerHeight /2

   if(imageTop < screenpos){
    image.style.border = "5px solid green"
     
    image.style.transform = `rotateX(${a=a-2}deg)`
  }
}

window.addEventListener("scroll",function(){
   test()
})

body {
  background-color: #ccc;
  text-align: center;
  margin-top: 100px;
  font-family: sans-serif;
}
.bgcolor {
  background-color: black;
  color: rgba(255, 255, 255, 0.8);
}
div{
  perspective:800px;
  margin-top:400px;
  margin-bottom:200px;
}
div img {
  transform:rotateX(66deg);
  transition:.9s;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name=viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>Scroll Please</h1>
  <div><img src="https://cdn.pixabay.com/photo/2021/06/10/22/14/stork-6327150__340.jpg" alt="Bird Image"></div>
</body>
</html>

javascript html css

Answer 1

Answer №1

I've put together a concise example based on the Mozilla documentation for the Intersection Observer API.

If you want to delve deeper into what's happening, feel free to explore the linked documentation.

const image = document.querySelector("img");

// Setting up the Observer when the page loads
window.addEventListener("load", (event) => {
  createObserver();
}, false);

// Configuring the Observer
function createObserver() {
  let observer;

  let options = {
    root: null,
    rootMargin: "0px",
    threshold: buildThresholdList()
  };

  observer = new IntersectionObserver(handleIntersect, options);
  observer.observe(image);
}

// Generating an array with values ranging from 0.0 to 1.0
function buildThresholdList() {
  let thresholds = [];
  let numSteps = 1000;

  for (let i=1.0; i<=numSteps; i++) {
    let ratio = i/numSteps;
    thresholds.push(ratio);
  }

  thresholds.push(0);
  return thresholds;
}

// Handling the intersection of the observer
function handleIntersect(entries, observer) {
  entries.forEach((entry) => {
    // Only consider values between 0 and 0.5, ensuring that the image starts animating when half visible
    const maxxedIntersect = entry.intersectionRatio > 0.5 
        ? entry.intersectionRatio - 0.5 
        : 0;
    
    // Scaling the number (0.0 ... 0.5) between 0 and 70
    const scaled = scaleBetween(maxxedIntersect, 0, 70, 0, 0.5);
    
    // Determining the value for rotation
    // When the element is fully visible, the scaled value will be 70, so we subtract it from 70 to get 0 in this case
    const rotateValue = parseInt(70 - scaled);
    
    // Applying the styling
    image.style.transform = `rotateX(${rotateValue}deg)`
  });
}

// Function to scale numbers between min and max
// Reference: https://stackoverflow.com/a/31687097/9150652
function scaleBetween(unscaledNum, minAllowed, maxAllowed, min, max) {
  return (maxAllowed - minAllowed) * (unscaledNum - min) / (max - min) + minAllowed;
}

body {
  background-color: #ccc;
  text-align: center;
  margin-top: 100px;
  font-family: sans-serif;
}
.bgcolor {
  background-color: black;
  color: rgba(255, 255, 255, 0.8);
}
div > img{
  margin-top: 400px;
  margin-bottom: 600px;
  perspective: 800px;
  border: 5px solid green;
  transition: .1s;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <h1>Scroll Please</h1>
    <div>
      <img src="https://cdn.pixabay.com/photo/2021/06/10/22/14/stork-6327150__340.jpg" 
           alt="Bird Image">
    </div>
  </body>
</html>

Answer 2

I've put together a concise example based on the Mozilla documentation for the Intersection Observer API.

If you want to delve deeper into what's happening, feel free to explore the linked documentation.

const image = document.querySelector("img");

// Setting up the Observer when the page loads
window.addEventListener("load", (event) => {
  createObserver();
}, false);

// Configuring the Observer
function createObserver() {
  let observer;

  let options = {
    root: null,
    rootMargin: "0px",
    threshold: buildThresholdList()
  };

  observer = new IntersectionObserver(handleIntersect, options);
  observer.observe(image);
}

// Generating an array with values ranging from 0.0 to 1.0
function buildThresholdList() {
  let thresholds = [];
  let numSteps = 1000;

  for (let i=1.0; i<=numSteps; i++) {
    let ratio = i/numSteps;
    thresholds.push(ratio);
  }

  thresholds.push(0);
  return thresholds;
}

// Handling the intersection of the observer
function handleIntersect(entries, observer) {
  entries.forEach((entry) => {
    // Only consider values between 0 and 0.5, ensuring that the image starts animating when half visible
    const maxxedIntersect = entry.intersectionRatio > 0.5 
        ? entry.intersectionRatio - 0.5 
        : 0;
    
    // Scaling the number (0.0 ... 0.5) between 0 and 70
    const scaled = scaleBetween(maxxedIntersect, 0, 70, 0, 0.5);
    
    // Determining the value for rotation
    // When the element is fully visible, the scaled value will be 70, so we subtract it from 70 to get 0 in this case
    const rotateValue = parseInt(70 - scaled);
    
    // Applying the styling
    image.style.transform = `rotateX(${rotateValue}deg)`
  });
}

// Function to scale numbers between min and max
// Reference: https://stackoverflow.com/a/31687097/9150652
function scaleBetween(unscaledNum, minAllowed, maxAllowed, min, max) {
  return (maxAllowed - minAllowed) * (unscaledNum - min) / (max - min) + minAllowed;
}

body {
  background-color: #ccc;
  text-align: center;
  margin-top: 100px;
  font-family: sans-serif;
}
.bgcolor {
  background-color: black;
  color: rgba(255, 255, 255, 0.8);
}
div > img{
  margin-top: 400px;
  margin-bottom: 600px;
  perspective: 800px;
  border: 5px solid green;
  transition: .1s;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <h1>Scroll Please</h1>
    <div>
      <img src="https://cdn.pixabay.com/photo/2021/06/10/22/14/stork-6327150__340.jpg" 
           alt="Bird Image">
    </div>
  </body>
</html>

Guide for creating a scroll-triggered rotation animation using only JavaScript

Answer №1

Similar questions

Adding li elements dynamically, how can we now dynamically remove them using hyperlinks?

Transform black and white image to vibrant colors and add various hover effects

What is the best way to create a reusable component for a dialog box or modal window?

Pass an array from JavaScript to PHP

"NodeJS Express: The intricacies of managing overlapping routers

Top solution for maintaining smooth navigation across web pages

What could be causing render_template to fail when attempting to update the same parameters more than once?

How can React Native efficiently retrieve data from multiple APIs simultaneously?

Encountered a problem while trying to update a list item in Vue.js

Efficient initialization process in Vue.js components

Blue Jay Guarantees: Construct props object on the fly and execute simultaneously

In what way does ReactJS enable me to utilize constant functions before they are declared?

Explain how the 'next' function works within Express middleware and its role in directing the flow to a different function

Adjust the borderBottomColor of Material-UI TextField upon completion of input

I need help figuring out how to choose an option from a drop-down menu that has a dynamically changing id every

Tips for adjusting the animation position in Off-Canvas Menu Effects

Unable to close Bootstrap modal upon clicking "x" or "close" buttons

How to horizontally center a div with margin using CSS

Learn how to create a stunning effect by combining two half images and revealing a full image upon hover with a smooth animation

Find the position of the object in a list