Animate an image element to smoothly slide in from the left while simultaneously fading into view using Javascript

Question

Animate an image element to smoothly slide in from the left while simultaneously fading into view using Javascript

I'm looking to achieve a specific effect using pure JavaScript, HTML, and CSS without the need for jQuery or other libraries. I want an element to fade in and smoothly move to the center of the page from the left after a button click event.

My attempt so far is as follows:

if(selected_property[0] == 1 && selected_property[1] == 1) {
    var left = 0;
    setInterval(function(){
        left = left + 0.05;
        document.getElementById("property1_img").style.left = left + "vw";
        document.getElementById("property1_img").style.visibility = "visible";
    }, 1);
} else {
    
}

javascript html css

Answer 1

Answer №1

Forget about complicated animations - let CSS transitions do the work for you! It's much simpler than creating custom animation effects.

All you need to do is set up a JavaScript event handler for a click that updates the CSS .classList of the img element and utilizes CSS transitions for smooth animation.

let img = document.querySelector(".fadeMove");
document.querySelector("button").addEventListener("click", function(){
  img.classList.add("moved"); // Simply add the class to trigger opacity and position changes
});

/* Initial styling moves the element out of view to the left and makes it transparent */
.fadeMove {
  position:absolute;
  opacity:0;    /* fully transparent */
  left:-150px;  /* Off-screen to the left */
  
  /* 
     Specify that any numerical properties can transition smoothly over 2 seconds 
  */
  transition:all 2s;  
}

/* Additional style applied when button is clicked */
.fadeMove.moved {
  left:calc(50% - 75px); /* Centered on screen (for 150px wide image) */
  opacity:1;             /* fully opaque */
}

<img class="fadeMove" src="https://via.placeholder.com/150C/">
<button>Click</button>

Answer 2

Forget about complicated animations - let CSS transitions do the work for you! It's much simpler than creating custom animation effects.

All you need to do is set up a JavaScript event handler for a click that updates the CSS .classList of the img element and utilizes CSS transitions for smooth animation.

let img = document.querySelector(".fadeMove");
document.querySelector("button").addEventListener("click", function(){
  img.classList.add("moved"); // Simply add the class to trigger opacity and position changes
});

/* Initial styling moves the element out of view to the left and makes it transparent */
.fadeMove {
  position:absolute;
  opacity:0;    /* fully transparent */
  left:-150px;  /* Off-screen to the left */
  
  /* 
     Specify that any numerical properties can transition smoothly over 2 seconds 
  */
  transition:all 2s;  
}

/* Additional style applied when button is clicked */
.fadeMove.moved {
  left:calc(50% - 75px); /* Centered on screen (for 150px wide image) */
  opacity:1;             /* fully opaque */
}

<img class="fadeMove" src="https://via.placeholder.com/150C/">
<button>Click</button>

Animate an image element to smoothly slide in from the left while simultaneously fading into view using Javascript

Answer №1

Similar questions

Centering Slides Vertically in Slick Carousel with Bootstrap 4 Beta

Video playback disabled on hover in Chrome browser

Pictures are loading fine on a Chrome tab, but are showing a 403 error in the React code

The initial rendering of the NextJs 13 application is experiencing significant sluggishness when deployed on an EC2

Injecting dynamic content using JavaScript

Mysterious source utilizing leafletView for showcasing popups within the Angular Leaflet Directive

Leverage the power of Next.js Dynamic routing query object with an SWR fetch request

What is the best way to set a value for a specific column using JavaScript in a RadGrid?

Add a CSS and jQuery hover effect to display text over an image, requiring users to click twice on their mobile device

Choose all of the IDs from various sections using Jquery

Is it possible to incorporate shadows on a pie chart using recharts?

Adjust the brightness of a specified oklch color by 50% using CSS oklch(from ...) in combination with the calc() function

Tips on adjusting section height as window size changes?

What is the best way to incorporate six rows of paragraphs using bootstrap?

Challenges with conditional statements in JavaScript

Integrating a sleek Bootstrap 5 search bar drop-down functionality

Return a string to the client from an express post route

Angular's input event fails to trigger for dynamically generated fields when pasted into them

An unusual problem stemming from jQuery/AJAX arises when variables within a function fail to update while a click

When incorporating reduce into your code, remember to expect an undefined