
Apple-like Retina Effect With jQuery - Tutorialzine
http://tutorialzine.com/2010/06/apple-like-retina-effect-jquery-css/
======
frou_dh
So.. a MAGNIFYING GLASS effect‽

The constant use of this "retina" term is dubious when referring to the actual
iPhone screen, never mind this.

p.s. Nice job.

~~~
DLWormwood
The term “jeweler’s loupe” is what I’d use myself for this demo...

Apple’s use of the term “retina” only serves to remind me of Wired magazine’s
original attempt at a website way back when. (They called their Life magazine-
like section “retina.”) It’s a common, almost everyday word that nevertheless
sounds pretentious or sci-fi—ish.

------
moron4hire
Wow, welcome to CSS demos of 6 years ago.
<http://persistent.info/files/20040508.magnifier/>

This is the power of CSS3: doing the same things we've always done.

~~~
Yaggo
Your example uses javascript, while the retina demo does not.

> This is the power of CSS3: doing the same things we've always done.

True, but CSS3 enables us to do the same things without javascript.

~~~
moxiemk1
> Your example uses javascript, while the retina demo does not.

Except that it is made with JQuery, so it _is_ using JS.

~~~
axod
Also, no one cares if something uses css rather than js. The endless "X done
only using Y" is cool from a hacker perspective, pushing boundaries is where
the awesome hacks come. But users will just go 'meh'.

~~~
moron4hire
Precisely. Where do we have CSS without JavaScript? And for people who disable
JavaScript in their browsers, they get the broken websites they deserve.

------
jasonkester
I think I win the "Earliest Pre-existing Example" award on this one: 1998.

Fire up a copy of IE (or Netscape 4) and check it out:

[http://web.archive.org/web/20010314213015/www.jasonkester.co...](http://web.archive.org/web/20010314213015/www.jasonkester.com/dhtml/demo_magnify.cfm)

~~~
there
you lose points for not having forward compatibility. think of the future!

~~~
jasonkester
Indeed. Forward compatability for IE is groovy and all, but how does a fella
go about predicting document.getElementById back in the days of document.all
and document.layers?

------
chime
It's pretty neat that they used the border-radius to make the actual div
perfectly round. I love it when a feature is used for something completely
different than what was intended (make rounded-corners).

------
j79
Wow, you need Flash to access the demo/download links?

Is this to prevent someone from scraping their tutorials?

------
showerst
One issue with this that I'd like to point out is that the background is
apparently still a .png, so this isn't something you can implement on an HTML
<div> out of the box (unless I'm misreading the source).

------
WilliamLP
Was not having it magnify centered around my mouse position, at the edges of
the rectangle, a design decision, or a limitation of the tools?

------
Yaggo
Very nice. Except the ugly Windows-like font rendering without subpixel anti-
aliasing in the "webpage" image.

~~~
frou_dh
These days, Linux should be the go-to reference for bad font rendering. I'm
sure it can be made to look decent, but it often doesn't.

------
djb_hackernews
demo would be better if it were a horizontal bar shape instead of a circle.

~~~
hellweaver666
Quite easy to fix actually as they use CSS3 border-radius to make the loupe a
circle. Just change that bit and you have a rectangle!

