Ad Me In
Buy me a coffee

Advanced Animation HTML5 Banner

Banner

Advanced Animation HTML5 Banner

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 banner 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>Premium MREC - Luxury Watch</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;
}

.ad-container {
  position: relative;
  width: 300px;
  height: 250px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  overflow: hidden;
  cursor: pointer;
  border: 1px solid #e2e8f0;
}

.ad-container:hover {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

/* Animated background particles */
.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  animation: float 8s infinite;
}

.particle:nth-child(1) { left: 15%; top: 20%; animation-delay: 0s; }
.particle:nth-child(2) { left: 35%; top: 60%; animation-delay: 1s; }
.particle:nth-child(3) { left: 55%; top: 30%; animation-delay: 2s; }
.particle:nth-child(4) { left: 75%; top: 70%; animation-delay: 3s; }
.particle:nth-child(5) { left: 85%; top: 40%; animation-delay: 4s; }

@keyframes float {
  0%, 100% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-40px) translateX(20px); opacity: 0; }
}

/* Main content wrapper */
.content-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 2;
}

/* Logo */
.logo {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  color: #d4af37;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 2px;
  text-align: center;
  opacity: 0;
  animation: fadeSlideDown 0.8s ease-out 0.3s forwards;
}

.logo-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 2px solid #d4af37;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

/* Watch image container */
.watch-container {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  height: 140px;
  opacity: 0;
  animation: zoomInWatch 1s ease-out 0.8s forwards;
}

.watch-image {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.15) 0%, transparent 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 50%;
}

.watch-icon {
  font-size: 80px;
  filter: drop-shadow(0 6px 20px rgba(212, 175, 55, 0.5));
}

/* Text content */
.text-content {
  position: absolute;
  bottom: 70px;
  color: white;
  text-align: center;
  width: 90%;
}

.headline {
  font-size: 24px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 6px;
  opacity: 0;
  animation: fadeSlideUp 0.8s ease-out 1.5s forwards;
}

.subline {
  font-size: 11px;
  color: #d4af37;
  letter-spacing: 1.5px;
  opacity: 0;
  animation: fadeSlideUp 0.8s ease-out 1.8s forwards;
}

/* CTA Button */
.cta-button {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #d4af37 0%, #f4e5a1 100%);
  color: #1a1a2e;
  padding: 12px 40px;
  border-radius: 25px;
  font-size: 13px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: none;
  cursor: pointer;
  opacity: 0;
  animation: fadeSlideUp 0.8s ease-out 2.2s forwards, pulse 2s ease-in-out 3s infinite;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
  transition: all 0.3s ease;
  white-space: nowrap;
}

.cta-button:hover {
  transform: translateX(-50%) scale(1.05);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.5);
}

/* Shine effect */
.shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  animation: shine 3s ease-in-out 2.5s infinite;
}

@keyframes shine {
  0% { left: -100%; }
  100% { left: 200%; }
}

@keyframes fadeSlideDown {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes fadeSlideUp {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes zoomInWatch {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5) rotate(-180deg);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: translateX(-50%) scale(1);
  }
  50% {
    transform: translateX(-50%) scale(1.05);
  }
}
</style>
</head>
<body>
  <a href="javascript:void(0)" onclick="window.open(window.clickTag || 'https://example.com/luxury-watches', '_blank')">
    <div class="ad-container">
      <!-- Floating particles -->
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
      
      <!-- Shine effect -->
      <div class="shine"></div>
      
      <!-- Content -->
      <div class="content-wrapper">
        <div class="logo">
          <span class="logo-icon"></span>
          LUXE Watches
        </div>
        
        <div class="watch-container">
          <div class="watch-image">
            <span class="watch-icon">āŒš</span>
          </div>
        </div>
        
        <div class="text-content">
          <div class="headline">Timeless Elegance</div>
          <div class="subline">SWISS CRAFTSMANSHIP SINCE 1895</div>
        </div>
        
        <button class="cta-button">Explore Now</button>
      </div>
    </div>
  </a>
  
  <script>
    // Ad server replaces this value
    var clickTag = "https://example.com/luxury-watches";
    
    // Track impressions
    console.log('Ad loaded:', new Date().toISOString());
    
    // Optional: Track viewability
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          console.log('Ad visible');
        }
      });
    }, { threshold: 0.5 });
    
    observer.observe(document.querySelector('.ad-container'));
  </script>
</body>
</html>

Technical Details

Dimensions300x250
File Size7KB
Duration15s
IAB CategoryEntertainment

Tags

html5
css3
animation
interactive
banner

Related Examples

Advanced Animation HTML5 Half Page

Advanced Animation HTML5 Half Page

An HTML5 half page 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.