Randomly, I made a letter flipper thingy the other day. I saw a similiarish effect on a Flash site and tried doing it with JavaScript instead. You can view source on that page to see the simple code. It’s just recursively calling a function to change the letter with a slight delay until the letters stored in a Array are up, then changing back to it’s original letter.
Then Don Burks turned it into a plugin which is far more robust.
Nope, it’s not the most useful thing in the world. I just thought I’d share it in case anyone gets a kick out of it or it actually comes in useful somehow.
wow. nice :-)
Nice effect!
Been awhile since I’ve visited CSS Tricks – love the new design!
Kind of reminds me of something I saw a while ago on BBC’s Sherlock Holmes’ tie-in website. I seem to recall that being purely JavaScript too, rather than Flash etc.
You are a Machine!!! you are a great inspiration for me. Good job Cris. In Albanian I would tell you (“Ti je NONA”) [you are the grandmother] :)
cheers
awwwwwwwwww, it’s cute…. ;)
No, seriously, it’s fun.
the letter spacing under firefox 3.6 is a little bit strange… but really nice effect!
Looking forward to seeing if anyone finds a good home for this code. My only thought is perhaps send it over to the Lost website where they can use it down in the hatch ;-)
Excellent effect!
This is somewhat like those split flap indicator boards – solari boards that they use in airports and railway stations. Best example I’ve seen is Terminal 2F in Paris Charles de Gaulle airport
I’d love to have one of those as a WordPress plugin – especially with the noise too
Please someone, pretty please!
Wow nice effect, I might have to find a use for it … not sure where but hey =)
nice work ………………..
very cool effect. now to find an opportunity to use it!
Awesome.. But I must admit that I thought: ‘does this man have too much time, if you have time to do that for fun?’..
Awesome effect though, that I for sure will use sometime!!
Good stuff. :D
I think this would be a cool effect if you could use it as a transition between panels on a slider.. Say the image fades in and out but the Headline does the flipper thing to a new Headline..
And what’s the point here? When your file is with open code?
What makes me to do hours work,when i publish my file on my page client,and other day some idiot steal my code.
Flash it’s better for this ;) Javascript is not on way to beat flash.
Nice effect!
I want to say though that the font looks kind of terrible on windows (at least for me) It’s all jagged… Would you consider including courier new in your font stack? or just use “monospace”. The same goes for code snippets, but they are smaller so it doesn’t matter as much
thank you Chris for an awesome site!
Very nice, I was making a port to Prototype, but does not work on IE, and even your code there works on IE. mmm you can do?
Excellent site Chris. This is the first time that I’ve come across it and I must say that I’m impressed – lovely, clearly laid out design. I’ll definitely be coming back.
Ok. I’m dizzy now.
Cool. Have you considered starting up a Jquery-tricks?
That’s very fancy!!
thank you very much!!!I like it !!!
pretty sweet, wonder where this would work…
My attempt using prototype js: http://cssrevolt.com/upload/files/letterflipper/
It requires no additional markup, and also works on internet explorer
me likey!
This letter flipper is not working in Internet Explorer. And It works if we use setTimeout like the
setTimeout(function(){
changeLetter(el,i+1);
},40);
Wow, it is really cool. I was doing Google for something like this. I think my search is over now :)
Thanks a lot
Sabbir