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

Is there a way to recognize each individual browser window that is presently open?

Tips for styling React Material-UI list items with fontAwesome icons and Tailwind.css

Generate an adjustable grid layout (with rows and columns) to display information retrieved from an API request

Eliminate Bootstrap's styling from HTML characters

Click on ng-click to sort through the blog entries

Exploring the capabilities of storing and retrieving nested objects within a React database

What steps should I take to delete a class from my calendar after it has reached the maximum capacity of 20

JavaScript can be used to extract a specific value from a SOAP response

Efficiently organizing reducers into separate files in ReactJS and merging them together

Verify if data is correct before refreshing user interface

What is the best way to add clickable links to 3D objects and meshes with ThREE?

Manipulate Images Efficiently with jQuery

Is there a way to modify the color of multiple disabled select fields in Internet Explorer?

Is there a way to create triangles on all four corners of an image using canvas in JavaScript?

Guide to presenting XML information from a web address using XSLT

Ways to transform a poster into a clickable link in an HTML video

Is there a way to navigate through div text within a stationary container?

Node.JS encountered an issue preventing the variable from being saved

Can a simultaneous read/write conflict occur in JavaScript while browsing?

What methods are available to change one JSON format into another?