Connect With WRD
feed via e-mail
feed via e-mail

Archive for the ‘Effects’ Category

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

    SeuratJS is a plugin for the powerful Raphaël that enables us to create vivid animations and pixelated artwork.

    It extracts the color information from any given image and rebuilds it in SVG with the modifications applied.

    The plugin works cross-browser and can be customized with various settings (like the shape of the brush being used to re-generate images).

    SeuratJS

    Photon is a JavaScript library which can add simple lighting effects to any element in the 3D space.

    In order to create the effect, it uses the WebKitCSSMatrix object (WebKit is the only supported browser engine).

    The angle of the light can be defined and changed anytime with the provided functions.

    Photon

    It is possible to define the objects to be lighted one-by-one or group them at once and we can customize the effect by setting the max black + white usage.

    P.S. The effects can be resource intensive if over-used.

    Almost every web designer/developer has an experience with Flash (good or bad). And, we remember how its keyframe animation engine works: you define the states of an object in any number of keyframes you wish and it handles the animation/transformation between them itself.

    And, there is CSS3 @keyframe animations (CSS-Tricks has a great article on it) where the main logic is all similar but you animate an element with CSS properties.

    Rekapi is a library which brings keyframe animations to JavaScript. It allows us to define the objects, keyframes, animations and control the state of the scene (play, pause, stop).

    Rekapi - JavaScript Keyframe Animations

    The drawing of elements is not part of the library and that process can be accomplished by the favorite solution of each developer.

    Also, Rekapi can export your DOM animations to CSS3 @keyframes for enhanced performance

    It is very well documented, supports a wide list of browsers and works with Node.js too.

    CSS3 transitions are great and they allow us to create many stuff that we used to see only in JS.

    However, compared to JavaScript alternatives, they are not flexible enough in easing functions and, even cubic-bezier (although it is pretty powerful) has its limitations.

    Morf.js, is a Javascript work-around for hardware accelerated CSS3 transitions with custom easing functions including bounce, spring, elastic and much more.

    Morf.js

    Once an easing function is triggered through JavaScript, it is created using webkit-keyframes.

    The library uses Shifty.js for tweening regular CSS properties and it is WebKit only.

    You'll remember Scrollorama, the popular jQuery plugin for creating chic scrolling effects.

    There is now a superior version named SuperScrollorama by the same developer which offers more and complicated animations.

    It makes use of the feature-rich TweenMax and the Greensock Tweening Engine (make sure you check its license before using) for accomplishing the effects.

    SuperScrollorama

    Similar to an animation app, it allows us to add tweens and timelines to it, targeting when an element appears in the viewport or at a specific scroll point.

    The website of the resource shows its flexibility and there is a short-yet-enough documentation provided.

    Real Shadow is a simple-yet-effective jQuery plugin for creating realistic shadow effects for any HTML element.

    With a simple function, it works by targeting any number of elements and manipulating the value of box-shadow CSS property for the elements in accordance with the mouse position.

    jQuery Real Shadow Plugin

    So, the shadow's location and size is determined by the element's distance to the mouse pointer which ends up in a cool effect.

    Like said, the plugin accomplishes a simple job but can help creating attractive outputs when used smartly.

    Uptime Robot
    feed-holder
    FeedBurner
    PSD2HTML.com