I don't know how to put this but please have a look at my code: JSFiddle
.pie:nth-of-type(1):hover:AFTER,
.pie:nth-of-type(1):hover:BEFORE {
background-color:yellow;
opacity: 0.5;
}
its basically a wheel of fortune game but using highlight instead of spinning.
the question is how do i write a javascript that triggers the event that highlight the slices throughout a given amount of time? also i would like the transition speed between each slices to slow down over the time.
It is quite simple.
First, you don't need all the n-th-of-type for all the pies. But you need an extra class, say, 'active', otherwise you cannot highlight it via JavaScript.
So, you .pie CSS becomes:
.pie.active:BEFORE,
.pie:hover:AFTER,
.pie:hover:BEFORE {
background-color: yellow;
opacity: 0.5;
}
Then, here is the example code that does what you need (in onload):
function highlight(el, delay) {
setTimeout(function() {
el.className += ' active'; //light it up
//un-highlight after delay:
setTimeout(function() { el.className = 'pie'; }, 200)
}, delay)
}
var divs = document.querySelectorAll('.pie');
for (var i = 0; i < divs.length; i++) {
highlight(divs[i], i*200);
}
Here is the fiddle: JSFiddle
It can be made a bit more smooth by addition transitions, e.g. add transition: background-color 0.1s; to the above CSS and make all programmatic delays 200ms.
To implement slow downs, you need to play with the delay formula. i*200 is rather simplistic, but I don't want to take away the fun to try various math functions to change timing. Additionally, you can change transition css, changing it programmatically on the element itself takes precedence over CSS. You can easily make it fairly realistic after some effort.
Take a look at this JSfiddle here
What you need to do is have some javascript that adds and removes your hover class based on a timer. Pseudocode below:
if spinTime < desiredSpinTime
remove hover class from previous element
get next element
add hover class to next element
add time step to spinTime
get next time step
call this function again with a delay of the next time step
