Sometimes you need to automatically set elements active, one after the other, e.g. for creating running lights.
See it in action: http://rayhyde.github.io/sequential_activation/
You can activate the plugin on as many elements on the page as you need, bar the processing limits of your viewer's computer, of course.
You can set the speed and how many times you want it to loop till indefinite.
If you only want the activation sequence to run once, you can opt to keep everything active.
Include the jQuery script at the bottom of your page, e.g. through a CDN:
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
Then include the minimized version of the script:
<script src="[path to your script]/jquery.sequential_activation.min.js"></script>
Change [path to your script] to where it resides, eg "js".
This is very simple: create an element and style the element containing it. Like
<ul id="lights">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<style>
#lights {
margin: 0;
padding: 0;
list-style: none;
background: black;
}
#lights li {
width: 10px;
height: 10px;
border-radius: 50%;
...
}
</style>
Then initialize the plugin, telling it in which element it needs to run:
<script>
$(<containing element here, e.g. "#lights">).sequentialActivation({
animationSpeed: 1000,
elementToActivate: 'li',
loop: 0,
keepActive: false
});
// a second container:
$(<containing element here, e.g. "nav">).sequentialActivation({
animationSpeed: 1000,
elementToActivate: 'div',
loop: 3,
keepActive: false
});
</script>
This is your basic page to get the plugin up and running:
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="css/mysequential_activation.css">
</head>
<body>
...
<ul id="lights">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
...
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="js/jquery.sequential_activation.min.js"></script>
<script>
$('#lights').sequentialActivation();
</script>
</body>
</html>
If you don't specify options, like in the example above, the plugin will use its default settings:
- animation speed: 300
- the element that needs to be activated: 'li'
- loop: 0, thus indefinite
- keep active: false. In the example of running
These are the options:
in the usual thousands of seconds
animationSpeed: 300
This lists the elements in the container that will be activated one by one:
elementToActivate: 'li'
You can specify the number of times it needs to loop. '0' means indefinite
loop: 0
The elements will remain activated if set to 'true'. This means that looping needs to be set to '1', as otherwise the script continues unnecessarily.
keepActive: false
This project is part of my Playground - a collection of fun (and dare I say it: clever) stuff I made in the past, from jQuery games and plugins to CSS animation tricks.
Please drop in on my portfolio site www.rayhyde.nl!