HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
35x35
693 Bytes
Share this result

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

Open in browser
<!DOCTYPE html>
<html lang="cs">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <meta name="ad.size" content="width=300,height=250">
    <title>McD_NicePrice_OSF_digi_0326</title>

    <link rel="stylesheet" href="speede.bold.css">

    <!-- mraid desktop-->
    <script>
        document.write('<script src="'+ (window.API_URL || 'https://s1.adform.net/banners/scripts/rmb/Adform.DHTML.js?bv='+ Math.random()) +'"><\/script>');
    </script>

<style>   


/* image zoom in */ 

    @-webkit-keyframes imageZoomIn {
      from {opacity: 1;
        -webkit-transform: scale(0.367) translate(0%,0%);}

      80% {opacity: 1;}

      100% {opacity: 0;
        -webkit-transform: scale(1) translate(0%,-8%);}
}

    @keyframes imageZoomIn {
      from {opacity: 1; transform: scale(0.367) translate(0%,0%);}

      80% {opacity: 1;}

      100% {opacity: 0; transform: scale(1) translate(0%,-8%);}
}

/* END image zoom in */

/* clasic animation */
    
    @-webkit-keyframes fadeIn {
        0% {opacity: 0;}
        100% {opacity: 1;}
    }
    
    @keyframes fadeIn {
        0% {opacity: 0;}
        100% {opacity: 1;}
    }

    @-webkit-keyframes fadeOut {
      0% {opacity: 1;}
        100% {opacity: 0;}
    }
    
    @keyframes fadeOut {
      0% {opacity: 1;}
        100% {opacity: 0;}
    }

    /* product animation */

    @-webkit-keyframes driveInLeft {
    0% {-webkit-transform: translate(-100%,0%); opacity: 0;}
    100% {-webkit-transform: translate(0%,0%); opacity: 1;}
    }
    @keyframes driveInLeft {
        0% {transform: translate(-100%,0%); opacity: 0;}
        100% {transform: translate(0%,0%); opacity: 1;}
    }

    @-webkit-keyframes driveOutLeft {
    0% {-webkit-transform: translate(0%,0%); opacity: 1;}
    100% {-webkit-transform: translate(100%,0%); opacity: 0;}
    }
    @keyframes driveOutLeft {
        0% {transform: translate(0%,0%); opacity: 1;}
        100% {transform: translate(100%,0%); opacity: 0;}
    }

     @-webkit-keyframes driveInRight {
    0% {-webkit-transform: scale(1,1) translate(100%,0%); opacity: 0;}
    100% {-webkit-transform: scale(1,1) translate(0%,0%); opacity: 1;}
    }
    @keyframes driveInRight {
        0% {transform: scale(1,1) translate(100%,0%); opacity: 0;}
        100% {transform:  scale(1,1) translate(0%,0%); opacity: 1;}
    }

    @-webkit-keyframes driveOutRight {
    0% {-webkit-transform: scale(1,1) translate(0%,0%); opacity: 1;}
    100% {-webkit-transform: scale(1,1) translate(-100%,0%); opacity: 0;}
    }
    @keyframes driveOutRight {
        0% {transform: scale(1,1) translate(0%,0%); opacity: 1;}
        100% {transform:  scale(1,1) translate(-100%,0%); opacity: 0;}
    }

    @-webkit-keyframes driveInTop {
    0% {-webkit-transform: scale(1,1) translate(0%,-100%); opacity: 0;}
    100% {-webkit-transform: scale(1,1) translate(0%,0%); opacity: 1;}
    }
    @keyframes driveInTop {
        0% {transform: scale(1,1) translate(0%,-100%); opacity: 0;}
        100% {transform:  scale(1,1) translate(0%,0%); opacity: 1;}
    }

    @-webkit-keyframes driveOutTop {
    0% {-webkit-transform: scale(1,1) translate(0%,0%); opacity: 1;}
    100% {-webkit-transform: scale(1,1) translate(0%,-100%); opacity: 0;}
    }
    @keyframes driveOutTop {
        0% {transform: scale(1,1) translate(0%,0%); opacity: 1;}
        100% {transform:  scale(1,1) translate(0%,-100%); opacity: 0;}
    }

    @-webkit-keyframes driveInDown {
    0% {-webkit-transform: scale(1,1) translate(0%,100%); opacity: 0;}
    100% {-webkit-transform: scale(1,1) translate(0%,0%); opacity: 1;}
    }
    @keyframes driveInDown {
        0% {transform: scale(1,1) translate(0%,100%); opacity: 0;}
        100% {transform:  scale(1,1) translate(0%,0%); opacity: 1;}
    }

    @-webkit-keyframes driveOutDown {
    0% {-webkit-transform: scale(1,1) translate(0%,0%); opacity: 1;}
    100% {-webkit-transform: scale(1,1) translate(0%,100%); opacity: 0;}
    }
    @keyframes driveOutDown {
        0% {transform: scale(1,1) translate(0%,0%); opacity: 1;}
        100% {transform:  scale(1,1) translate(0%,100%); opacity: 0;}
    }
    /* END product animation */
    
    /* plus animation */
    
   @-webkit-keyframes driveInLeftPlus {
    0% {-webkit-transform: translate(-500%,0%) rotate(0deg) ; opacity: 0;}
    100% {-webkit-transform: translate(0%,0%) rotate(360deg) ; opacity: 1;}
    }
    @keyframes driveInLeftPlus {
        0% {transform: translate(-500%,0%) rotate(0deg) ; opacity: 0;}
        100% {transform: translate(0%,0%) rotate(360deg) ; opacity: 1;}
    }

    @-webkit-keyframes driveOutLeftPlus {
    0% {-webkit-transform: translate(0%,0%) rotate(360deg) ; opacity: 1;}
    100% {-webkit-transform: translate(-500%,0%) rotate(0deg) ; opacity: 0;}
    }
    @keyframes driveOutLeftPlus {
        0% {transform: translate(0%,0%) rotate(360deg) ; opacity: 1;}
        100% {transform: translate(-500%,0%) rotate(0deg) ; opacity: 0;}
    }

    @-webkit-keyframes driveInLeftPlus1 {
    0% {-webkit-transform: translate(0%,-500%) rotate(0deg) ; opacity: 0;}
    100% {-webkit-transform: translate(0%,0%) rotate(360deg) ; opacity: 1;}
    }
    @keyframes driveInLeftPlus1 {
        0% {transform: translate(0%,-500%) rotate(0deg) ; opacity: 0;}
        100% {transform: translate(0%,0%) rotate(360deg) ; opacity: 1;}
    }

    @-webkit-keyframes driveOutLeftPlus1 {
    0% {-webkit-transform: translate(0%,0%) rotate(360deg) ; opacity: 1;}
    100% {-webkit-transform: translate(0%,500%) rotate(0deg) ; opacity: 0;}
    }
    @keyframes driveOutLeftPlus1 {
        0% {transform: translate(0%,0%) rotate(360deg) ; opacity: 1;}
        100% {transform: translate(0%,500%) rotate(0deg) ; opacity: 0;}
    }

    
    @-webkit-keyframes driveInLeftPlus2 {
    0% {-webkit-transform: translate(0%,500%) rotate(0deg) ; opacity: 0;}
    100% {-webkit-transform: translate(0%,0%) rotate(360deg) ; opacity: 1;}
    }
    @keyframes driveInLeftPlus2 {
        0% {transform: translate(0%,500%) rotate(0deg) ; opacity: 0;}
        100% {transform: translate(0%,0%) rotate(360deg) ; opacity: 1;}
    }

    @-webkit-keyframes driveOutLeftPlus2 {
    0% {-webkit-transform: translate(0%,0%) rotate(360deg) ; opacity: 1;}
    100% {-webkit-transform: translate(0%,-500%) rotate(0deg) ; opacity: 0;}
    }
    @keyframes driveOutLeftPlus2 {
        0% {transform: translate(0%,0%) rotate(360deg) ; opacity: 1;}
        100% {transform: translate(0%,-500%) rotate(0deg) ; opacity: 0;}
    }

       @-webkit-keyframes driveInRightPlus {
    0% {-webkit-transform: translate(500%,0%) rotate(0deg) ; opacity: 0;}
    100% {-webkit-transform: translate(0%,0%) rotate(-360deg) ; opacity: 1;}
    }
    @keyframes driveInRightPlus {
        0% {transform: translate(500%,0%) rotate(0deg) ; opacity: 0;}
        100% {transform: translate(0%,0%) rotate(-360deg) ; opacity: 1;}
    }

    @-webkit-keyframes driveOutRightPlus {
    0% {-webkit-transform: translate(0%,0%) rotate(-360deg) ; opacity: 1;}
    100% {-webkit-transform: translate(500%,0%) rotate(0deg) ; opacity: 0;}
    }
    @keyframes driveOutRightPlus {
        0% {transform: translate(0%,0%) rotate(-360deg) ; opacity: 1;}
        100% {transform: translate(500%,0%) rotate(0deg) ; opacity: 0;}
    }

    /* END plus animation */
    
        
    @-webkit-keyframes pulse {
      0% {-webkit-transform: scale(1); opacity: 1;}
      20% {-webkit-transform: scale(1.05); opacity: 1;}
      30% {-webkit-transform: scale(1.05); opacity: 1;}
      50% {-webkit-transform: scale(1); opacity: 1;}
      70% {-webkit-transform: scale(1.05); opacity: 1;}
      80% {-webkit-transform: scale(1.05); opacity: 1;}
      100% {-webkit-transform: scale(1); opacity: 1;}
    }
    
    @keyframes pulse {
      0% {transform: scale(1,1); opacity: 1;}
      20% {transform: scale(1.05); opacity: 1;}
      30% {transform: scale(1.05); opacity: 1;}
      50% {transform: scale(1); opacity: 1;}
      70% {transform: scale(1.05); opacity: 1;}
      80% {transform: scale(1.05); opacity: 1;}
      100% {transform: scale(1); opacity: 1;}
    }

    @-webkit-keyframes pulse1 {
      0% {-webkit-transform: scale(1); opacity: 1;}
      50% {-webkit-transform: scale(1.5); opacity: 1;}
      100% {-webkit-transform: scale(1); opacity: 1;}
    }
    
    @keyframes pulse1 {
      0% {transform: scale(1,1); opacity: 1;}
      50% {transform: scale(1.5); opacity: 1;}
      100% {transform: scale(1); opacity: 1;}
    }

    @-webkit-keyframes pulseIcon {
      0% {-webkit-transform: scale(1) rotate(-12.3deg); opacity: 1;}
      50% {-webkit-transform: scale(1.5 rotate(-12.3deg)); opacity: 1;}
      100% {-webkit-transform: scale(1) rotate(-12.3deg); opacity: 1;}
    }
    
    @keyframes pulseIcon {
      0% {transform: scale(1,1) rotate(-12.3deg); opacity: 1;}
      50% {transform: scale(1.5) rotate(-12.3deg); opacity: 1;}
      100% {transform: scale(1) rotate(-12.3deg); opacity: 1;}
    }

    @-webkit-keyframes zoomInF1 {
      from { -webkit-transform: scale(0.01) translate(0%,0%) rotate(12.3deg); opacity: 0;}
      100% { -webkit-transform: scale(1) translate(0%,0%) rotate(-12.3deg); opacity: 1;}
}

    @keyframes zoomInF1 {
      from { transform: scale(0.01) translate(0%,0%) rotate(12.3deg); opacity: 0;}
      100% { transform: scale(1) translate(0%,0%) rotate(-12.3deg); opacity: 1;}
}

@-webkit-keyframes zoomOutF1 {
      from { -webkit-transform: scale(1) translate(0%,0%) rotate(-12.3deg); opacity: 1;}
      100% { -webkit-transform: scale(0.01) translate(0%,0%) rotate(12.3deg); opacity: 0;}
}

    @keyframes zoomOutF1 {
      from { transform: scale(1) translate(0%,0%) rotate(-12.3deg); opacity: 1;}
      100% { transform: scale(0.01) translate(0%,0%) rotate(12.3deg); opacity: 0;}
}


    @-webkit-keyframes zoomInIcon {
      from { -webkit-transform: scale(0.01) translate(0%,0%) rotate(0deg); opacity: 1;}
      100% { -webkit-transform: scale(1) translate(0%,0%) rotate(-360deg); opacity: 1;}
}

    @keyframes zoomInIcon {
      from { transform: scale(0.01) translate(0%,0%) rotate(0deg); opacity: 1;}
      100% { transform: scale(1) translate(0%,0%) rotate(-360deg); opacity: 1;}
}

    @-webkit-keyframes zoomOutIcon {
      from { -webkit-transform: scale(1) translate(0%,0%) rotate(-360deg); opacity: 1;}
      100% { -webkit-transform: scale(0.01) translate(0%,0%) rotate(0deg); opacity: 1;}
}

    @keyframes zoomOutIcon {
      from { transform: scale(1) translate(0%,0%) rotate(-360deg); opacity: 1;}
      100% { transform: scale(0.01) translate(0%,0%) rotate(0deg); opacity: 1;}
}

    @-webkit-keyframes reset {
        0% {opacity: 1;}
      100% {opacity: 1;}
    }
    @keyframes reset {
        0% {opacity: 1;}
      100% {opacity: 1;}
    }

/* END clasic animation */

/*CSS * Styles*/


    * {
        margin: 0;
        padding: 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box
}

    body, html {
        width: 100%;
        height: 100%;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        overflow: hidden;
}

    #proklik {
        background: #ffffff;
        color: #000000;
        position: relative; overflow: hidden;
        width:  300px;
        height: 250px;
        box-sizing: border-box;
        cursor: pointer;
        font-family: 'speedeebold', Arial, sans-serif;
		font-weight: bold;
        text-align: center;
        display: flex;
        align-content: center;
        align-items: center;
        justify-content: center;        
    }

    #proklik img { border: 0; }

    /* borders CSS */

    .borders > div {
        position: absolute;
        background-color: #2D2D2D;
    }
    .borders > div:nth-of-type(1),
    .borders > div:nth-of-type(3) {
        height: 1px; width: 100%; left: 0;
    }
    .borders > div:nth-of-type(2),
    .borders > div:nth-of-type(4) {
        width: 1px; height: calc(100% - 2px); top: 1px;
    }
    .borders > div:nth-of-type(1) { top: 0; }
    .borders > div:nth-of-type(2) { right: 0; }
    .borders > div:nth-of-type(3) { bottom: 0; }
    .borders > div:nth-of-type(4) { left: 0; }

/* END borders CSS */

/* image CSS */

    #bck_container, #element_container {
        position: absolute;
        opacity: 1;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
        display: flex;
        align-content: center; align-items: center;
        justify-content: center;   
    }

    #p1 {
        position: absolute;
        opacity: 0;        
        left: 14px;
        top: 84px;
    }

    #p2 {
        position: absolute;
        opacity: 0;        
        left: 115px;
        top: 84px;
    }

    #p3 {
        position: absolute;
        opacity: 0;        
        left: 192px;
        top: 60px;
    }


/* END image CSS */

/* TXT CSS */

        #t1 { 
            font-weight: normal;
            line-height: 1.1;
            letter-spacing: -0.21px;
            opacity: 0;
            top: 0px;
            left: 0;
            font-size: 14px;
        }

        #t2 { 
            font-weight:lighter ;
            line-height: 1.1;
            opacity: 0;
            bottom: 0px;
            left: 0;
            font-size: 8px;
            letter-spacing: 0px;
        }

        .text {
            display: flex;
            position: absolute;
            flex-direction: column;
            align-items: center; /* Vystředí text horizontálně */
            justify-content: center; /* Vystředí text vertikálně, pokud je potřeba */
            box-sizing: border-box; /* Zahrnuje padding a border do šířky a výšky */
    
            padding-right: 15px;
            padding-left: 15px;
            width: 100%; /* Ujistí se, že div zabírá celou šířku svého rodičovského prvku */
            height: 58px;
            top: 180px;
            left: 0;
        }

        .text p {
            width: 100%; /* Ujistí se, že text zabírá celou šířku divu */
            max-width: 300px; /* Volitelné: omezí maximální šířku textu pro lepší čitelnost */
            text-align: left; /* Vystředí text v rámci svého bloku */
            margin: 2px 0 0; /* Volitelné: přidává mezery mezi odstavci */
        }
/* END TXT CSS */

    #l1 {
        position: absolute;
        opacity: 1;        
        top: 13px;
        left: 252px;
        width: 35px; height: 35px;
    }

    #l2 {
        position: absolute;
        opacity: 1;        
        top: 13px;
        left: 13px;
        width: 133px;
        height: 53px;
    }

    #plus {
        position: absolute;
        opacity: 0;        
        top: 112px;
        left: 104px;
        width: 18px; height: 18px;
    }

    #plus1 {
        position: absolute;
        opacity: 0;        
        top: 112px;
        left: 182px;
        width: 18px; height: 18px;
    }

    #icon {
        position: absolute;
        opacity: 0;        
        top: 129px;
        left: 230px;
        width: 56px; 
        height: 56px;
    }

    #produkty {
        position: absolute;
        opacity: 0;
        top: 63px;
        left: 90px;
        width: 90px;
        height: 25px;
        transform: rotate(-12.3deg); 
        transform-origin: center center;
    }

/* post animation */

#reference
{ position: absolute; left: 0px; top: -100%; width: 100%; height: 100%; }
.final #reference { top: 0; }

/*END *CSS * Styles*/
/**************/

</style>


</head>
    <body style="margin: 0; padding: 0; overflow: hidden">

        <div id="proklik">
            <div id="bck_container">
                <img loading="lazy" src="p3.png"  id="p3" alt="" />
                <img loading="lazy" src="p2.png"  id="p2" alt="" />
                <img loading="lazy" src="p1.png"  id="p1" alt="" />
            </div>

            <div class="text">
                <p id="t1">Poskládej si radost podle sebe</p>
                <p id="t2">Nabídka NicePrice Combo je časově omezená a platí pouze po dobu její propagace v restauracích McDonald’s nebo v oficiálních marketingových kanálech McDonald’s. McDonald’s si vyhrazuje právo nabídku NicePrice Combo kdykoli změnit nebo ukončit, a to i bez předchozího upozornění.</p>
            </div>

            <div id="element_container">
                <img loading="lazy" src="mcd_logo.svg" id="l1" alt="" />
                <img loading="lazy" src="npc.svg" id="l2" alt="" />

                <img loading="lazy" src="plus.svg" id="plus1" alt="" />
                <img loading="lazy" src="plus.svg" id="plus" alt="" />
                
                <img loading="lazy" src="produkty.svg" id="produkty" alt="" />
                <img loading="lazy" src="icon.svg" id="icon" alt="" />
            </div>

            <div class="borders">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            
            <div id="reference"></div>

        </div>

        <script type="">

            var elm = document.createElement("div");
        
            function animate(elem, anim) {
                elem.style.animation = anim;
                elem.style.WebkitAnimation = anim;
            }
        
            if (elm.style.animationName !== undefined || elm.style.WebkitAnimationName !== undefined){
            var phase = 0;
            var count = 0;
        
                function endframe(){
                    
                    animate(produkty, "reset 1ms linear forwards");
                    animate(plus, "reset 1ms linear forwards");
                    animate(plus1, "reset 1ms linear forwards");
                    animate(icon, "reset 1ms linear forwards");
                    
                    proklik.classList.add("final");
                }
            
            function timeline(){
        
            if(phase >= 14){
                phase = 1;
            } else{
                phase++;
            }
        
            switch(phase){      
        
            case 1:
                animate(produkty, "zoomInF1 1s ease-in-out forwards");
                animate(p1, "driveInRight 0.5s ease-in-out forwards");

                setTimeout(timeline, 350);
            break;
        
            case 2:
                animate(plus, "driveInRightPlus 0.5s ease-in-out forwards");
                animate(p2, "driveInRight 0.5s ease-in-out forwards");                
                
                setTimeout(timeline, 350);
            break;

            case 3:
                animate(plus1, "driveInRightPlus 0.5s ease-in-out forwards");
                animate(p3, "driveInRight 0.5s ease-in-out forwards");
                
                setTimeout(timeline, 350);
            break;
            
            case 4:
                animate(t1, "driveInRight 0.5s ease-in-out forwards");
                animate(t2, "driveInRight 0.5s ease-in-out forwards");
               
                setTimeout(timeline, 250);
            break;
        
            case 5:
                animate(icon, "zoomInIcon 0.5s ease-in-out forwards");
                setTimeout(timeline, 1500);
            break;

            case 6:
                animate(produkty, "pulseIcon 0.5s ease-in-out forwards");
                setTimeout(timeline, 500);
            break;

            case 7:
                animate(plus, "pulse1 0.5s ease-in-out forwards");
                setTimeout(timeline, 500);
            break;

            case 8:
                animate(plus1, "pulse1 0.5s ease-in-out forwards");
                setTimeout(timeline, 500);
            break;
        
            case 9:
                animate(icon, "pulse1 0.5s ease-in-out forwards");
        
            if(count<2){
                    count++;
        
                    setTimeout(timeline, 2000);
                } else {
                    setTimeout(endframe, 2000);
                }
                break;
            break;
        
            case 10:
                animate(icon, "zoomOutIcon 0.5s ease-in-out forwards");
                setTimeout(timeline, 250);
            break;
        
            case 11:
                animate(t1, "driveOutLeft 0.5s ease-in-out forwards");
                animate(t2, "driveOutLeft 0.5s ease-in-out forwards");
                setTimeout(timeline, 250);
            break;
        
            case 12:
                animate(plus1, "driveOutRightPlus 0.5s ease-in-out forwards");
                
                animate(p3, "driveOutLeft 0.5s ease-in-out forwards");

                setTimeout(timeline, 350);
            break;

            case 13:

                animate(plus, "driveOutRightPlus 0.5s ease-in-out forwards");
                
                animate(p2, "driveOutLeft 0.5s ease-in-out forwards");

                setTimeout(timeline, 350);
            break;

            case 14:
                animate(produkty, "zoomOutF1 1.25s ease-in-out forwards");
                animate(p1, "driveOutLeft 0.5s ease-in-out forwards");
                
                setTimeout(timeline, 2000);
            break;
        
        
            }}
        
                timeline();
        
                reference.addEventListener("mouseover", function(){
                    animate(produkty, "pulseIcon 0.5s ease-in-out 2 forwards");
                    animate(plus, "pulse1 0.5s ease-in-out 2 forwards");
                    animate(plus1, "pulse1 0.5s ease-in-out 2 forwards");
                    animate(icon, "pulse1 0.5s ease-in-out 2 forwards");
                    
                });
        
                reference.addEventListener("mouseout", function(){
                    animate(produkty, "reset 1ms linear forwards");
                    animate(plus, "reset 1ms linear forwards");
                    animate(plus1, "reset 1ms linear forwards");
                    animate(icon, "reset 1ms linear forwards");
                          
                });        
            }
        
            else{
            
            cta.style.opacity = 1;
            cta.style.filter = "alpha(opacity=100)";
        
            bck.style.opacity = 0;
            bck.style.filter = "alpha(opacity=0)";
        
            imageContainer.style.opacity = 0;
            imageContainer.style.filter = "alpha(opacity=0)";
            
            }
        </script>

    <!-- AdForm clickTAG desktop-->
<script type="">
    var clickArea = document.getElementById('proklik');

    clickTAGvalue = dhtml.getVar('clickTAG', 'https://www.mcdonalds.cz/menu/vyhodne-nabidky/');
    landingpagetarget = dhtml.getVar('landingPageTarget', '_blank');

    clickArea.onclick = function() {
        window.open(clickTAGvalue,landingpagetarget);
    }
</script>

</body>
</html>
Landing Page

Open in browser
URL

https://www.mcdonalds.cz/menu/vyhodne-nabidky/
Query Parameters

None
Network Timeline

Performance Summary

Requests
Domains
40KB
Transfer Size
64KB
Content Size
535.0ms
Dom Content Loaded
540.0ms
First Paint
536.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