Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Mobileme.com - the sparkle effect

N

Napbree

macrumors newbie
Original poster
May 17, 2011
15
0
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
 
Do you mean a javascript to handle onfocus or the explicit css for the focus effect on their site?
 
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!
 
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..
 
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?
 
You need to wait a few seconds:

ZZ0B948154.jpg


He can rip the source but that's not viable if he wants to use it for a commercial project.
 
Hansr said:
You need to wait a few seconds:

Image

He can rip the source but that's not viable if he wants to use it for a commercial project.
Click to expand...

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.
 
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)
 
Last edited:
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.)
 
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.
 
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.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back