ads.js — Lightweight Ad Styling & Management Toolkit

A drop‑in, vanilla JS + CSS toolkit to style, display, and manage text and image ads on blogs and websites. No build tools required. Works with a single <script> tag.

Features

• Close/dismiss buttons for ad boxes
• Rotating ad slots (image or text)
• Lazy-load ads after 70% page scroll
• Simple CSS animations (fade/slide)
• Text link ad styles + click tracking hook
• Minimal, framework-free

Quick Start (No Build Tools)

1. Copy styles/ads.css and dist/ads.js into your project.
2. Include them in your page:

<link rel="stylesheet" href="/styles/ads.css" />
<script src="/dist/ads.js" defer></script>

3. Use the HTML patterns from examples/index.html.

HTML Snippets

Basic Ad Box

<div class="ad-box">
  <button class="ad-close" aria-label="Close ad">&times;</button>
  <img src="https://via.placeholder.com/728x90" alt="Ad banner">
  <div class="ad-title">Get 50% Off Hosting!</div>
  <div class="ad-text">Use code SOLOTRAVEL at checkout. Limited time.</div>
</div>

Rotating Ads

<div class="ad-rotate">
  <div class="ad-box" style="display:block;">
    <img src="https://via.placeholder.com/728x90?text=Ad+A" alt="Ad A">
    <div class="ad-title">Product A</div>
  </div>
  <div class="ad-box" style="display:none;">
    <img src="https://via.placeholder.com/728x90?text=Ad+B" alt="Ad B">
    <div class="ad-title">Product B</div>
  </div>
</div>

Lazy & Animated

<div class="ad-box lazy-ad slide-in-right" data-ad-id="promo-hosting-2025">
  <button class="ad-close" aria-label="Close ad">&times;</button>
  <img src="https://via.placeholder.com/728x90?text=Lazy+Ad" alt="Ad">
  <div class="ad-title">🚀 Speed Up Your Site</div>
  <div class="ad-text">Try blazing‑fast hosting built for bloggers.</div>
</div>

Text Link Ads

<a href="https://example.com" class="text-ad" target="_blank" rel="noopener sponsored">
  Need better hosting? Get 3 months free at BlogHoster! <span class="sponsored-label">Sponsored</span>
</a>

<p>
  I’ve been using
  <a href="https://example.com" class="text-inline-ad" target="_blank" rel="noopener sponsored">BlogHoster</a>
  and it’s been great.
</p>

Optional Config (via data attributes / JS)

• Set data-ad-id on .lazy-ad to prevent re-showing.
• Change rotation interval or lazy threshold by editing dist/ads.js (or use the ES modules in src/).

ES Modules (Optional)

If you prefer ES modules, load dist/ads.module.js:

<script type="module" src="/dist/ads.module.js"></script>

License

MIT — see LICENSE.