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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function conveyorLoop() { | |
| $('.big-spam-sorter–comments-left, .big-spam-sorter–comments-right').animate({ | |
| 'background-position-x': '+=102' | |
| }, 8000, 'linear', conveyorLoop); | |
| }()); |
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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function conveyorLoop() { | |
| $('.big-spam-sorter–comments-left, .big-spam-sorter–comments-right').animate({ | |
| 'background-position': '+=102' | |
| }, 8000, 'linear', conveyorLoop); | |
| }()); |
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .big-spam-sorter–comments-left, | |
| .big-spam-sorter–comments-right { | |
| height: 72px; | |
| position: absolute; | |
| bottom: 150px; | |
| width: 1000px; | |
| -webkit-transition: background-position 8000ms linear; | |
| -moz-transition: background-position 8000ms linear; | |
| -o-transition: background-position 8000ms linear; | |
| transition: background-position 8000ms linear; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function conveyorLoop() { | |
| $('.big-spam-sorter–comments-left, .big-spam-sorter–comments-right').css({ | |
| 'background-position': '+=102' | |
| }); | |
| // call function again after same | |
| // interval as the CSS transition | |
| setTimeout( conveyorLoop, 8000 ); | |
| }()); |
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).
Dan Hauk 
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;}
}
LikeLike
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.LikeLike
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.
LikeLike
This is what I need. Thank you 😀
LikeLike
nice share.
Thanks Dan
LikeLike
Exactly what I need! 🙂
LikeLike
Finally I get it!
Thanks a lot.
LikeLike