Essential Unobtrusive Javascript Effects That Will Improve Your Site

There are some effects that need a lot of coding to accomplish but there are some more that need you just to include a javascript file. This is a small list of cool things you can do with just a javascript file inclusion. We are not talking about including jQuery, prototype and such, only standalone scripts.

Embeded media player

The Yahoo! Media Player enhances your web site or blog by creating an embedded player for each audio link. All the links can be played with one click, turning the page into a playlist. All you have to do is :

1. Link to the audio files

   <a href="example1.mp3">My first song</a>
   <a href="example2.mp3">My second song</a>

2. Copy and paste this code into your page

   <script src="http://mediaplayer.yahoo.com/js" type="text/javascript"></script>

3. This play button will appear next to each of your audio links:
   And when you click on it the Yahoo! media player will appear:
   

Adding cool effects on the fly

Do you want to add css3 capabilities, glossy images, image zooming and more to your site? Then we suggest you use the Netgesta.de’s libraries.

Some of the greatest effects that require you to set only some html classes in your markup are:

TripleB

Allows you to simulate CSS 3 support for border-radius, box-shadow and background-gradient on your webpages. No more image replacing and huge css rules to make it work.

Curl

curl.js allows you to add a page curl effect (inc. backside mask) to images on your webpages.

So this image:
can look like this:

Edge

edge.js allows you to add individual masks (inc. inbuilt mask) to images on your webpages.

So this image:
can look like this:

Reflex

reflex.js 1.3 allows you to add a Cover Flow™ effect (including reflection) to images on your webpages. *Cover Flow is a trademark of Apple Inc.

So this image:
can look like this:

Glossy

glossy.js allows you to add corners and shading and shadow to images on your webpages.

So this image:
can look like this:

Sphere

sphere.js allows you to add a spherical picture effect to images on your webpages.

So this image:
can look like this:

ShiftZoom

shiftzoom.js allows you to add zoom and pan functionality to oversized images on your webpages. It also allows you to build interactive applications through the various user commands. In other words, you can create full image galleries with cool effects with little coding.

There are more libraries that might worth using. You should check them all and use the ones you really need. You should pay attention to the licence under which the libraries are though.

Including other files and content

You can include content in a div or another element of your code by using the HInclude library. After you include the file, you can write something like this:

and have it load the contents of the /other/document/here.html file. So practicaly, you can create a dynamic site on static files.

Do you know any other functionality that can be implemented by just including a js file? Let us know.

Popularity: 3%

Related posts:

1. YUI-FX Beta. Effects Library With Unobtrusive Javascript During my “to know us better” with the YUI library,...
2. The Javascript Libraries That Shape The New Web Web is like sea. It is always in the move...
3. Yet Some More Excellent JavaScript Libraries And Tools These are some Javascript libraries, frameworks and tools that can...
4. Decrypting Bit.ly Links on Twitter and Not Only Although URL shorteners are something we can’t live without, there...
5. YUI Mac Like Style Desktop When i first saw jQuery desktop i was amazed of...