How to Create ScreenSaver for Web Apps with Vue Js?

Question

I wanna create a screensaver for my web apps. I can create it with Jquery like this!

JQUERY

var mousetimeout;
var screensaver_active = false;
var idletime = 5;

function show_screensaver(){
    $('#screensaver').fadeIn();
    screensaver_active = true;
    screensaver_animation();
}

function stop_screensaver(){
    $('#screensaver').fadeOut();
    screensaver_active = false;
}

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}

$(document).mousemove(function(){
    clearTimeout(mousetimeout);

    if (screensaver_active) {
        stop_screensaver();
    }

    mousetimeout = setTimeout(function(){
        show_screensaver();
    }, 1000 * idletime); // 5 secs          
});

function screensaver_animation(){
    if (screensaver_active) {
        $('#screensaver').animate(
            {backgroundColor: getRandomColor()},
            400,
            screensaver_animation);
    }
}

Watch full code and Demo by click Link Bellow

Watch DEMO

But I wanna convert the JQuery code to Vue Js. Maybe someone can help me to create the screensaver using vue js.

Answer 1

Just use some CSS animation you can save a lot of performance and get rid ton of code.

Here I have a simple codepen for you.

animation: color-transition 3s linear infinite alternate;

@keyframes color-transition {
    0% {
        background-color: #4C6085;
        border-color: #4C6085;
    }
    33% {
        background-color: #80D39B;
        border-color: #80D39B;
    }
    66% {
        background-color: #BE3E82;
        border-color: #BE3E82;
    }
    100% {
        background-color: #4C6085;
        border-color: #4C6085;
    }
}

https://codepen.io/sontd/pen/MWgPYom

Add more keyframes with different colors to get more transition, don't forget to increase the transition duration too.