Reputation: 5747
I have searched for anything on how to animate a color wheel using jquery to step through the defined colors in order and I can't seem to find anything.
What I'm looking to do is spiral an effect by "opening" slivers of the colors at 45 degrees and open them in order like a spiral and then close them in order. Starting from blank and ending with blank. By open I mean some kind of slide effect (hard to think of the correct term) but think of a loading gif spiral that looks like it's spiraling. (Like the mac rainbow wheel, only making the previous colors disappear after cycling through.)
I'm using jquery and would prefer a jquery solution so I don't have to worry about browser compatibility issues, but I could accept css transitions as a last resort.
I've attached some images to give a better visual idea. I have no code right now but my plan was just to have a div inside the body where the jquery would draw or do this animation. I really don't even know where to start so I don't have anything to build from nor do I really know the exact terminology I'm looking for. Hopefully my images will give a better understanding. Thanks.
Upvotes: 1
Views: 1681
Reputation: 92334
I used moredemons's answer as a basis, using CSS triangles. It does the same thing, but it properly separates the CSS so you don't have to edit the JS to edit the colors. The JS is also simpler, doesn't rely on if/elses
for all 16 states.
The main benefit of a programatic solution over a gif is that you can customize the colors, sizes, animation rate more easily.
Initial HTML All triangles hidden
<div id ="ct" >
<div class="triangle triangle-nw triangle-hide-tr triangle-hide-bl"></div>
<div class="triangle triangle-ne triangle-hide-tl triangle-hide-br"></div>
<br/>
<div class="triangle triangle-sw triangle-hide-tl triangle-hide-br"></div>
<div class="triangle triangle-se triangle-hide-tr triangle-hide-bl" ></div>
</div>
CSS
.triangle {
font-size:0;
border: 50px solid transparent;
display: inline-block;
width: 0;
height: 0;
margin:0;
padding: 0;
}
.triangle-se {
border-color: red red blue blue;
}
.triangle-sw {
border-color: red blue blue red;
}
.triangle-nw {
border-color: blue blue red red;
}
.triangle-ne {
border-color: blue red red blue;
}
.triangle-hide-tl {
border-top-color: transparent;
border-left-color: transparent;
}
.triangle-hide-tr {
border-top-color: transparent;
border-right-color: transparent;
}
.triangle-hide-br {
border-bottom-color: transparent;
border-right-color: transparent;
}
.triangle-hide-bl {
border-bottom-color: transparent;
border-left-color: transparent;
}
JS
setInterval((function(){
var index = 0;
// Which square is going to be modified in each stage (16 stages)
var map = [3,3,2,2,0,0,1,1,3,3,2,2,0,0,1,1];
// The clases to add and remove
var classesToChange = ['tr', 'bl', 'br', 'tl', 'bl', 'tr', 'tl', 'br'];
return function() {
var el = $('#ct div.triangle').eq(map[index]);
if (index < 8) {
// Showing pieces
el.removeClass('triangle-hide-' + classesToChange[index] );
} else {
// Hiding pieces
el.addClass('triangle-hide-' + classesToChange[index - 8] );
}
index++;
if (index >= 16) {
index = 0;
}
};
})(), 200);
Upvotes: 3
Reputation: 9664
Update your example >> mi-creativity.com/test/color-wheel
You can achieve the same above effect by using what so called image-sprites, you include all of them in one image, queuing them vertically or horizontally and changing the background-position just like in this example (you can view the page source to know how to do it)
mi-creativity.com/test/fading-sprite-background
The above example uses a jquery plugin called jquery.bgpos.js
as will as a .png image
Another way of doing it you can set each of above images as a back-ground image each for a different class wit ha numerical value and you change the div class by making use of toggleClass
jquery property like in this example - check the page source -:
mi-creativity.com/test/fading-sprite-background
Which I prefer because it is easier to modify it and add more frames if you want.
P.S: you don;t need another blank frame at the beginning, just move the last frame to the beginning, because if you used two blank frames that would affect the smoothness of the motion
Upvotes: 0
Reputation: 7603
You're simply looking for an animated gif. Why overcomplicate things with javascript when it's not needed. A gif will show perfectly in any browser.
Here, it took me 3 minutes to do this. Less time than any code.
Upvotes: 2
Reputation: 479
I know my solution is weird a lot, but there's no another solution as I see. I used border
s to create 45° corners and jQuery animate
with step
on fake element.
So, look at this fiddle: http://jsfiddle.net/WYKmQ/1/
Upvotes: 2