Archive for the ‘Effects’ Category

Lazy Line Painter is a pretty original jQuery plugin for preparing and presenting SVG path animations using  jQuery.

It works for any SVG file (any design can be exported with Illustrator in seconds) and simply by drag ‘n’ dropping it to an online generator provided by the plugin.

Lazy Line Pianter

And, after that, just insert that code into any web page and it will work.

Various options exist for customization including the stroke width, color, speed and a callback that is triggered once the animation is completed.

The plugin requires Raphaël besides jQuery and can be a nice way of presenting illustrations for graphic designers.

  • Tags:
  • Filed under: Effects, Goodies, Other License
  • 0 Comments
  • Liffect is a web-based generator that provides lots of different effects for list elements.

    It makes use of CSS animations and requires jQuery for applying the delay in effects.

    There are items fading, zooming, sliding, flipping, bouncing and, a fun one, Star Wars-inspired effect.

    Liffect

    The website allows us to define the duration + delay and generates the necessary CSS rules instantly.

    Liffect is a must-bookmark not only for copy-pasting the effects but it is also a nice reference.

    Lenticular.js is a jQuery plugin for creating image animations that response to tilting or mouse events.

    The plugin is built with mobile browsers in mind (tilting) but can also be used for desktop browsers (mouse).

    It is pretty easy-to-setup. Just create a sequence of images (that are named like image-1.jpg, image-2.jpg), define the folder of the images and the number of the frames and you are almost done.

    There are functions provided to activate/deactivate the effect, setting the axis (x,y or z) used and more.

    Lenticular.js

  • Tags:
  • Filed under: Effects, Goodies, MIT License
  • 3 Comments
  • For JavaScript and CSS-based animations, easings (the speed of the animation progresses) have a huge role in making them realistic.

    Easings.net is a very useful website for understanding and using such easing functions.

    Each function is displayed with a line chart where hovering them automatically runs an animation with that curve.

    Easings.net

    And, we can see how each function can be used with CSS, SCSS and JavaScript (jQuery Easing plugin).

    Also, to customize them, there is a custom link for the functions that gets us to another awesome easing-related website: Cubic-Bezier.com (was featured at 3 Tools For Easier CSS3 “Transition Timing Functions” Cubic-Bezier).

  • Tags:
  • Filed under: Effects, Goodies, No License
  • 0 Comments
  • oriDomi is a JavaScript library for beautifully folding up any HTML element just like a paper.

    The library doesn't depend on any JavaScript frameworks (but has optional support for jQuery) and uses CSS 3D transitions for creating the effect.

    oriDomi

    Folding is performed as an animated event where the number of vertical/horizontal slices, speed and shading can all be set.

    There are multiple effects and events provided: accordion, reveal, curl, collapse, ramp, foldUp, unfold and reset.

    oriDomi is compatible with all modern browsers (including mobile).