Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Auto loop NanoTween animations in HTML5 banner ad

Tags:

javascript

html

tween

banner-ads

I am hoping to auto loop a HTML5 banner advertisement that I have. The animations are built using NanoTween. Here is the JS code:

var container  = getElement("id","container");

var items = {
c1: getElement("id", "copy_1"),
c2: getElement("id", "copy_2"),
c3: getElement("id", "copy_3"),
c4: getElement("id", "copy_4"),
c5: getElement("id", "copy_5"),
c6: getElement("id", "copy_6"),
button: getElement("id", "button"),
elipseOverlay: getElement("id", "elipseOverlay"),
elipseOverlay2: getElement("id", "elipseOverlay2"),
elipse: getElement("id", "elipse"),
elipse2: getElement("id", "elipse2"),
elipseContainer: getElement("id", "elipseContainer"),
bar: getElement("id", "bar"),
magnaclick: getElement("id", "magnaclick"),
shirt: getElement("id", "shirt")
};

function init() {
 setTimeout(function() {
    startAnimation();
}, 5);
};

//
function startAnimation() {
container.style.visibility = "visible";

var delay = 0;
var quickerSpeed = 0.3;
var mediumSpeed = 1.7;
var quickSpeed = 0.5;

var easeInQuad = "cubic-bezier(0.250, 0.985, 0.340, 0.985)";
var easeOutQuad = "cubic-bezier(0.250, 0.460, 0.450, 0.940)";
var linear = 'linear';
var pause = 3.6;
var loop = 0;
var loops = 1;

var magnaClickFps = 15;
var shirtFps = 10;
var magnaClickFrames = 5;
var shirtFrames = 5;


var magnaclick = function() {
    for (var i=1; i<=magnaClickFrames; i++) {
        (function(idx){
            setTimeout(function(){
                items.magnaclick.className = 'sprite2 magnaclick-'+idx;
            },(idx-1)*(1000/magnaClickFps));
        })(i);
    }
};

var shirt = function() {
    for (var i=2; i<=shirtFrames; i++) {
        (function(idx){
            setTimeout(function(){
                items.shirt.style = '';
                items.shirt.className = 'sprite2 shirt-'+idx;
            },(idx-1)*(1000/shirtFps));
        })(i);
    }
};

var animate = function() {

    loop++;

    // reset
    NanoTween.to(items.c1, 0, { opacity: 0, scale:0.2, ease:easeInQuad, delay: delay});
    NanoTween.to(items.c2, 0, { opacity: 0, ease:easeInQuad, delay: delay});
    NanoTween.to(items.c3, 0, { opacity: 0, scale:0.2, ease:easeInQuad, delay: delay});
    NanoTween.to(items.c4, 0, { opacity: 0, ease:easeInQuad, delay: delay});
    NanoTween.to(items.c5, 0, { transform: 'translate3d(-150px, 0px, 0px)', opacity: 0, ease:easeInQuad, delay: delay});
    NanoTween.to(items.c6, 0, { transform: 'translate3d(150px, 0px, 0px)', opacity: 0, ease:easeInQuad, delay: delay});
    NanoTween.to(items.button, 0, { opacity: 1, ease:easeInQuad, delay: delay});

    // initial delay
    delay += 0.2;

    // circle 1st half
    setTimeout(function(){
        items.elipseOverlay2.className += ' in';
        items.elipse2.className += ' in';
    },delay*1000);

    // circle second half
    setTimeout(function(){
        items.elipseOverlay.className += ' in';
        items.elipse.className += ' in';
    },(delay+=.2)*1000);

    // cicrcle bar
    setTimeout(function(){
        items.bar.className += ' in';
    },(delay+=.2)*1000);

    delay += quickerSpeed;

    // no more zoom in
    NanoTween.to(items.c1, quickerSpeed, { opacity: 1, scale: 1,  ease:easeInQuad, delay: delay});
    //NanoTween.to(items.c1, quickSpeed, { transform: 'translate(0px, -10px)', ease:easeInQuad, delay: delay});
    delay += 2*quickerSpeed;

    // fussing with buttons fade in
    NanoTween.to(items.c2, quickSpeed, { opacity: 1, ease:easeInQuad, delay: delay});
    //NanoTween.to(items.c2, quickSpeed, { transform: 'translate(0px, -10px)', ease:easeInQuad, delay: delay});

    // pause after frame 1
    delay += quickSpeed + 1.2;

    // frame 1 fade out
    NanoTween.to(items.elipseContainer, quickerSpeed, { opacity: 0, ease:easeOutQuad, delay: delay});
    NanoTween.to(items.c1, quickerSpeed, { opacity: 0, ease:easeOutQuad, delay: delay});
    NanoTween.to(items.c2, quickerSpeed, { opacity: 0, ease:easeOutQuad, delay: delay});
    NanoTween.to(items.bar, quickerSpeed, { opacity: 0, ease:easeOutQuad, delay: delay});
    NanoTween.to(items.button, quickerSpeed, { opacity: 0, ease:easeOutQuad, delay: delay});
    delay += quickerSpeed;

    // magnaclick animation
    //setTimeout(magnaclick, delay*1000);
    //delay += ((1000/magnaClickFps)*magnaClickFrames/1000);

    //magnaclick last farme static
    items.magnaclick.className = 'sprite2 magnaclick-5';
    NanoTween.to(items.magnaclick, 1, { opacity: 1, ease:easeOutQuad, delay: delay - 0.5});
    NanoTween.to(items.magnaclick, quickSpeed, { transform: 'translate(0px, 10px)', ease:easeInQuad, delay: delay - 0.5});

    // new zoom in
    NanoTween.to(items.c3, quickerSpeed, { opacity: 1, scale: 1, ease:easeInQuad, delay: delay});
    //NanoTween.to(items.c3, quickSpeed, { transform: 'translate(0px, -10px)', ease:easeInQuad, delay: delay});
    delay += quickerSpeed + 0.2; // + pause

    // magnetic buttons fade in
    NanoTween.to(items.c4, quickSpeed, { opacity: 1, ease:easeInQuad, delay: delay});
    //NanoTween.to(items.c4, quickSpeed, { transform: 'translate(0px, -10px)', ease:easeInQuad, delay: delay});

    // pause
    delay += quickSpeed + 0.5;

    // copy fades out
    NanoTween.to(items.c3, mediumSpeed, { opacity: 0, ease:easeOutQuad, delay: delay});
    NanoTween.to(items.c4, mediumSpeed, { opacity: 0, ease:easeOutQuad, delay: delay});
    // shirt fades in
    NanoTween.to(items.shirt, mediumSpeed, { opacity: 1, ease:easeInQuad, delay: delay});

    delay += quickSpeed;
    setTimeout(shirt, delay*1000);

    delay += ((1000/shirtFps)*shirtFrames/1000);
    NanoTween.to(items.c5, quickerSpeed, { transform: 'translate3d(0px, 0px, 0px)', opacity: 1, ease:easeOutQuad, delay: delay});
    delay += quickSpeed;
    NanoTween.to(items.c6, quickerSpeed, { transform: 'translate3d(0px, 0px, 0px)', opacity: 2, ease:easeOutQuad, delay: delay});



    //
    //if (loop<loops) {
    //    delay += +quickerSpeed + pause;
    //    NanoTween.to(items.i3, quickerSpeed, { transform: 'translate3d(-150px, 0px, 0px)', opacity:0, ease: easeOutQuad, delay: delay });
    //    NanoTween.to(items.c3, quickerSpeed, { transform: 'translate3d(150px, 0px, 0px)', opacity:0, ease: easeOutQuad, delay: delay });
    //
    //    setTimeout(animate, quickerSpeed*1000);
    //}
};

animate();

}

function getElement(element, id) {
var mc;
switch(element){
    case "id":
        mc = document.getElementById(id);
        break;

    case "class":
        mc = document.getElementsByClassName(id);
        break;
}

return mc;
}


window.onload = function(){
init();
};

Is there code that I can add to automatically loop this animation after a brief pause on the last frame? Please let me know if this is possible. Thank you for your help!

like image 299
Liz Avatar asked Oct 30 '22 11:10

Liz

1 Answers

This can be done by adding the following after the last NanoTween call. The cycle will pause for 3.6 seconds (var pause = 3.6;) before restarting.

// the last Tween ran for this duration, so we need to include to get the total duration
delay += quickerSpeed; 

setTimeout(function() {
    delay = 0; // reset animation total duration counter
    animate(); // begin again
}, (delay + pause) * 1000); // Convert delay & pause to milliseconds & restart once time has elapsed

Here's the full code incorporating the above changes:

var container  = getElement("id","container");

var items = {
    c1: getElement("id", "copy_1"),
    c2: getElement("id", "copy_2"),
    c3: getElement("id", "copy_3"),
    c4: getElement("id", "copy_4"),
    c5: getElement("id", "copy_5"),
    c6: getElement("id", "copy_6"),
    button: getElement("id", "button"),
    elipseOverlay: getElement("id", "elipseOverlay"),
    elipseOverlay2: getElement("id", "elipseOverlay2"),
    elipse: getElement("id", "elipse"),
    elipse2: getElement("id", "elipse2"),
    elipseContainer: getElement("id", "elipseContainer"),
    bar: getElement("id", "bar"),
    magnaclick: getElement("id", "magnaclick"),
    shirt: getElement("id", "shirt")
};

function init() {
     setTimeout(function() {
        startAnimation();
    }, 5);
};

//
function startAnimation() {
    container.style.visibility = "visible";

    var delay = 0;
    var quickerSpeed = 0.3;
    var mediumSpeed = 1.7;
    var quickSpeed = 0.5;

    var easeInQuad = "cubic-bezier(0.250, 0.985, 0.340, 0.985)";
    var easeOutQuad = "cubic-bezier(0.250, 0.460, 0.450, 0.940)";
    var linear = 'linear';
    var pause = 3.6;
    var loop = 0;
    var loops = 5;

    var magnaClickFps = 15;
    var shirtFps = 10;
    var magnaClickFrames = 5;
    var shirtFrames = 5;


    var magnaclick = function() {
        for (var i=1; i<=magnaClickFrames; i++) {
            (function(idx){
                setTimeout(function(){
                    items.magnaclick.className = 'sprite2 magnaclick-'+idx;
                },(idx-1)*(1000/magnaClickFps));
            })(i);
        }
    };

    var shirt = function() {
        for (var i=2; i<=shirtFrames; i++) {
            (function(idx){
                setTimeout(function(){
                    items.shirt.style = '';
                    items.shirt.className = 'sprite2 shirt-'+idx;
                },(idx-1)*(1000/shirtFps));
            })(i);
        }
    };

    var animate = function() {

        loop++;

        // reset
        NanoTween.to(items.c1, 0, { opacity: 0, scale:0.2, ease:easeInQuad, delay: delay});
        NanoTween.to(items.c2, 0, { opacity: 0, ease:easeInQuad, delay: delay});
        NanoTween.to(items.c3, 0, { opacity: 0, scale:0.2, ease:easeInQuad, delay: delay});
        NanoTween.to(items.c4, 0, { opacity: 0, ease:easeInQuad, delay: delay});
        NanoTween.to(items.c5, 0, { transform: 'translate3d(-150px, 0px, 0px)', opacity: 0, ease:easeInQuad, delay: delay});
        NanoTween.to(items.c6, 0, { transform: 'translate3d(150px, 0px, 0px)', opacity: 0, ease:easeInQuad, delay: delay});
        NanoTween.to(items.button, 0, { opacity: 1, ease:easeInQuad, delay: delay});

        // initial delay
        delay += 0.2;

        // circle 1st half
        setTimeout(function(){
            items.elipseOverlay2.className += ' in';
            items.elipse2.className += ' in';
        },delay*1000);

        // circle second half
        setTimeout(function(){
            items.elipseOverlay.className += ' in';
            items.elipse.className += ' in';
        },(delay+=.2)*1000);

        // cicrcle bar
        setTimeout(function(){
            items.bar.className += ' in';
        },(delay+=.2)*1000);

        delay += quickerSpeed;

        // no more zoom in
        NanoTween.to(items.c1, quickerSpeed, { opacity: 1, scale: 1,  ease:easeInQuad, delay: delay});
        //NanoTween.to(items.c1, quickSpeed, { transform: 'translate(0px, -10px)', ease:easeInQuad, delay: delay});
        delay += 2*quickerSpeed;

        // fussing with buttons fade in
        NanoTween.to(items.c2, quickSpeed, { opacity: 1, ease:easeInQuad, delay: delay});
        //NanoTween.to(items.c2, quickSpeed, { transform: 'translate(0px, -10px)', ease:easeInQuad, delay: delay});

        // pause after frame 1
        delay += quickSpeed + 1.2;

        // frame 1 fade out
        NanoTween.to(items.elipseContainer, quickerSpeed, { opacity: 0, ease:easeOutQuad, delay: delay});
        NanoTween.to(items.c1, quickerSpeed, { opacity: 0, ease:easeOutQuad, delay: delay});
        NanoTween.to(items.c2, quickerSpeed, { opacity: 0, ease:easeOutQuad, delay: delay});
        NanoTween.to(items.bar, quickerSpeed, { opacity: 0, ease:easeOutQuad, delay: delay});
        NanoTween.to(items.button, quickerSpeed, { opacity: 0, ease:easeOutQuad, delay: delay});
        delay += quickerSpeed;

        // magnaclick animation
        //setTimeout(magnaclick, delay*1000);
        //delay += ((1000/magnaClickFps)*magnaClickFrames/1000);

            //magnaclick last frame static
            items.magnaclick.className = 'sprite2 magnaclick-5';
            NanoTween.to(items.magnaclick, 1, { opacity: 1, ease:easeOutQuad, delay: delay - 0.5});
            NanoTween.to(items.magnaclick, quickSpeed, { transform: 'translate(0px, 10px)', ease:easeInQuad, delay: delay - 0.5});

        // new zoom in
        NanoTween.to(items.c3, quickerSpeed, { opacity: 1, scale: 1, ease:easeInQuad, delay: delay});
        //NanoTween.to(items.c3, quickSpeed, { transform: 'translate(0px, -10px)', ease:easeInQuad, delay: delay});
        delay += quickerSpeed + 0.2; // + pause

        // magnetic buttons fade in
        NanoTween.to(items.c4, quickSpeed, { opacity: 1, ease:easeInQuad, delay: delay});
            //NanoTween.to(items.c4, quickSpeed, { transform: 'translate(0px, -10px)', ease:easeInQuad, delay: delay});

        // pause
        delay += quickSpeed + 0.5;

        // copy fades out
        NanoTween.to(items.c3, mediumSpeed, { opacity: 0, ease:easeOutQuad, delay: delay});
        NanoTween.to(items.c4, mediumSpeed, { opacity: 0, ease:easeOutQuad, delay: delay});
        // shirt fades in
        NanoTween.to(items.shirt, mediumSpeed, { opacity: 1, ease:easeInQuad, delay: delay});

        delay += quickSpeed;
        setTimeout(shirt, delay*1000);

        delay += ((1000/shirtFps)*shirtFrames/1000);
        NanoTween.to(items.c5, quickerSpeed, { transform: 'translate3d(0px, 0px, 0px)', opacity: 1, ease:easeOutQuad, delay: delay});
        delay += quickSpeed;
        NanoTween.to(items.c6, quickerSpeed, { transform: 'translate3d(0px, 0px, 0px)', opacity: 2, ease:easeOutQuad, delay: delay})

        // the last Tween ran for this duration, so we need to include to get the total duration
        delay += quickerSpeed; 

        setTimeout(function() {
            delay = 0; 
            animate();
        }, (delay + pause) * 1000); // delay & pause are in seconds

        //
        //if (loop<loops) {
        //    delay += +quickerSpeed + pause;
        //    NanoTween.to(items.i3, quickerSpeed, { transform: 'translate3d(-150px, 0px, 0px)', opacity:0, ease: easeOutQuad, delay: delay });
        //    NanoTween.to(items.c3, quickerSpeed, { transform: 'translate3d(150px, 0px, 0px)', opacity:0, ease: easeOutQuad, delay: delay });
        //
        //    setTimeout(animate, quickerSpeed*1000);
        //}
    };

    animate();
}

function getElement(element, id) {
    var mc;
    switch(element){
        case "id":
            mc = document.getElementById(id);
            break;

        case "class":
            mc = document.getElementsByClassName(id);
            break;
    }

    return mc;
}


window.onload = function(){
    init();
};
like image 200
K Scandrett Avatar answered Nov 09 '22 22:11

K Scandrett
Sign in to Comment

Related questions

How to add data into postman
how to get data within firebase, when we have many to many relationship
Getting the event source from custom events in Vue?
Anything wrong with Object.freeze() on a JavaScript prototype?
Emojione Area not displaying the emoji pane
How to sort dynamic table data after appending
Error importing Typescript-compiled modules with System.js
Adding a label to a doughnut chart in Chart.js shows all values in each chart
Why does this tail call optimized function fail with a maximum call stack size exceeded error?
Angular 2 observable subscribe arrow functions getting big and dirty
What is the correct syntax for a method declared as async?
Sinon js check stub called with exact arguments
Spring MVC 4 + Jackson + LocalDate
Bootstrap modal enable background
C# WEB API CORS does not work
Woocommerce Get Orders on Thank you page and pass data javascript snippet
How do I evaluate Texas Hold' em hands with Javascript?
getSelection() not working in IE
Angular UI-Router open modal window on url change

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!