Struggling with smoothly transitioning an image into view using CSS and JavaScript

Question

Struggling with smoothly transitioning an image into view using CSS and JavaScript

I'm currently experimenting with creating a cool effect on my website where an image fades in and moves up as the user scrolls it into view. I've included the code I have so far below, but unfortunately, I keep getting a 404 error when trying to run it. Any help would be greatly appreciated! I'm still new to JavaScript and have been working hard to understand this.

Check out my CSS:

.section3 {
        opacity: 0;
        transform: translateY(20vh);
        visibility: hidden;
        transition: opacity 0.6s ease-out, transform 1.2s ease-out;
        will-change: opacity, visibility;
    }
.fade {
        opacity: 1;
        transform: none;
        visibility: visible;
    }

Here is how the HTML and JS are structured:

<section id="section3" class="section3">
        <img style="width: 100%;" src="lovethyneighbor.jpg">
</section>

<script>
        var section3 = document.getElementById("section3");
        var location = section3.getBoundingClientRect();

        if (location.top >= 0) {
            document.getElementById("section3").classList.add("fade");
        } else {
            document.getElementById("section3").classList.add("section3");
        }
</script>

javascript html css getboundingclientrect

Answer 1

Answer №1

Let me introduce you to the Intersection Observer API! This handy tool is built into JavaScript and allows you to trigger an event or function when a specific element enters the viewport.

This API is a game-changer and I highly recommend using it over relying on getBoundingClientRect(). One of the main advantages is evident in the code snippet below:

if (location.top >= 0) {
     document.getElementById("section3").classList.add("fade");
} 
else {        
     document.getElementById("section3").classList.add("section3");
}

If you use Intersection Observer, your function will only run when needed, instead of being triggered by every mousewheel event, which can be inefficient and impact performance. With this API, your page is constantly monitored, and actions are only taken when elements come into view. Take a look at the annotated code below for further details.

Efficiency with Multiple Elements Requiring Different Animations

// Define the sections or containers
const sections = document.querySelectorAll("section.section");

// Set up options for the intersection function
const options = {
  root: null,
  threshold: 0.5, // Determine how much of the element should be visible before triggering the function (0 - 1)
  rootMargin: "0px 0px 0px 0px" // Default root margin value
};

// Initialize the observer - Allows multiple elements with varying animations to be tracked using forEach loop
let observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {

    // Identify the element to animate
    const block = entry.target.querySelector("img.fader");

    // Retrieve all elements that need animation within the same section
    const animationBlocks = entry.target.querySelectorAll("[data-animation]");

    // Trigger animations when the element is visible
    if (entry.isIntersecting) {
      // Loop through multiple animations for the same element
      animationBlocks.forEach((animation) => {
        animationClass = animation.dataset.animation;

        // Apply data-animation class to initiate the animation
        animation.classList.add(animationClass);
      });
    }
  });
}, options);

observer.observe(document.querySelector("section.section"));

// Start running the animations
document.addEventListener("DOMContentLoaded", function() {
  Array.from(sections).forEach(function(element) {
    observer.observe(element);
  });
});

body {
  height: 300vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: teal;
  gap: 400px;
}

/* Initial values */
[data-animation="fadeInUp"] {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
}

/* Activate animation when class is added */
.fadeInUp {
  animation-name: fadeInUp;
  animation-duration: 0.6s;
  animation-fill-mode: both;
}

/* Animation definition */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

<section id="section2" class="section section2">
  <img data-animation="fadeInUp" class="fader" style="width: 100%;" src="https://picsum.photos/200/300">
</section>

<section id="section3" class="section section3">
  <img data-animation="fadeInUp" class="fader" style="width: 100%;" src="https://picsum.photos/200/300">
</section>

Simplified Approach for Single Element and Single Animation

const sections = document.querySelectorAll("section.section");

const options = {
  root: null,
  threshold: 0.5
};

let observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {

    const block = entry.target.querySelector("img.fader");

    if (entry.isIntersecting) {
      block.classList.add('fadeInUp');
    }
  });
}, options);

observer.observe(document.querySelector("section.section"));

// Begin running the animations
document.addEventListener("DOMContentLoaded", function() {
  Array.from(sections).forEach(function(element) {
    observer.observe(element);
  });
});

body {
  height: 300vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: teal;
  gap: 400px;
}

img.fader {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
}

.fadeInUp {
  animation-name: fadeInUp;
  animation-duration: 0.6s;
  animation-fill-mode: both;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

<section id="section2" class="section section2">
  <img data-animation="fadeInUp" class="fader" style="width: 100%;" src="https://picsum.photos/200/300">
</section>

<section id="section3" class="section section3">
  <img class="fader" style="width: 100%;" src="https://picsum.photos/200/300">
</section>

Answer 2

Let me introduce you to the Intersection Observer API! This handy tool is built into JavaScript and allows you to trigger an event or function when a specific element enters the viewport.

This API is a game-changer and I highly recommend using it over relying on getBoundingClientRect(). One of the main advantages is evident in the code snippet below:

if (location.top >= 0) {
     document.getElementById("section3").classList.add("fade");
} 
else {        
     document.getElementById("section3").classList.add("section3");
}

If you use Intersection Observer, your function will only run when needed, instead of being triggered by every mousewheel event, which can be inefficient and impact performance. With this API, your page is constantly monitored, and actions are only taken when elements come into view. Take a look at the annotated code below for further details.

Efficiency with Multiple Elements Requiring Different Animations

// Define the sections or containers
const sections = document.querySelectorAll("section.section");

// Set up options for the intersection function
const options = {
  root: null,
  threshold: 0.5, // Determine how much of the element should be visible before triggering the function (0 - 1)
  rootMargin: "0px 0px 0px 0px" // Default root margin value
};

// Initialize the observer - Allows multiple elements with varying animations to be tracked using forEach loop
let observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {

    // Identify the element to animate
    const block = entry.target.querySelector("img.fader");

    // Retrieve all elements that need animation within the same section
    const animationBlocks = entry.target.querySelectorAll("[data-animation]");

    // Trigger animations when the element is visible
    if (entry.isIntersecting) {
      // Loop through multiple animations for the same element
      animationBlocks.forEach((animation) => {
        animationClass = animation.dataset.animation;

        // Apply data-animation class to initiate the animation
        animation.classList.add(animationClass);
      });
    }
  });
}, options);

observer.observe(document.querySelector("section.section"));

// Start running the animations
document.addEventListener("DOMContentLoaded", function() {
  Array.from(sections).forEach(function(element) {
    observer.observe(element);
  });
});

body {
  height: 300vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: teal;
  gap: 400px;
}

/* Initial values */
[data-animation="fadeInUp"] {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
}

/* Activate animation when class is added */
.fadeInUp {
  animation-name: fadeInUp;
  animation-duration: 0.6s;
  animation-fill-mode: both;
}

/* Animation definition */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

<section id="section2" class="section section2">
  <img data-animation="fadeInUp" class="fader" style="width: 100%;" src="https://picsum.photos/200/300">
</section>

<section id="section3" class="section section3">
  <img data-animation="fadeInUp" class="fader" style="width: 100%;" src="https://picsum.photos/200/300">
</section>

Simplified Approach for Single Element and Single Animation

const sections = document.querySelectorAll("section.section");

const options = {
  root: null,
  threshold: 0.5
};

let observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {

    const block = entry.target.querySelector("img.fader");

    if (entry.isIntersecting) {
      block.classList.add('fadeInUp');
    }
  });
}, options);

observer.observe(document.querySelector("section.section"));

// Begin running the animations
document.addEventListener("DOMContentLoaded", function() {
  Array.from(sections).forEach(function(element) {
    observer.observe(element);
  });
});

body {
  height: 300vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: teal;
  gap: 400px;
}

img.fader {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
}

.fadeInUp {
  animation-name: fadeInUp;
  animation-duration: 0.6s;
  animation-fill-mode: both;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

<section id="section2" class="section section2">
  <img data-animation="fadeInUp" class="fader" style="width: 100%;" src="https://picsum.photos/200/300">
</section>

<section id="section3" class="section section3">
  <img class="fader" style="width: 100%;" src="https://picsum.photos/200/300">
</section>

Struggling with smoothly transitioning an image into view using CSS and JavaScript

Answer №1

Efficiency with Multiple Elements Requiring Different Animations

Simplified Approach for Single Element and Single Animation

Similar questions

What is the best way to collect and store data from various sources in an HTML interface to a Google Spreadsheet?

Discovering elements with Selenium through XPATH or CSS Selector

Error: The property 'postID' can not be read because it is undefined

I tried utilizing the wrapper feature, but unfortunately, the modal did

deleting the current product information during an ajax request

An issue has been discovered with the Search function as JavaScript's Array.filter() and .map() methods are not functioning properly, resulting in

Using a jQuery UI accordion with a numbered list

Angular is having trouble with the toggle menu button in the Bootstrap template

Arrange the list by first names in the array using Ionic 3

The call stack limit has been exceeded due to the combination of Node, Express, Angular, and Angular-route

Creating a CSV file using an AJAX request in PHP

Struggling to log the values emitted from socket.io and express-nodejs

Python script using selenium webdriver to interact with an accordion container and expand its contents (round

`What purpose does the data-view attribute serve in Durandal JS?`

Guide to adding a file upload progress bar to your website

When you choose the File->Print option, the PDF contents are seamlessly printed within the document

The ID update functionality in Node.js is malfunctioning

Ways to distinguish jquery response apart from using $.post method?

Craft a unique parallax effect using Framer Motion's clipping feature

Removing an item from JSON data using Node.js and Express