Basic HTML5 Animated MREC Ad Example
Banner
View this Ad Tag in action
Analyse and preview this ad tag in the AdMeIn HTML5 Validator.
About This Ad Tag Example
A bright modern HTML5 animated Medium Rectangle (MREC) ad example that utilizes CSS3 animations to capture the audience's attention. Advertising ticket sales for events and promotions. This ad is optimized for performance and cross-browser compatibility.
Key Features
Code Sample for this Banner Ad
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ad Creative - Medium Rectangle</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background-color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
.ad-container {
position: relative;
width: 300px;
height: 250px;
background-color: #ffffff;
border: 3px solid #fd5335;
box-sizing: border-box;
overflow: hidden;
font-family: 'Arial', sans-serif;
}
.ad-container {
cursor: pointer;
transition: all 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideLeft {
from { opacity: 0; transform: translateX(-30px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes slideRight {
from { opacity: 0; transform: translateX(30px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes slideDown {
from { opacity: 0; transform: translateY(-30px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes zoomIn {
from { opacity: 0; transform: scale(0.8); }
to { opacity: 1; transform: scale(1); }
}
@keyframes zoomOut {
from { opacity: 0; transform: scale(1.2); }
to { opacity: 1; transform: scale(1); }
}
@keyframes zoomInInfinite {
from { transform: scale(1); }
to { transform: scale(1.3); }
}
@keyframes bounceIn {
0% { opacity: 0; transform: scale(0.3); }
50% { transform: scale(1.05); }
70% { transform: scale(0.9); }
100% { opacity: 1; transform: scale(1); }
}
@keyframes rotateIn {
from { opacity: 0; transform: rotate(-180deg) scale(0.8); }
to { opacity: 1; transform: rotate(0deg) scale(1); }
}
@keyframes blurInLeft {
from { opacity: 0; filter: blur(8px); transform: translateX(-30px); }
to { opacity: 1; filter: blur(0); transform: translateX(0); }
}
@keyframes blurInRight {
from { opacity: 0; filter: blur(8px); transform: translateX(30px); }
to { opacity: 1; filter: blur(0); transform: translateX(0); }
}
@keyframes blurInUp {
from { opacity: 0; filter: blur(8px); transform: translateY(30px); }
to { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@keyframes blurInDown {
from { opacity: 0; filter: blur(8px); transform: translateY(-30px); }
to { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@keyframes fadeOutAfter {
to { opacity: 0; }
}
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes keyframeCTAButtonHover {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.element-shape-1764713315494 {
position: absolute;
left: 0px;
top: 0px;
width: 300px;
height: 250px;
background-color: #fd5335;
}
.element-image-1764707618861 {
position: absolute;
left: -60px;
top: 0px;
width: 240px;
height: 250px;
animation: blurInLeft 2600ms ease-out 0ms both;
background-image: url('https://images.pexels.com/photos/3721080/pexels-photo-3721080.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.element-shape-1764707645868 {
position: absolute;
left: 140px;
top: 0px;
width: 160px;
height: 250px;
background-color: #fd5335;
}
.element-text-1764706765013 {
position: absolute;
left: 146px;
top: 9px;
width: 148px;
height: 36px;
animation: slideDown 600ms ease-out 300ms both;
color: #ffffff;
font-size: 26px;
font-weight: bold;
font-style: normal;
line-height: 1.2;
display: flex;
align-items: center;
font-family: 'Arial', sans-serif;
text-align: center;
justify-content: center;
}
.element-text-1764706803505 {
position: absolute;
left: 155px;
top: 45px;
width: 130px;
height: 30px;
animation: slideUp 600ms ease-out 500ms both;
color: #ffffff;
font-size: 28px;
font-weight: normal;
font-style: normal;
line-height: 1.2;
display: flex;
align-items: center;
font-family: 'Arial', sans-serif;
text-align: center;
justify-content: center;
}
.element-text-1764706842500 {
position: absolute;
left: 155px;
top: 107px;
width: 130px;
height: 60px;
animation: blurInUp 600ms ease-out 900ms both;
color: #ffffff;
font-size: 16px;
font-weight: normal;
font-style: normal;
line-height: 1.2;
display: flex;
align-items: center;
font-family: 'Arial', sans-serif;
text-align: center;
justify-content: center;
}
.element-button-1764706868498 {
position: absolute;
left: 150.1875px;
top: 183px;
width: 139.625px;
height: 46px;
background-color: #ffffff;
color: #ff6569;
font-size: 16px;
font-weight: bold;
font-style: normal;
line-height: 1.2;
display: flex;
align-items: center;
font-family: 'Arial', sans-serif;
font-weight: bold;
justify-content: center;
cursor: pointer;
border: none;
text-decoration: none;
transition: opacity 200ms ease, transform 200ms ease-in-out, filter 300ms ease-in-out;
border-radius: 50px;
}
.element-button-1764706868498.hover-active:hover {
transform: scale(1.05);
}
.element-button-1764706868498.animate-in {
animation: blurInDown 600ms ease-out 1000ms both;
}
.element-text-1764712896388 {
position: absolute;
left: 155px;
top: 72px;
width: 130px;
height: 30px;
animation: slideUp 600ms ease-out 500ms both;
color: #ffffff;
font-size: 28px;
font-weight: normal;
font-style: normal;
line-height: 1.2;
display: flex;
align-items: center;
font-family: 'Arial', sans-serif;
text-align: center;
justify-content: center;
}
.cta {
animation: pulse 2s ease-in-out 0.6s infinite;
}
</style>
</head>
<body>
<a href="javascript:void(0)" onclick="window.open(window.clickTag)">
<div class="ad-container">
<div class="element-shape-1764713315494"></div>
<div class="element-image-1764707618861"></div>
<div class="element-shape-1764707645868"></div>
<div class="element-text-1764706765013">Montsalvat</div>
<div class="element-text-1764706803505">Historical</div>
<div class="element-text-1764706842500">Your summer family adventure!</div>
<div class="element-button-1764706868498 animate-in cta">BUY TICKETS</div>
<div class="element-text-1764712896388">Landmark</div>
</div>
</a>
<script>
// Ad server replaces this value
var clickTag = "https://example.com";
</script>
<script>
const allButtons = document.querySelectorAll("[class*='element-button-']");
allButtons.forEach(button => {
if (button.className.includes('animate-in')) {
button.addEventListener('animationend', () => {
button.classList.add('hover-active');
button.classList.remove('animate-in');
});
} else {
button.classList.add('hover-active');
}
});
</script>
</body>
</html>Banner
View this Ad Tag in action
Analyse and preview this ad tag in the AdMeIn HTML5 Validator.
Technical Details
Tags
What is Banner Ads
A banner ad is a digital display advertisement that appears within a webpage or mobile app, typically occupying a designated ad slot defined by the publisher. Banner ads are one of the most widely used formats in online advertising and are designed to visually capture attention, promote a product or message, and drive users to a landing page or conversion event. From a technical standpoint, banner ads can be delivered as static images (such as JPG or PNG), animated creatives (such as GIFs or MP4s), or more advanced HTML5 and Rich Media units that support interactivity, animations, expandable panels, dynamic content, and JavaScript-driven behaviors. Modern banner ads often rely on HTML5 to ensure compatibility across browsers, responsive layouts, and high-performance rendering on both desktop and mobile devices. Banner ads are typically served through an ad server or programmatic exchange, where they are selected and delivered based on targeting rules, auctions, or campaign settings. When loaded, the ad creative is rendered inside an iframe or container within the page, making calls to load assets, tracking pixels, and measurement scripts. Most banner ads follow standardized IAB display sizes, such as: leaderboard (728x90), medium rectangle (300x250), skyscraper (160x600), and mobile banner (320x50). Advertisers can leverage banner ads for a variety of campaign objectives, including brand awareness, direct response, retargeting, and lead generation. Effective banner ad design focuses on clear messaging, compelling visuals, strong calls to action, and optimized file sizes to ensure fast loading times and a positive user experience.
Our banner ad examples feature a variety of standard IAB sizes, including leaderboard, skyscraper, medium rectangle, and more. Each example includes clean HTML5 code with CSS animations and interactive elements to enhance user engagement. Learn how to create effective banner ads that perform well across different devices and screen sizes while adhering to industry best practices.
Explore more Banner ad examples