After I redesigned the “How Does Akismet Work” page, I realized the spam sorter graphic was just itching to be animated. Converting the main machine box into a gif with some flashing lights was easy enough. The conveyor belt is what gave me some trouble. I’m posting my solution here because the bug I came across was something so simple to fix and I just didn’t see it.
This should be easy
The effect was to have the comment bubbles move left to right as if they’re going through the machine. Since this entire graphic is composed of empty divs with background images in the HTML (this was done in order to make the conveyor belt repeatable and expand to the edge of the browser regardless of size), making them move was a simple matter of changing the background-position.
Easy, I’ll just use a simple .animate() on the comment bubbles.
https://gist.github.com/danhauk/5e5d903fafcf4cd42020
Perfect! Now to do some cross-browser testing.
Uh oh, Firefox
Next step was to jump over to Firefox to make sure it worked before committing the changes. Here’s where I ran into the problem, it didn’t work in Firefox. I racked my brain and did some searching to figure out why it would work perfectly in Chrome but not in Firefox.
It turns out (and I think I knew this already at some point) Firefox doesn’t support background-position-x and background-position-y. So I was trying to animate a property that couldn’t be animated.
My Solution
The solution was simple. Just remove -x from the background-position property and viola. My final code:
https://gist.github.com/danhauk/e39feef20ddcc932a073
Why not use CSS transitions?
I was originally going to go the route of using CSS transitions, but I wanted more browser support, particularly IE9. If you want to use CSS transitions instead of the jQuery .animate() function here’s what I was using.
https://gist.github.com/danhauk/3744611109326451fa30
Using CSS is the only way I found to animate on both the x and y axis. But I couldn’t figure out how to keep it in a continuous loop, for example continuously moving an image diagonal. If you know of a way to do that, whether it’s via CSS or Javascript, feel free to comment below or get in touch [http://twitter.com/danhauk](on Twitter).
That’s very cool. Would something like this work with just css
.big-spam-sorter--comments-left,.big-spam-sorter--comments-right {
-webkit-animation: slide 2s linear infinite;
-moz-animation: slide 2s linear infinite;
animation: slide 2s linear infinite;
}
@-webkit-keyframes slide
{
0% {background-position: 0 0;}
100% {background-position: 100px 0;}
}
@-moz-keyframes slide
{
0% {background-position: 0 0;}
100% {background-position: 100px 0;}
}
@keyframes slide
{
0% {background-position: 0 0;}
100% {background-position: 100px 0;}
}
I explored
@keyframesbriefly, but the problem that I came across is that I can’t incrementally increase the background position to continue the movement.In your example the comment bubbles would move 100px to the right, then move back to their starting position at 0. Instead of continuing to move to the right as if on a conveyor belt, they would just move back and forth.
This is why I used jQuery to move the background position since I can use
'+=102'to move the background by 102px regardless of current position.Ah yes I see what you mean. It’s an interesting question, you would think there should be away to do this with only css.
This is what I need. Thank you 😀
nice share.
Thanks Dan
Exactly what I need! 🙂