HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!

300x250

5.3 KB

Share this result

Previews are deleted daily. Get a permanent share link sent to your inbox:

Script

Open in browser

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 Ad Banner</title>
    <style>
        body,
        html {
            margin: 0;
            padding: 0;
            width: 300px;
            /* Adjust as per your ad size */
            height: 250px;
            /* Adjust as per your ad size */
            overflow: hidden;
        }


        .banner {
            width: 100%;
            height: 100%;
            position: relative;
            background-color: #0099cc;
            /* Background color */
            color: #ffffff;
            /* Text color */
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            font-family: Arial, sans-serif;
        }

        .banner a {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 2;
            background-color: rgba(0, 0, 0, 0);
            /* Invisible color */
            display: block;
            text-decoration: none;
        }

        .content {
            z-index: 1;
        }

        @keyframes panInFromLeft {
            from {
                opacity: 0;
                transform: translateX(-100%);
            }

            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes panInFromTop {
            from {
                opacity: 0;
                transform: translateY(-100%);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes panInFromRight {
            from {
                opacity: 0;
                transform: translateX(100%);
            }

            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes panInFromBottom {
            from {
                opacity: 0;
                transform: translateY(100%);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }


        /* Wrapper to hide overflow */
        .letter-wrapper {
            display: inline-block;
            overflow: hidden;
            /* Adjust based on actual font size and letter spacing */
            height: 1.2em;
            /* Adjust based on actual font size */
        }


        .letter {
            display: inline-block;
            opacity: 0;
            /* Start fully transparent */
            /* Ensure letters are positioned back in their original place after animation */
            transform: translateX(0) translateY(0);
        }

        .animate-heading {
            font-size: 1.8rem;
            letter-spacing: 0.2rem;
        }
    </style>
</head>

<body>
    <div class="banner">
        <a href="http://www.yourlink.com" target="_blank" rel="noopener noreferrer"></a>
        <div class="content">
            <div class="animate-heading" id="animatedWord">
            </div>
            <p>Some description or call to action.</p>
        </div>
    </div>
</body>


<script>
    document.addEventListener('DOMContentLoaded', () => {
        const word = 'Animate';
        let directions = ['panInFromLeft', 'panInFromTop', 'panInFromRight', 'panInFromBottom'];
        let currentAnimation = 0;

        const container = document.getElementById('animatedWord');
        container.innerHTML = [...word].map(letter => `<span class="letter-wrapper"><span class="letter">${letter}</span></span>`).join('');

        const animateLetters = () => {
            document.querySelectorAll('#animatedWord .letter').forEach((span, index) => {
                // Calculate delay based on letter index
                let delay = index * 100;

                // Remove any existing animation to re-trigger it
                span.style.animation = 'none';

                // Force reflow to reset animation
                void span.offsetWidth;

                // Apply new animation with delay
                let direction = directions[(currentAnimation + index) % directions.length];
                span.style.animation = `${direction} 1s ${delay}ms forwards`;
            });

            // Schedule next animation cycle
            currentAnimation++;
            setTimeout(animateLetters, word.length * 100 + 3000); // Adjust timing as needed
        };

        animateLetters();
    });
</script>

</html>

Landing Page

Open in browser

URL

http://www.yourlink.com/

Query Parameters

None

Network Timeline

Performance Summary

Requests

Domains

2KB

Transfer Size

5KB

Content Size

197.0ms

Dom Content Loaded

212.0ms

First Paint

244.0ms

Load Time

Domain Breakdown

Transfer Size (bytes)

Content Size (bytes)

Header Size (bytes)

Requests

Timings (ms)

Total Time

Content Breakdown

Transfer Size (bytes)

Content Size (bytes)

Header Size (bytes)

Requests