Introduction:
Are you looking to add some interactivity and playfulness to your website? In this tutorial, we’ll guide you through the process of creating a captivating image gallery with exciting interactive effects using HTML, CSS, and JavaScript. This engaging project will not only enhance your web development skills but also provide a unique user experience on your website.
Things You Will Learn:
By the end of this tutorial, you will have gained a solid understanding of the following concepts:
- Selecting HTML elements with JavaScript using
document.querySelectorAll. - Dynamically creating and modifying DOM elements.
- Handling click events to create interactive effects.
- Utilizing CSS transitions to enhance user experience.
- Building an appealing gallery layout with smooth animations.
Video Tutorial:
Here is the video tutorial for this project. If you like the tutorial subscribe to my YouTube channel. I regularly post new projects based on HTML, CSS, and Javascript on my channel.
Project Folder Structure:
Before we start coding we take a look at the project folder structure. We start by creating a folder called – ”Stacked Photo Carousel”. Inside this folder, we have 3 files. These files are :
- index.html
- style.css
- script.js
- images
HTML:
We begin with the HTML code. Copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Stacked Photo Carousel</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="gallery-container">
<!-- Image containers where images will be added dynamically -->
<div class="image-container"></div>
<div class="image-container"></div>
<div class="image-container"></div>
<div class="image-container"></div>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
Next, we style our game using CSS. For this copy, the code provided to you below and paste it into your stylesheet.
body {
background-color: #e0f1fa;
}
.image-container {
width: 400px;
position: absolute;
top: 10em;
right: 10em;
}
.image {
border-radius: 2em;
width: 100%;
height: 100%;
border: 15px solid white;
cursor: pointer;
}
.image-container:first-child {
transform: rotate(23deg);
}
.image-container:nth-child(2) {
transform: rotate(328deg);
}
.image-container:nth-child(3) {
transform: rotate(169deg);
}
JS:
Finally, we add functionality using Javascript. For this once again copy the code below and paste it into your script file.
//Get all image container
let childElement = document.querySelectorAll(".image-container");
//Array of image URLs
let imageUrls = ["image-1.jpg", "image-2.jpg", "image-3.jpg", "image-4.jpg"];
//Initial z-index value
let zIndex = 1;
//Iterate through each image container
childElement.forEach((element, index) => {
//Create an image element
let img = document.createElement("img");
img.setAttribute("src", imageUrls[index]);
img.setAttribute("class", "image");
element.appendChild(img);
//Add a click event listener to each image container
element.addEventListener("click", () => {
zIndex++;
element.style.right = "50em";
element.style.zIndex = zIndex.toString();
element.style.transform = "rotate(0deg)";
//Apply transition to right property
element.style.transition = " right 0.3s ease";
//Remomve the class and reset properties after a delay
setTimeout(() => {
zIndex -= 3;
element.style.right = "";
element.style.zIndex = zIndex.toString();
element.style.transform = "";
//Set a transition for clearing the transition property
element.style.transition = "all 0.3s ease";
//Clear the transition property after a slight delay
setTimeout(() => {
element.style.transition = "";
}, 300);
}, 1000);
});
});
Conclusion:
Congratulations! You’ve successfully created an interactive image gallery with engaging effects using HTML, CSS, and JavaScript. This project is a great way to enhance your web development skills while adding a playful touch to your website.
Feel free to customize and expand on this project. You can add more images, experiment with different animations, or integrate them into your existing website. Interactive elements like this image gallery can significantly improve user engagement and make your site more memorable. Happy coding!
