

TiltShift.js - using jQuery & CSS3 to mimic tilt-shift photography (Chrome) - noeltock
http://www.noeltock.com/tilt-shift-css3-jquery-plugin/

======
paulrouget
It's possible to have such filters with Firefox as well if you use
{filter:url(#svgFilter)} (see <https://developer.mozilla.org/en-
US/docs/CSS/filter>). But I have to admit it's not as simple as webkit does.

An example: <http://jsbin.com/ekekug/2> (only Firefox, and I didn't reproduce
OP's tilt-shift effect)

Also, I'm wondering if it's not better to use Canvas for performance reasons.

~~~
noeltock
Nice, my issue with FF was in trying to use a gradient mask. Not sure how
viable it is to automatically generate the SVG via JS.

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

~~~
nchuhoai
i assume to read the data-values

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

~~~
noeltock
Good point, thanks!

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

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

~~~
executive
Same.. not working on Chromium 18

------
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.

~~~
noeltock
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 :)

------
arvidjanson
Nice one! Works just fine in Safari6 as well.

------
sgdesign
Nice effect!

These kind of effects always seem kind of pointless at first, until a company
like Instagram comes around and almost defines their whole product around them
(same with Pinterest and the Masonry layout). I'm sure very cool things will
come out of the new CSS blur features too.

~~~
noeltock
Thanks Sacha! Definitely pointless now :) Think there are some cool
opportunities down the line though (i.e. mixing with jQuery facial recognition
on profile pages, etc.). Really looking forward to seeing how these sort of
CSS3 filters develop in production...

------
gregwebs
works on Chrome on my Mac but not on my Linux VM.

------
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.

~~~
noeltock
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 :)

