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

1–10 of 19 posts

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

#2

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

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

#3

Post by noeltock »

sgdesign wrote: post #2

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.

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

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

#5

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

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

#9

Post by noeltock »

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 ?

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.

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

#10

Post by noeltock »

paulrouget wrote: post #5

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.

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.
Post reply on HN