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

Archive for the ‘Effects’ Category

Parallax scrolling, creating an illusion of depth by moving web elements in different speeds while scrolling, can help offering an attractive browsing experience.

Skrollr is a lightweight (7kb minified – 3k gzipped) and standalone JavaScript scrolling animation library that simplifies bringing such parallax effects to life.

Skrollr

It allows us to animate the CSS properties of any element according to the horizontal scrollbar position. Defining key frames for each element at certain points in top offset is enough for that.

And, the library is perfect for designers who are not good at JavaScript as -almost- everything is defined inside HTML elements and no JS coding.

Hakim El Hattab (hakim.se), a very talented developer and programmer, has created a set of very nice scrolling effects.

The effects are all CSS-only and a simple JavaScript function helps attaching/removing classes to elements.

CSS Scroll Effects

Currently, there are 10+ effects and, as expected, they are WebKit + Firefox-only but degrade nicely on incompatible browsers.

P.S. You should also check the experiments page of hakim.se to see various other exciting stuff.

Blur.js is a flexible jQuery plugin for implementing blur effect to any web element.

It actually works by creating and placing psuedo-transparent blurred elements over the targeted ones and makes use of the StackBlur algorithm.

Blur.js

The source of the blurred item (it can use the background of body or other HTML elements), radius of the effect and it is positioning can be defined with ease.

There is built-in caching for re-using the blurred image and there is support for making the item where the effect is applied to be draggable (requreis jQuery UI).

For websites with many design elements and content, in order to help users to focus on the content, applying an opacity on images and removing when hovered is usually a good idea.

Adipoli is a jQuery plugin that beautifies and simplifies creating and consuming such hover effects.

With a simple function, we can choose the "start effect (normal, transparent or overlay)" and the images will become less catch until they are hovered.

Adipoli- jQuery Hover Effect Plugin

There are 20+ built-in and attractive transition effects that will display the images "as is" when users hover them.

Also, multiple configuration options exists for further customizing the transitions.

  • Tags:
  • Filed under: Effects, Goodies, MIT License
  • 2 Comments
  • Scrollorama is a jQuery plugin for creating eye-candy effects in parallel to the scrolling of web pages.

    By dividing the content into blocks, it simply lets us to animate elements on the page (when a block is reached) based on the browser window’s scroll position.

    The animations are accomplished using CSS properties, durations of them can be defined and it is also possible to set the exact scrolling positions of the start/stop events.

    Scrollorama

    Textualizer is a lightweight (4kb minified) jQuery plugin for creating good looking effects on text.

    The plugin accepts any number of sentences (or words) and can rotate them smartly and beautifully.

    jQuery Textualizer

    Once a sentence is about to rotate with the other one, the letters that will be re-used are kept and move to their new locations with several effects to choose from (fadeIn, slideLeft, slideTop).

    It is possible to define the duration that each item will be displayed and also the duration of the transitions. Also, functions exist to stop or pause the rotation.

    CSS transitions and transforms provide a wide range possibilities for animating and morphing HTML elements.

    If you would like to use them inside jQuery, jQuery Transit reaches to the rescue.

    It is a plugin for implementing CSS transitions and transforms, has the same syntax as .animate, supports most of the methods and has the jQuery juice like callbacks, chaining, auto-browser-prefixes and more.

    jQuery Transit

    The plugin uses jQuery’s effect queue by default, so, transitions will never run in parallel.

    It doesn't offer compatibility with older browser versions as real CSS3 rules are applied (rather than .animate) but degrades nicely and/or you easily force it to siwtch to the frame-based animation.

    For any web project, if it is only the animations we need, wouldn't it be nice to use a lightweight framework rather than a complete and big-sized one?

    jsMorph is a standalone JavaScript animation framework which can manipulate stylings of multiple HTML elements.

    The framework automatically detects start positions, converts units, adjusts rendering speed and corrects time leaks for smoother rendering experience.

    jsMorph

    It is only 2.3kb, chainable, well-documented (supported with examples) and works pretty fast (with an optimized browser rendering buffer usage).

    And, there is a queuing system which allows morphing multiple items.

    glfx.js is a JavaScript library for applying effects to images using WebGL.

    The library has a wide set of built-in-filters including brightness/contrast, curves, sepia, hue/saturation, noise, lens blur, tilt shift, hexagonal pixelate and much more.

    glfx.js

    glfx.js has 3 parts:

    • texture: a raw source of image data (created from an <img> tag)
    • filter: an image effect (represents one or more WebGL shaders)
    • canvas: an image buffer that stores the results (a WebGL <canvas> tag)

    Every filter comes with different variables that can be configured to create custom effects.

    Although WebGL is supported by most modern browsers, not by all of them yet (check if your browser supports it).

    Paper.js is an open source and "JavaScript + HTML5 canvas-powered" vector graphics scripting framework.

    Besides being a wrapper for the "canvas", it has much more to offer like working with nested layers, groups, paths, compound paths, rasters, symbols, etc.

    Paper.js

    These items are handled and drawn automatically by Paper.js so you can focus on styling and/or modifying them.

    It tries to use the code smartly for faster execution and less CPU usage.

    The framework has methods for mouse and keyboard interaction. And, it has the well-known blend modes from Illustrator and Photoshop with JS emulation like: multiply, screen, overlay, soft-light, hard-light, color-burn, darken, lighten,  hue, saturation, luminosity, color and more.

    Uptime Robot
    feed-holder
    FeedBurner
    PSD2HTML.com