Real Shadow: jQuery Plugin that casts photorealistic shadows(indamix.github.com)
indamix.github.com
Real Shadow: jQuery Plugin that casts photorealistic shadows
http://indamix.github.com/real-shadow/
35 comments
This one even had lights.
Illuminated.js – 2D lights and shadows rendering engine for HTML5 applications
http://news.ycombinator.com/item?id=3958251
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.
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.
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.
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.
I'd use WebGL if I did care about CPU and battery.
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.
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.
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
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.
And, sorry, but I'm not going to add that to about config.
Works on Firefox 12 (Linux) for me!
[deleted]
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!
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.
[deleted]
well, I liked it, well done
edit: They do look good though!