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

A stylish and versatile Bootstrap Modal is the perfect

What is the correct way to reset the styling of a web browser element, such as a <button>?

Tips on stopping slideToggle from opening and closing when clicked for the first time

JavaScript filename

How can I efficiently add multiple items to an array and store them in async storage using React Native?

Storing data with Laravel 5.3 using Storage::put and XMLHttpRequest

Changing the color of tabs using inline styles in material ui does not seem to work

It seems that JavaScript is unable to detect newly added elements following an AJAX request

Troubleshooting IE compatibility issues with jQuery .hide() method

Looking for a method to substitute "test" with a different value

Button placement that feels out of place

Can anyone provide guidance on locating the parent of a pseudo element with Selenium WebDriver?

Adjust the active carousel item to 0 within onsen-ui (displaying a list of carousel items in a sliding menu)

Showing the initials of a user at the top of an SVG using ReactJS

Guide on initiating document-wide events using Jasmine tests in Angular 2/4

The appearance of HTML in JSP and CSS output in a Spring application is different from the local environment

"The server responded with a 405 error message indicating that the requested method

Having trouble with Javascript not detecting when it's empty?

Combining data from multiple API calls in a for loop with AngularJS

The alert message fails to appear during an Ajax request