Feel a regular image is too general? Want to make your site looks more cool? Let’s try to add some animated GIF images on your site.
To insert animated GIF in the web page. We use the html <img> tag to achieve this. If you didn’t have an idea how to use the <img> tag, we have another tutorial to teach you how to add an image on your website. At here, we use the same method, but we will place the image URL to the animated GIF URL.
To insert the GIF on your HTML web page, just add this link of code in your body element.
<img src="https://media.giphy.com/media/JVGLHEuzbVviw/giphy.gif" alt="funny GIF" width="100%">At the code above, I set the width as 100% to fit my blog post width. By using the <img> tag to display the animated GIF on your HTML web page, the URL of the image should be correct.
It might look like this.
Looks fun right? These GIF image are originated from giphy.com. There are many some others funny GIF on giphy.com.
If you are a completely beginning of HTML, but want to test it out with this code. You can simply run the code on the top-right side of the code snippet. If you want to create your own, HTML page from scratch. Check out How To Create an HTML Page. The code might looks like this.
<!DOCTYPE html>
<html>
<head>
<title>Simple Animated GIF web page</title>
</head>
<body>
<h1>Funny Animated GIF</h1>
<img src="https://media.giphy.com/media/JVGLHEuzbVviw/giphy.gif" alt="funny GIF" width="100%">
</body>
</html>Make it More fun and Attractive
There are a few ways to make the GIF image more attractive:
- Add a Caption: You can add a caption to the GIF image to make it more interesting and engaging. For example, you can add a funny caption that relates to the image.
- Add a Border: Adding a border to the image can help it stand out and make it more visually appealing. You can experiment with different border styles and colors to find one that complements the GIF.
- Adjust the Size: Depending on where you plan to use the GIF, you may want to adjust its size to fit the space. A smaller size may work better for social media, while a larger size may be better for a website.
- Change the Background: You can experiment with different background colors or patterns to make the GIF image stand out. A contrasting background can help the image pop.
Here’s an example of how you can modify the code to make the GIF image more attractive:
<!DOCTYPE html>
<html>
<head>
<title>Simple Animated GIF web page</title>
<style>
/* add a border */
img {
border: 2px solid #333;
border-radius: 5px;
}
/* change the background */
body {
background-color: #f5f5f5;
}
/* add a caption */
wh2 {
text-align: center;
font-family: Arial, sans-serif;
font-size: 24px;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Funny Animated GIF</h1>
<img src="https://media.giphy.com/media/JVGLHEuzbVviw/giphy.gif" alt="funny GIF" width="100%">
<h2>When Your Monday Is a Prank...</h2>
</body>
</html>Add Animation To The GIF Image
In this example, I’ve added a CSS animation that slides the caption in from the left when the page loads.
I’ve also added a CSS animation to the GIF image that rotates it continuously in a clockwise direction. You can adjust the animation duration, timing function, and other properties to customize the effect. Let me know if you have any other questions!
<!DOCTYPE html>
<html>
<head>
<title>Animated GIF web page</title>
<style>
/* add a border */
.animated-img {
border: 2px solid #333;
border-radius: 5px;
/* add animation */
animation: rotate 4s linear infinite;
}
/* change the background */
body {
background-color: #f5f5f5;
}
/* add a caption */
.h2 {
text-align: center;
font-family: Arial, sans-serif;
font-size: 24px;
margin-top: 20px;
}
/* animate the caption */
@keyframes slide {
0% { transform: translateX(-100%); }
100% { transform: translateX(0); }
}
.h2 {
animation: slide 1s ease-in-out;
}
/* animation for the image */
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<h1>Funny Animated GIF</h1>
<img class="animated-img" src="https://media.giphy.com/media/JVGLHEuzbVviw/giphy.gif" alt="funny GIF" width="100%">
<h2 class="h2">When Your Monday Is a Prank...</h2>
</body>
</html>So, below is the output.
Funny Animated GIF