Genie effect with JS & CSS
This version works on all three major browsers; Safari, Firefox and Chrome. Though the animation runs smoothest in Chrome. I guess the guys working with the re-paint subroutine at Chrome has done the best work :-P
Check out the live demo here
Making this effect work on Chrome, Firefox and Safari was trickier than I anticipated from the start. I thought it would be a walk in the park to make it work in Safari, once it worked in Chrome…but that was a faulty assumption. Since the third version, I’ve been experimenting with different approaches, hoping to make it work in Safari but regardless of routes I choose; either Firefox won’t work or Safari.
I have decided to put version 3 at Github – for anyone who want the challenge ;)
Fast summarise; both Firefox and Chrome accepts that CSS animations of background-image starting from pixels and ending with a value of percentage. Safari doesn’t like this hence, the animation doesn’t work. You might think; “Well, why not start and end with percentage values?”
It can’t; since that requires that the starting point value in percentage would be negative…and it’s not allowed in CSS.
Currently, I’m trying to make it work with other tricks. We’ll see how that turns out. Meanwhile, check out the source code here:
So I’ve finally devoted time to continue the scripting of the genie effect. Below is a screencast of current state of the script – accompanied with a tiny tune I produced a couple of months ago :)
The genie effect
A little over a month ago, I quit my job and started working as freelance developer. Luckily, I’ve been engaged in a couple of projects, making the transition period successful. So I’ve been busy working with those projects and I really like it – I get to decide the workhours, which is appealing to me. During this time, I have re-visited a couple of my private projects, Vanguard IDE being one of them; and I intend to “zoom into” this project as soon as I find time. In other words, I haven’t forgotten this project.
The other day, I got an idea of how to reproduce the genie effect from MacOS X, demonstrated for the first time by Steve Jobs, back in 2000. I have searched the web to see if anyone has successfully reproduced this effect in the browser. It seems that no one has been able to do so. Sure, there are a couple of attempts…such as this one; Ginny Effect Modoki. Though, in my opinion, this doesn’t resemble the original effect at all.
When it itches, I have to scratch it :) so I decided to give it a shot and try to do it myself.
The result is turning out to be fast, since my version is hardware accelerated. I’m still in the process of optimising the code and there are some knots to be resolved. When finished, I intend to release the solution as a JS-lib for everyone to use. Meanwhile, check out the youtube clip below to see a glimpse of the state of the reproduced effect that I recorded.
I’ve been thinking of bloging about Vanguard IDE for a long time now but to tell you the truth, I have been lazy…well actually, it’s not that simple; working fulltime as developer is energy draining and after that coming home and working with Vanguard is time consuming. Many times, I don’t even want to sit in front of the computer and this conveys in elongated development time for Vanguard. On top of that, blogging has not been as an appealing extracurricular activity.
I’m trying to activate myself and this is the first steps in the right direction. I created (actually it’s a WP-theme adaption) this blog in about one hour and therefore, the comments-feature are not available but I’m hoping to fix that tomorrow.
Thank you for dropping in.