TiltShift. js,
TiltShift. js is a great jQuery plug-in that usesCSS3The image filter is used to achieve the effect of the photo's shift axis lens. It is very easy to use. You can use the data attribute to configure parameters. Tip: to ensure the best results, visit modern browsers such as IE10 +, Chrome, Firefox, and Safari.
Download the demo plug-in
HTML example:
- -Position(0-100), which defines the focus position.
- -Blur(0 -?), Blur the radius. Set to 1 or 2.
- -Focus(0-100), the size of the focus area.
- -Falloff(0-100), the area size between the full focus and the full blur.
- -Direction("X", "y", or 0-360), direction.
JavaScript call example:
$(function() { $('.tiltshift').tiltShift();});
Articles you may be interested in
- Useful jQuery effects in website development [Source Code]
- Share 35 amazing CSS3 animation demos
- Amazing 8 HTML5 & JavaScript Special Effects
- 10 useful results in Web development [Source Code download]
- 12 classic jQuery image carousel plug-ins
Link to this article: tiltShift. js-CSS3 filter for photo axis shifting Lens Effect
Source: Dream sky ◆ focus on front-end development technology ◆ share web design resources