9 ms·

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

44 points by noeltock 14y ago

sgdesign 14y ago
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 14y ago
  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...
arvidjanson 14y ago
Nice one! Works just fine in Safari6 as well.
paulrouget 14y ago
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 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 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 14y ago
  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 14y ago
Why do you need jQuery ? Can't you use the :hover pseudo-class, along with CSS3 opacity transition on the mask ?
- nchuhoai 14y ago
  i assume to read the data-values
  - tmcw 14y ago
    You can use .getAttribute() for data values without the $.
    - noeltock 14y ago
      Good point, thanks!
- noeltock 14y ago
  Yeah, you definitely don't need jQuery if you're doing it image for image. I did it this way so that I had a method to quickly pass settings on and generate the necessary effects on the fly.
stuaxo 14y ago
Can you make it show on mouseover/not mouseover - I can't tell if it works or not (tested in chromium)
- gagan2020 14y ago
  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 14y ago
    Same.. not working on Chromium 18
gregwebs 14y ago
works on Chrome on my Mac but not on my Linux VM.
mason55 14y ago
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 14y ago
  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 :)
Evbn 14y ago
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 14y ago
  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 :)

44 points by noeltock 14y ago

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 14y ago
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...

arvidjanson 14y ago

Nice one! Works just fine in Safari6 as well.

paulrouget 14y ago

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 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 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 14y ago
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 14y ago

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

nchuhoai 14y ago
i assume to read the data-values
- tmcw 14y ago
  You can use .getAttribute() for data values without the $.
  - noeltock 14y ago
    Good point, thanks!
noeltock 14y ago
Yeah, you definitely don't need jQuery if you're doing it image for image. I did it this way so that I had a method to quickly pass settings on and generate the necessary effects on the fly.

stuaxo 14y ago

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

gagan2020 14y ago
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 14y ago
  Same.. not working on Chromium 18

gregwebs 14y ago

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

mason55 14y ago

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 14y ago
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 :)

Evbn 14y ago

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 14y ago
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 :)