Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

TiltShift.js - using jQuery & CSS3 to mimic tilt-shift photography (Chrome)

noeltock.com

Post reply on HN
Print view View original

11–19 of 19 posts

Re: TiltShift.js - using jQuery & CSS3 to mimic tilt-shift photography (Chrome)

#11

Post by gagan2020 »

stuaxo wrote: post #7

Can you make it show on mouseover/not mouseover - I can't tell if it works or not (tested in chromium)

Not working on my Chromium (18) but working fine on Chrome (21). May be Google introduce this filters in between, check your Chromium build.

Re: TiltShift.js - using jQuery & CSS3 to mimic tilt-shift photography (Chrome)

#12

Post by tmcw »

nchuhoai wrote: post #8
arcatek wrote: post #6

Why do you need jQuery ? Can't you use the :hover pseudo-class, along with CSS3 opacity transition on the mask ?

i assume to read the data-values

You can use .getAttribute() for data values without the $.

Re: TiltShift.js - using jQuery & CSS3 to mimic tilt-shift photography (Chrome)

#14

Post by executive »

gagan2020 wrote: post #11
stuaxo wrote: post #7

Can you make it show on mouseover/not mouseover - I can't tell if it works or not (tested in chromium)

Not working on my Chromium (18) but working fine on Chrome (21). May be Google introduce this filters in between, check your Chromium build.

Same.. not working on Chromium 18

Re: TiltShift.js - using jQuery & CSS3 to mimic tilt-shift photography (Chrome)

#16

Post by mason55 »

Like other post-processed tilt shift effects, this will look best when objects are very short when measured perpendicular to the blur. If you have an object that spans most of the frame and crosses the blur then you will have parts of the shot which are at the same focal length but have different blurs which will give away the effect.

These examples were well chose to avoid this issue. The Empire State Building actually has the blur running vertically which is why you don't see it there. And the airplane is a great example because the front of the plane and the jetway are in a plane and the falloff was well chosen to start just above the top of the jetway.

Re: TiltShift.js - using jQuery & CSS3 to mimic tilt-shift photography (Chrome)

#17

Post by noeltock »

mason55 wrote: post #16

Like other post-processed tilt shift effects, this will look best when objects are very short when measured perpendicular to the blur. If you have an object that spans most of the frame and crosses the blur then you will have parts of the shot which are at the same focal length but have different blurs which will give away the effect. These examples were well chose to avoid this issue. The Empire State Building actua…

Heh, fair enough. Certainly not trying to avoid the "issue" :) I think like you point out, tilt shift only works for certain shots, the same way I'm not going to use on-camera flash to try and light up a mountain at night :)

Re: TiltShift.js - using jQuery & CSS3 to mimic tilt-shift photography (Chrome)

#18

Post by Evbn »

Blur is a digital or postprocessing technique for miniature faking.

Tilt is a lens technique for miniature faking.

Shift is not related to miniature faking.

It is bizarre to name one faking technique after a different one, instead of after the end effect you are faking.

Re: TiltShift.js - using jQuery & CSS3 to mimic tilt-shift photography (Chrome)

#19

Post by noeltock »

Evbn wrote: post #18

Blur is a digital or postprocessing technique for miniature faking. Tilt is a lens technique for miniature faking. Shift is not related to miniature faking. It is bizarre to name one faking technique after a different one, instead of after the end effect you are faking.

I agree, but at the same time, the naming will resonate quite well for people searching this sort of "result", even if they are technically different. Good spot though :)
Post reply on HN