Grow your CSS skills. Land your dream job.

Letter Flipper

Published by Chris Coyier

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.

Comments

  1. Permalink to comment#

    wow. nice :-)

  2. Permalink to comment#

    Nice effect!

    Been awhile since I’ve visited CSS Tricks – love the new design!

  3. Permalink to comment#

    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

  4. Permalink to comment#

    awwwwwwwwww, it’s cute…. ;)

    No, seriously, it’s fun.

  5. the letter spacing under firefox 3.6 is a little bit strange… but really nice effect!

  6. Permalink to comment#

    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 ;-)

  7. 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!

  8. Permalink to comment#

    Wow nice effect, I might have to find a use for it … not sure where but hey =)

  9. Permalink to comment#

    nice work ………………..

  10. very cool effect. now to find an opportunity to use it!

  11. Permalink to comment#

    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

  12. Permalink to comment#

    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..

  13. Permalink to comment#

    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.

  14. Daniel
    Permalink to comment#

    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!

  15. 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?

  16. Richard
    Permalink to comment#

    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.

  17. Ok. I’m dizzy now.

  18. Cool. Have you considered starting up a Jquery-tricks?

  19. Kymwei
    Permalink to comment#

    That’s very fancy!!

  20. Permalink to comment#

    thank you very much!!!I like it !!!

  21. Permalink to comment#

    pretty sweet, wonder where this would work…

  22. me likey!

  23. Permalink to comment#

    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);

  24. Permalink to comment#

    Wow, it is really cool. I was doing Google for something like this. I think my search is over now :)

    Thanks a lot
    Sabbir

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".