Mobileme.com - the sparkle effect

Discussion in 'Web Design and Development' started by Napbree, Sep 29, 2011.

  1. Napbree macrumors newbie

    Joined:
    May 17, 2011
    #1
    Simple question,

    Does anyone know of a jquery plugin or hardcoded javascript to give me teh same effect?

    Thanks!

    P.S I'm talking about the sparkle effect on www.me.com
     
  2. Hansr macrumors 6502a

    Joined:
    Apr 1, 2007
    #2
    Do you mean a javascript to handle onfocus or the explicit css for the focus effect on their site?
     
  3. Napbree thread starter macrumors newbie

    Joined:
    May 17, 2011
    #3
    No, i'm talking about the floating glitter around the cloud icon that interacts with the mouse when you hover over. Make sure your not logged in to see the effect i mean!
     
  4. Hansr macrumors 6502a

    Joined:
    Apr 1, 2007
    #4
  5. Napbree thread starter macrumors newbie

    Joined:
    May 17, 2011
    #5
    Thanks so far, but I think they're all a bit heavy for what I need + they use html5, surely there would be a js way?

    It seems strange that no one has tried to duplicate it, its an amazing effect..
     
  6. jtara macrumors 65816

    Joined:
    Mar 23, 2009
    #6
    I have no idea what you are talking about. I don't see any "sparkle effect". I'm using the latest Safari. Maybe you could point out where you are seeing this?

    Edit: oh. When not logged-in. Still don't see it, though. There's a border that appears when you mouse over an icon, but I don't see any "sparkle".

    I'd probably hate it if I DID see it, though. Sounds like the equivalent of flashing text for the 2010's... ;)

    Have you examined the HTML source and CSS?
     
  7. Hansr macrumors 6502a

    Joined:
    Apr 1, 2007
    #7
    You need to wait a few seconds:

    [​IMG]

    He can rip the source but that's not viable if he wants to use it for a commercial project.
     
  8. jtara macrumors 65816

    Joined:
    Mar 23, 2009
    #8
    I don't even see an image that looks like that...

    Maybe some people get a different login page than others?

    I see the word "mobileme" at the top, with mobile in white and me in blue. And 6 icons underneath that. I don't see the word "mobileme" in a cloud anywhere on the page. And mousing over "mobileme" does nothing.

    I'm redirected to https://auth.me.com/.... though. Maybe I have to delete some cookies to see the page you are talking about?

    Sure he can rip the source if it turns out it's some open-license third-party library, etc. And nothing wrong with seeing how they do it in any case.
     
  9. orbital~debris, Sep 29, 2011
    Last edited: Sep 29, 2011

    orbital~debris macrumors 6502a

    orbital~debris

    Joined:
    Mar 3, 2004
    Location:
    England, UK, Europe
    #9
    try clearing any autofilled text in the username (and password) fields. Then type a non-@me/mac.com email address (make one up) into the username field. Press tab.
    This should initiate an animated effect where the MobileMe web app icons 'flip' and are replaced by the cloud.
    Then look for the sparkle :) (remember to click then mouse around)
     
  10. jtara macrumors 65816

    Joined:
    Mar 23, 2009
    #10
    Ah, got it.

    I'm unimpressed. Not sure why somebody would want to put that on their site.
    It looks to me more like "bubbles" on the iPad, iPhone, etc. screens. Oh, and on the general background too. Not sure what they are getting-at with this effect.

    In any case, it's done with Javascript drawing on the HTML5 canvas. Just view the code (and there's a lot of it) with Develop, Show Web Inspector in Safari. (You have to turn Web Inspector on in options first.)
     
  11. Napbree thread starter macrumors newbie

    Joined:
    May 17, 2011
    #11
    It's a subtle effect that I would like to incorporate.

    And I can't just rip it because its minified meaning I can't modify it without some serious work.
     
  12. skyton macrumors 6502

    Joined:
    Jan 3, 2005
    Location:
    england
    #12
    You can unminify or beautify - there are a few online tools like this one:

    http://jsbeautifier.org/
     
  13. orbital~debris macrumors 6502a

    orbital~debris

    Joined:
    Mar 3, 2004
    Location:
    England, UK, Europe
    #13
    Whoever coded the sparkle effect for MobileMe appears to have worked on the sign in page for iCloud…

    Check out the angle gradient on the sign in panel – it spins slightly in relation to the position and movement of the mouse pointer / when arriving at www.icloud.com.

    Very cool that someone took the time to code this.
     

Share This Page