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
Below is the code implementation for this ad. You're free to copy and use this as needed.
<!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>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
