MREC Rich Media HTML5 Example
Rich Media
View this Ad Tag in action
Analyse and preview this ad tag in the AdMeIn HTML5 Validator.
About This Ad Tag Example
This MREC rich media HTML5 ad example showcases interactive elements such as CSS animations. Designed to fit the 300x250 MREC dimensions, it provides an engaging experience while adhering to industry standards for rich media ads. At 11KB in size, it is optimized for quick loading and performance across various devices and browsers.
Key Features
CSS3 animations
User engagement features
Optimized for performance
Code Sample for this Rich Media 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;
display: flex;
justify-content: center;
min-height: 100vh;
margin: 0;
}
.ad-container {
position: relative;
width: 300px;
height: 250px;
background-color: #f59e0b;
padding: 10px;
border: 1px solid #e2e8f0;
box-sizing: border-box;
overflow: hidden;
font-family: 'Arial', sans-serif;
}
.ad-container {
cursor: pointer;
transition: all 0.3s ease;
}
.ad-container:hover {
transform: translateY(-4px); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
@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-image-1764224010609-0 {
position: absolute;
left: 99.5px;
top: 0px;
width: 200.5px;
height: 250px;
animation: zoomOut 300ms ease-out 0ms both, fadeOutAfter 1ms 3000ms forwards;
background-image: url('https://images.pexels.com/photos/2529147/pexels-photo-2529147.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.element-image-1764224010609-1 {
position: absolute;
left: 99.5px;
top: 0px;
width: 200px;
height: 250px;
animation: slideDown 100ms ease-out 3000ms both, fadeOutAfter 1ms 5000ms forwards;
background-image: url('https://images.pexels.com/photos/13600672/pexels-photo-13600672.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.element-image-1764224010609-2 {
position: absolute;
left: 99.5px;
top: 0px;
width: 200.5px;
height: 250px;
animation: slideRight 100ms ease-out 5000ms both;
background-image: url('https://images.pexels.com/photos/18155789/pexels-photo-18155789/free-photo-of-designer-sneakers-in-studio.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.element-shape-1764224010609-3 {
position: absolute;
left: 0px;
top: 0px;
width: 100px;
height: 250px;
animation: slideRight 300ms ease-out 0ms both;
background-color: #f59e0b;
}
.element-image-1764224010609-4 {
position: absolute;
left: 0px;
top: 0px;
width: 300px;
height: 250px;
animation: slideUp 100ms ease-out 5100ms both;
background-image: url('https://images.pexels.com/photos/18155789/pexels-photo-18155789/free-photo-of-designer-sneakers-in-studio.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.element-gradient-1764224010609-5 {
position: absolute;
left: 0px;
top: 0px;
width: 300px;
height: 250px;
animation: fadeIn 100ms ease-out 5000ms both;
background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
}
.element-shape-1764224010609-6 {
position: absolute;
left: 100px;
top: 0px;
width: 200px;
height: 250px;
animation: slideRight 100ms ease-out 5000ms both;
background-color: #f59e0b;
}
.element-shape-1764224010609-7 {
position: absolute;
left: 180px;
top: 105px;
width: 40px;
height: 40px;
animation: slideRight 100ms ease-out 5000ms both;
background-color: #ffffff;
border-radius: 50px;
}
.element-shape-1764224010609-8 {
position: absolute;
left: 180px;
top: 57px;
width: 40px;
height: 40px;
animation: slideRight 100ms ease-out 5100ms both;
background-color: #ffffff;
border-radius: 50px;
}
.element-text-1764224010609-9 {
position: absolute;
left: 10px;
top: 132px;
width: 85px;
height: 33px;
animation: slideLeft 100ms ease-out 500ms both, fadeOutAfter 1ms 3000ms forwards;
color: #1f2937;
font-size: 32px;
font-weight: bold;
font-style: normal;
line-height: 1.2;
display: flex;
align-items: center;
font-family: 'Arial', sans-serif;
text-align: left;
justify-content: flex-start;
}
.element-text-1764224010609-10 {
position: absolute;
left: 10px;
top: 169px;
width: 87px;
height: 30px;
animation: slideRight 100ms ease-out 600ms both, fadeOutAfter 1ms 3000ms forwards;
color: #1f2937;
font-size: 32px;
font-weight: bold;
font-style: normal;
line-height: 1.2;
display: flex;
align-items: center;
font-family: 'Arial', sans-serif;
text-align: left;
justify-content: flex-start;
}
.element-text-1764224010609-11 {
position: absolute;
left: 10px;
top: 203px;
width: 85px;
height: 30px;
animation: slideLeft 100ms ease-out 700ms both, fadeOutAfter 1ms 3000ms forwards;
color: #1f2937;
font-size: 32px;
font-weight: bold;
font-style: normal;
line-height: 1.2;
display: flex;
align-items: center;
font-family: 'Arial', sans-serif;
text-align: left;
justify-content: flex-start;
}
.element-text-1764224010609-12 {
position: absolute;
left: 10px;
top: 132px;
width: 85px;
height: 33px;
animation: slideLeft 100ms ease-out 3000ms both, fadeOutAfter 1ms 5000ms forwards;
color: #1f2937;
font-size: 32px;
font-weight: bold;
font-style: normal;
line-height: 1.2;
display: flex;
align-items: center;
font-family: 'Arial', sans-serif;
text-align: left;
justify-content: flex-start;
}
.element-text-1764224010609-13 {
position: absolute;
left: 10px;
top: 169px;
width: 87px;
height: 30px;
animation: slideRight 100ms ease-out 3100ms both, fadeOutAfter 1ms 5000ms forwards;
color: #1f2937;
font-size: 32px;
font-weight: bold;
font-style: normal;
line-height: 1.2;
display: flex;
align-items: center;
font-family: 'Arial', sans-serif;
text-align: left;
justify-content: flex-start;
}
.element-text-1764224010609-14 {
position: absolute;
left: 10px;
top: 203px;
width: 85px;
height: 30px;
animation: slideLeft 100ms ease-out 3200ms both, fadeOutAfter 1ms 5000ms forwards;
color: #1f2937;
font-size: 32px;
font-weight: bold;
font-style: normal;
line-height: 1.2;
display: flex;
align-items: center;
font-family: 'Arial', sans-serif;
text-align: left;
justify-content: flex-start;
}
.element-text-1764224010609-15 {
position: absolute;
left: 10px;
top: 132px;
width: 85px;
height: 33px;
animation: slideLeft 100ms ease-out 5000ms both;
color: #ffffff;
font-size: 32px;
font-weight: bold;
font-style: normal;
line-height: 1.2;
display: flex;
align-items: center;
font-family: 'Arial', sans-serif;
text-align: left;
justify-content: flex-start;
}
.element-text-1764224010609-16 {
position: absolute;
left: 10px;
top: 169px;
width: 87px;
height: 30px;
animation: slideRight 100ms ease-out 5100ms both;
color: #ffffff;
font-size: 32px;
font-weight: bold;
font-style: normal;
line-height: 1.2;
display: flex;
align-items: center;
font-family: 'Arial', sans-serif;
text-align: left;
justify-content: flex-start;
}
.element-text-1764224010609-17 {
position: absolute;
left: 10px;
top: 203px;
width: 85px;
height: 30px;
animation: slideLeft 100ms ease-out 5200ms both;
color: #ffffff;
font-size: 32px;
font-weight: bold;
font-style: normal;
line-height: 1.2;
display: flex;
align-items: center;
font-family: 'Arial', sans-serif;
text-align: left;
justify-content: flex-start;
}
.element-text-1764224010609-18 {
position: absolute;
left: 110px;
top: 213px;
width: 180px;
height: 27px;
animation: slideRight 200ms ease-out 5200ms both;
color: #ffffff;
font-size: 14px;
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;
}
</style>
</head>
<body>
<a href="javascript:void(0)" onclick="window.open(window.clickTag)">
<div class="ad-container">
<div class="element-image-1764224010609-0"></div>
<div class="element-image-1764224010609-1"></div>
<div class="element-image-1764224010609-2"></div>
<div class="element-shape-1764224010609-3"></div>
<div class="element-image-1764224010609-4"></div>
<div class="element-gradient-1764224010609-5"></div>
<div class="element-shape-1764224010609-6"></div>
<div class="element-shape-1764224010609-7"></div>
<div class="element-shape-1764224010609-8"></div>
<div class="element-text-1764224010609-9">Step</div>
<div class="element-text-1764224010609-10">Into</div>
<div class="element-text-1764224010609-11">Style</div>
<div class="element-text-1764224010609-12">Step</div>
<div class="element-text-1764224010609-13">Into</div>
<div class="element-text-1764224010609-14">Tomorrow</div>
<div class="element-text-1764224010609-15">Step</div>
<div class="element-text-1764224010609-16">Into</div>
<div class="element-text-1764224010609-17">You</div>
<div class="element-text-1764224010609-18">Shop the latest collection</div>
</div>
</a>
<script>
// Ad server replaces this value
var clickTag = "https://click.campaign.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>Above is the code implementation for this ad. You're free to copy and use this as needed.
Rich Media
View this Ad Tag in action
Analyse and preview this ad tag in the AdMeIn HTML5 Validator.
Technical Details
Dimensions300x250
File Size11KB
Duration15s
IAB CategoryRetailer
Tags
mrec
rich media
html5
css3
animation
What is Rich Media Ads
Rich Media ads are advanced, interactive ad formats that combine animations, video, audio, dynamic elements, and user engagement features. These creatives go beyond standard banners by allowing users to interact with the ad directly—expanding, swiping, playing video, or exploring product galleries. Rich Media formats deliver higher engagement and stronger brand impact compared to static ads, making them ideal for storytelling, product showcases, and interactive experiences across mobile and desktop.
Rich media advertising pushes the boundaries of user engagement through interactive elements, video content, and dynamic creative optimization. Our rich media examples include expandable banners, interactive overlays, gamified ad units, and VPAID implementations. Each sample demonstrates advanced techniques for creating memorable ad experiences that drive higher engagement rates.
Explore more Rich Media ad examples