Use RequestAnimationFrame with setTimeout-like function

Giuseppe Luciano

0.00/5 (No votes)

1 Jul 2013CPOL

7.1K

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)