Our clients often ask us to add a few dynamic javascrtipt effects to their website in order to make it more attractive. Many of them look so intuitive and natural that people can think that they are very easy to add and there are common standard tools for that which you can include where appropriate. In fact the effects which look the same in browser can be coded very differently. Unfortunately there are no standards for such things in web development yet (like W3C standards for XTHML/CSS) and developers just use various JavaScript libraries which save much time for doing such things. From variety of such libraries we separate jQuery library as the one which we find the most easy to work with. It can also be extended by writing the plugins and people wrote quite a lot plugins for jQuery so far.

One can say: JavaScript is good enough, why do we need to use any libraries? The answer is easy. Unfortunately even up-to-date browsers have different events and element properties and the code which works for one browser can do completely different things for another. So in order to make the site cross-browser compatible people have to detect which browser you are in and code accordingly. This adds many extra “IF-ELSE” statements to code and make it rather hard to read. When you use for example jQuery in most cases you don’t need to care about the browser because all such things are already in its core. So the code is rather easy to read and it saves much time for developer.

A few years ago adding simple effects to the code meant big challenge for the developer. Now even people which are not experiences in JavaScript can add a few lines of code and have basic effects with jQuery. However this doesn’t mean that it is always easy to add effects to existing site. In fact every effect is nothing else than dynamic changing CSS properties of certain page objects. This means that every effect depends on how XHTML and CSS for the page is organized. So ideally when you code the page you should keep in mind that certain page elements are going to be animated/dynamic. This also answers the question why adding fairly simple effect to the existing page can take a few hours.

We are going to show a few examples of popular effects by animating some blocks right inside our site. Please check them out.

  1. Fade In/Fade Out
    Sometimes you need to hide some part of the page (or show hidden block when required). Of course you can just hide or show them immediately but adding smooth fading transition to this process makes this action more pleasant to visitor’s eye and attracts his attention
    Demo: Fade Logo Out
  2. Tabs
    The most popular way to organize the content in various sections and save some page space. Tabs are not only used in web, many up-to-date desktop applications (including web browsers) have tabs as part of their UI.
    Demo: View tabs, Hide tabs

  3. Accordion
    Another way to organize content in sections (or to group navigation items). The name of effect explains its functionality very well.
    Demo: Activate accordion in sidebar (click headings to see)
  4. Slider
    Natural but very attractive effect. Can be used for image galleries, news highlights etc.
    Demo: Animate slider
  5. Drag’n'drop
    Several years ago the words “drag’n'drop” and “web” were rarely used together in one sentence. However more and more backend interfaces include this feature now. For example it is very convenient for re-ordering lists, table rows etc.
    Demo: Start dragging logo inside header

Comments (1)

Leave a Reply