Hat52

Creating a Smooth Image Transition Effect with HTML, CSS, and JavaScript

Creating a Smooth Image Transition Effect with HTML, CSS, and JavaScript

Hamza Ali's photo
Hamza Ali
·

4 min read

Table of contents

While mindlessly surfing the web I stumbled upon this. On this site, there is a cool image transition effect that made me eager to recreate it.

So without any further delay, I got my hands dirty with the code of this beautiful-looking image transition effect.

We will go through the recreation process step by step.

First of all, we need to create three files.

  • index.html (This will contain all of our HTML code)

  • index.css (This will contain all of our styles)

  • index.js (This will contain all of our JavaScript code)

After being done with setting up our structure for this project. let's set an HTML boiler that will import both index.css and index.js file

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Image transition effect</title>
        <link rel="stylesheet" href="style.css" />
        <script src="index.js" defer></script>
    </head>
    <body>
    </body>
</html>

Now let's add images to our project that we want to use for the transition. After adding the images the structure should look like this.

I will add four different images in this project and set them as background images to a separate div container with the class name set to curtain.

    <body>
        <div class="curtein"></div>
        <div class="curtein"></div>
        <div class="curtein"></div>
        <div class="curtein"></div>
    </body>

Notice we set the same class name for all the div containers. This is because we want to set the common styles for all of these containers.

That's it for the HTML code, Now let's move to our JavaScript file and write our logic for the transition effect.

Now in our index.js file, we will add this code and that is all the code that we need for this transition effect.

function delay() {
    return new Promise((resolve) => setTimeout(resolve, 3000));
}
async function transition() {
    let elements = document.getElementsByClassName('curtein');
    elements = Array.from(elements);
    for (let index = 0; index < elements.length; index++) {
        elements[index].classList.add(`visible${index}`);
        await delay();
    }
}
transition();

Explaination

  • Transtion function: This function contains all of our logic.
    let elements = document.getElementsByClassName('curtein');
    We are getting all the elements with the class name curtein and storing it in elements, as getElementsByClassName method returns a collection of elements with a specified class name(s).

  • Array.from(elements): The Array.from() static method creates a new, shallow-copied Array instance from an iterable or array-like object.

  • Now we will loop over all the elements that are fetched by getElementsByClassName and add a class visible to each element. For this purpose, we will use for..of loop because this loop waits for the promise to resolve before moving to the next iteration.

  • The first image will render without any delay that is why we set it to visible before calling the delay method.

  • delay(): All this method does is add a delay of 3000 milliseconds (3 seconds) between the execution of each iteration of the loop.

  • In the end, we are calling the transition function so that whenever this index.js is loaded the transition function is called immediately. For this purpose, we can also use IIFE(immediately invoked function expression).

Time To Add Some Style

.curtein {
    height: 0;
    width: 100%;
    transition: height 2s ease;
    position: absolute;
    bottom: 0;
    background-repeat: no-repeat;
    background-size: cover;
}
.visible0 {
    height: 100%;
    background-image: url('./1.jpg');
}
.visible1 {
    height: 100%;
    background-image: url('./2.jpg');
}
.visible2 {
    height: 100%;
    background-image: url('./3.jpg');
}
.visible3 {
    background-image: url('./1.jpg');
    height: 100%;
}

This is all the style that we need for this project.

  • curtein class contains all the common code

  • visible0... visible4 we are setting the background image for the div and its height to 100% so that it covers all the view port.

  • transition: We are applying the transition to the height property and the duration is set to 2 seconds which means that the height will take two seconds to fully take effect. This transition property will make our image slide from bottom to top.

Conclusion:

To summarize, this blog post demonstrated how to recreate a simple yet effective image transition effect using HTML, CSS, and JavaScript. This project is a great exercise for beginners to learn about front-end web development and animation effects.

HTML5CSSJavaScriptDesignUI