Click here to Skip to main content
Click here to Skip to main content

Use RequestAnimationFrame with setTimeout-like function

, 1 Jul 2013
Rate this:
Please Sign up or sign in to vote.
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.

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

and then I declared these classes into style:

.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:

<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
  • 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)

About the Author

Giuseppe Luciano
Software Developer
Italy Italy
My name is Giuseppe Luciano and I graduated at Salerno University (Italy).
 
I'm developping software using: C++, Java, PHP, Python with MySql, MongoDB and SQLite.
Follow on   Google+

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web04 | 2.8.140721.1 | Last Updated 1 Jul 2013
Article Copyright 2013 by Giuseppe Luciano
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid