Ad Me In
Buy me a coffee

Advanced Animation HTML5 Half Page

Banner

Advanced Animation HTML5 Half Page

View this Ad Tag in action

Analyse and preview this ad tag in the AdMeIn HTML5 Validator.

Preview in HTML5 Validator

About This Ad Tag Example

This HTML5 half page ad example features complex CSS3 animations, including keyframe animations and transitions. It is designed to engage users with smooth visual effects while maintaining optimal performance across various devices and browsers.

Key Features

Advanced CSS3 animations
Optimized for performance
Cross-browser compatibility
Lightweight (< 10KB)

Code Sample for this Banner 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 - Half Page</title>
    <style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
}
.ad-container {
  position: relative;
  width: 300px;
  height: 600px;
  background-color: #1f2937;
  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-1764395922337-0 {
position: absolute;
left: 0px;
top: 0px;
width: 300px;
height: 600px;
animation: zoomOut 600ms ease-out 0ms both;
background-image: url('https://images.pexels.com/photos/1926769/pexels-photo-1926769.jpeg?auto=compress&cs=tinysrgb&w=600');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.element-gradient-1764395922337-1 {
position: absolute;
left: 0px;
top: 0px;
width: 300px;
height: 600px;
animation: fadeIn 400ms ease-out 0ms both;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
}
.element-shape-1764395922337-2 {
position: absolute;
left: 180px;
top: 50px;
width: 100px;
height: 100px;
animation: bounceIn 700ms ease-out 300ms both;
background-color: #ef4444;
border-radius: 50px;
}
.element-text-1764395922337-3 {
position: absolute;
left: 180px;
top: 65px;
width: 100px;
height: 25px;
animation: bounceIn 700ms ease-out 300ms 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;
}
.element-text-1764395922337-4 {
position: absolute;
left: 180px;
top: 88px;
width: 100px;
height: 40px;
animation: bounceIn 700ms ease-out 300ms both;
color: #ffffff;
font-size: 36px;
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-1764395922337-5 {
position: absolute;
left: 180px;
top: 123px;
width: 100px;
height: 20px;
animation: bounceIn 700ms ease-out 300ms 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;
}
.element-text-1764395922337-6 {
position: absolute;
left: 20px;
top: 260px;
width: 260px;
height: 80px;
animation: slideUp 600ms ease-out 600ms both;
color: #ffffff;
font-size: 38px;
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-1764395922337-7 {
position: absolute;
left: 30px;
top: 380px;
width: 240px;
height: 60px;
animation: fadeIn 600ms ease-out 900ms both;
color: #fbbf24;
font-size: 18px;
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-1764395922337-8 {
position: absolute;
left: 75px;
top: 500px;
width: 150px;
height: 55px;
background-color: #ef4444;
color: #ffffff;
font-size: 22px;
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: 28px;
}
.cta {
  opacity: 0;
  animation: fadeSlideUp 0.8s ease-out 1.2s forwards, pulse 2s ease-in-out 1.6s infinite;
}
@keyframes fadeSlideUp {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
</style>
  </head>
  <body>
    <a href="javascript:void(0)" onclick="window.open(window.clickTag)">
      <div class="ad-container">
        <div class="element-image-1764395922337-0"></div>
        <div class="element-gradient-1764395922337-1"></div>
        <div class="element-shape-1764395922337-2"></div>
        <div class="element-text-1764395922337-3">UP TO</div>
        <div class="element-text-1764395922337-4">40%</div>
        <div class="element-text-1764395922337-5">OFF</div>
        <div class="element-text-1764395922337-6">SUMMER CLEARANCE</div>
        <div class="element-text-1764395922337-7">Fresh styles for the new
          season. Limited time only.</div>
        <div class="element-button-1764395922337-8 cta">Shop Now</div>
      </div>
    </a>

    <script>
    // Ad server replaces this value
    var clickTag = "https://www.amazon.com.au/Pressure-Monitor-Waterproof-Pedometer-Calories/dp/B0DYCDSDJ9?ref_=pd_ci_mcx_mh_pe_rm_d1_cao_p_9_0&pd_rd_i=B0DYCRB8DG&pd_rd_w=Pm0BI&content-id=amzn1.sym.a3c64054-0e8e-467c-b78b-4ca6a8b9f966&pf_rd_p=a3c64054-0e8e-467c-b78b-4ca6a8b9f966&pf_rd_r=B4JQGM6P6QW9198V9AMK&pd_rd_wg=SMFeI&pd_rd_r=c0bc0e0c-214b-4540-8511-8fe0135aa4fc&th=1";
  </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>

Technical Details

Dimensions300x600
File Size7KB
Duration15s
IAB CategoryEntertainment

Tags

html5
css3
animation
interactive
banner
half-page

Related Examples

Advanced Animation HTML5 Banner

Advanced Animation HTML5 Banner

An HTML5 banner ad showcasing advanced CSS3 animations.

Basic HTML5 Half Page Fitness Ad

Basic HTML5 Half Page Fitness Ad

An HTML5 half page ad promoting a fitness product.

Basic HTML5 Animated MREC Ad Example

Basic HTML5 Animated MREC Ad Example

Basic HTML5 animated Medium Rectangle (MREC) ad example with CSS3 animations.