Real Shadow: jQuery Plugin that casts photorealistic shadows | Hacker News Reader

Real Shadow: jQuery Plugin that casts photorealistic shadows

indamix.github.com

83 pointsilldave32 comments

Maybe it is the amount of shadow-casting items on that page but if your landing page maxes out my cpu and lags badly, I say goodbye faster than 20 frames render. (I use Opera.)

edit: They do look good though!

This one even had lights. Illuminated.js – 2D lights and shadows rendering engine for HTML5 applications http://news.ycombinator.com/item?id=3958251

The effect is cool, so I hate to ask this, but-- in what sense is this "photorealistic"? They look like normal soft shadows to me.

in a marketing sense.

The normal computer graphics meaning, then.

Where is the cursor on my phone? :)

"Perfect for eye-catching demos and landing pages."

Can we stop creating stuff in JS/CSS that we would have ridiculed other people for doing in flash? I can't possibly think of any situation where this would be useful for a landing page.

Flash wasn't ridiculed because of how it looked. The principle of integrating interactive content into web pages is a fine one, so long as it's done in a way that's semantically consistent, machine readable, searchable, accessible, reliable, not too obtrusive, forgiving of network latency and performance, cross-platform, cross-device, and tolerant of errors -- the web, in other words. Flash was... not.

That doesn't mean we stop trying to make web pages look prettier.

This pegged my duo core at 100% for both cores. Realtime shadows are great and all, but if I needed to achieve them I'd imagine I'd use WebGL if I didn't care about CPU or battery.

Using jQuery for this type of problem seems a little out of place to me. That said, this is certainly "neat." THAT said, I don't believe this has real world practical value. Its too computationally expensive considering what it adds.

for a real world application – at okfocus we used our version of this effect on http://tugofstore.com and it added to the realtime "tug" effect by making it more of a visceral experience for users. perhaps ours is less computationally expensive idk.

Impractical now, but cool as a tech-demo. i7-2640M cpu usage is at 24% on Chrome Canary 21 with this.

I'd use WebGL if I did care about CPU and battery.

On iPad I see shadows, but can't control them...

I moved the cursor across the page and nothing of interest happened. This is Firefox 12. It did work on chrome though.

Doesn't work in Firefox 14 either.

See my reply above.

Do you have NoScript or similar? Even with scripts enabled it doesn't work for me, because of the mimetype: "[NoScript] Blocking nosniff Javascript served from https://raw.github.com/Indamix/real-shadow/master/realshadow... with wrong type info text/plain, inline and included by http://indamix.github.com/real-shadow/

Edit: the fix is to add https://raw.github.com/ to the pref noscript.inclusionTypeChecking.exceptions in about:config

Yup. Although I did switch it to "allow scripts globally", but I guess that's not enough.

And, sorry, but I'm not going to add that to about config.

Works on Firefox 12 (Linux) for me!

My company released this effect a couple of months ago: http://okfoc.us/okshadow/ and https://github.com/okfocus/okshadow

Just to confirm, it's working well on Chrome 20 on Mac for me (no lag, not maxing out the CPU, very smooth). It's interesting from a technical perspective, although design-wise I can't really see any practical reason to use it. Fun though.

2000 - drop shadows.

2005 - transparent drop shadows.

2012 - realtime drop shadows!

It may just be for demo purposes, but using the mouse cursor as a light source seems like the 2012 equivalent of animated GIF backgrounds. Might be cool it could you specify a point light source at a given coordinate and let the page render from there.

You can. if you read the github readme, is shows clearly how to both disable the mouseFollow and set a global light source.

Works quite nicely on Chrome. Too much lag on Firefox and Opera!

Works on FF 12, but it's extremely slow.

Beautifully smooth for me, with Chrome 20 on Linux.

FYI doesn't work with IE 10

Looks very nice in Chrome.

ubuntu1104+Chrome: perfect Mac+firefox13: a bit slow

Needs more lens flare. And some bevels. Then we're back in 1998.

well, I liked it, well done

Reply on news.ycombinator.com