Use RequestAnimationFrame with setTimeout-like function

Giuseppe Luciano

Rate me:

0.00/5 (No votes)

1 Jul 2013CPOL

With jsTimers-rAF library we can use RequestAnimationFrame with the simplicity of setTimeout/setInterval.

Introduction

In this article I'll show how to use jsTimers-rAF, a library that makes use of RequestAnimationFrame simply as the use of setTimeout or setInterval function.

In github there're some examples of use, but now I'll show how to use the library to change the background on the page, as a div, or what else you can imagine to do with requestAnimationFrame.

CSS

To change the page background, I decided to use CSS classes: first set a class to HTML tag.

HTML

<!doctype html>
<html class="htmlBg1"> ....</html>

and then I declared these classes into style:

CSS

.htmlBg1 {
    background: linear-gradient(135deg, #004003 0%, #78F170 100%, #23AC28 100%) repeat scroll 0 0 transparent;
    background: -webkit-linear-gradient(135deg, #004003 0%, #78F170 100%, #23AC28 100%) repeat scroll 0 0 transparent;
    background: -ms-linear-gradient(135deg, #004003 0%, #78F170 100%, #23AC28 100%) repeat scroll 0 0 transparent;
}
.htmlBg2 {
    background: linear-gradient(130deg, #004003 2%, #78F170 95%, #23AC28 97%) repeat scroll 0 0 transparent;
    background: -webkit-linear-gradient(130deg, #004003 2%, #78F170 95%, #23AC28 97%) repeat scroll 0 0 transparent;
    background: -ms-linear-gradient(130deg, #004003 2%, #78F170 95%, #23AC28 97%) repeat scroll 0 0 transparent;
}
.htmlBg3 {
    background: linear-gradient(125deg, #004003 5%, #78F170 90%, #23AC28 95%) repeat scroll 0 0 transparent;
    background: -webkit-linear-gradient(125deg, #004003 5%, #78F170 90%, #23AC28 95%) repeat scroll 0 0 transparent;
    background: -ms-linear-gradient(125deg, #004003 5%, #78F170 90%, #23AC28 95%) repeat scroll 0 0 transparent;
}

Now it's JavaScript time: import the library into HTML code and before "</body>" insert a new script tag with this code:

JavaScript

<body>
.....

<script>
myIntervalId = null; //interval id
stopBkChange = 1;
classCounter = 3; //css class number
//change background loop
function changeBk() {
    stopBkChange--; //decrement blur counter
    if(stopBkChange < 0) stopBkChange=0;
    if(myIntervalId==null && stopBkChange == 0) { //there isn't any changeBackground interval active?
        myIntervalId = myInterval(function() { //here I used setIterval like funct
                            if(myAdd == classCounter) bgIncr = false;
                            else if(myAdd == 1) bgIncr = true;
                            if(bgIncr) myAdd++; else myAdd--;
                            myTag.setAttribute("class", "htmlBg"+myAdd);
                        }, 750);
    }
}

//stop background changing
function stopChangeBk(){
    if(stopBkChange == 0) { //at first blur event
        myClearInterval(myIntervalId); // here I used the clearInterval like funct
        myIntervalId=null;
    }
    stopBkChange++; //count the blur events
}

//browser supports requestAnimationFrame?
if(trAfHack.rAFSupported() == true) {
    myInterval = trAfHack.setInterval;
    myClearInterval = trAfHack.clearInterval;
} else {
    myInterval = window.setInterval.bind(window);
    myClearInterval = window.clearInterval.bind(window);
}

var myTag = document.querySelector("html"); //to change class
var myAdd = 1; //class counter
var bgIncr = true; //going from 1 to 3 or from 3 to 1

changeBk(); //start nackground changing
document.addEventListener("focus", changeBk);
document.addEventListener("blur", stopChangeBk);
</script>
</body>
</html>

Points of Interest

You can reuse this code as you like, to change the behavior you just:

edit/add CSS classes
change classCounter
instead of HTML, select the tag of you interest

JavaScript

var myTag = document.querySelector("html");

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

Giuseppe Luciano

Software Developer

Italy

My name is Giuseppe Luciano and I graduated at Salerno University (Italy).
I'm software developer and a Artificial Intelligence enthusiast

Use RequestAnimationFrame with setTimeout-like function

Introduction

CSS

Points of Interest

License

Comments and Discussions