Monday, November 22, 2010

Fade In, Fade Out JavaScript Effects and a Bonus Buzz

Looking for a way to apply the so called "HTML fade transition" or "HTML fade effect" to page elements on your site or blog? I'm talking about making HTML elements appear or disappear slowly. Well... there are solutions! The most popular ones involve using JavaScript libraries and methods/functions from jQuery or script.aculo.us. The single major disadvantage of these solutions is that your pages will have to load several tens (if not hundreds) of kilobytes worth of JavaScript libraries in order to implement the effects and in most cases, you won't be using all the functionality provided by those libraries.

I asked myself if there's any room for improvement especially for small scale, simple applications, or for those situations when only these JavaScript fade effects are needed. As a result, I came up with an easier to use and, most importantly, lighter alternative. My solution involves less than 3 kilobytes worth of function definitions and a very direct way of creating the cool HTML fade transition. As a bonus, I've added a function which makes an element shake briefly to attract visitors' attention - an effect which I call "buzz".

1. How do I start?

In order to use these visual effects on your blog or site, you first need to install a small script containing the function definitions. It is recommended to install the script in the <head> section of your pages in order to use the functions anywhere on your site. For a Blogger blog, there are two additional ways of installing the script:

  1. In an HTML/JavaScript gadget placed at the beginning of the <body> section - this also allows you to use the effects on every page, but you have to make sure the respective gadget loads before you call any of the functions.
  2. In the beginning of an article - this allows you to use the effects within that article only. However, the advantage you get by doing this is that the script won't affect the loading speed of the rest of your pages.

Because Blogger checks the formatting of your blog template every time you edit it, you'll need a special version of the script if you want to install it in the <head> section of your Blogger blog. On top of that, if you don't want to use all three effects, you can choose to install only the definitions for the fade functions, or only the definition for the buzz function.

To recapitulate, there are three available versions of the script:

  1. fade functions only;
  2. buzz function only;
  3. fade + buzz.

Each of these versions has two variants:

  1. One which can be installed in the template of your Blogger blog and...
  2. Another one which can be installed in an article/gadget, or on any other type of site.

This makes a total of six choices, and to help you decide which one you should use, I've created the following JavaScript wizard:

Step 1

Where would you like to embed the code?
In the template of my Blogger blog.
In an article/gadget from my Blogger blog, or on any other site.

Step 2

Which functions would you like to use?
agawebs_fade_out() and agawebs_fade_in().
agawebs_buzz().
All three: agawebs_fade_out(), agawebs_fade_in() and agawebs_buzz().

Step 3

Get the code...

To keep this article short, I'm only going to write instructions on how to install all three functions in the <head> section of your Blogger blog. So, assuming that's what you want to do, here are the steps you need to follow:

  1. Choose the first answer (In the template of my Blogger blog.) for the first question above.
  2. Choose the last answer (All three: agawebs_fade_out(), agawebs_fade_in() and agawebs_buzz().) for the second question.
  3. Click the textarea that appears in order to select (highlight) the code and then right click the code and choose "Copy" from the context menu.
  4. Go to the "Design" section of your Blogger blog, select the "Edit HTML" tab and download the full template to use it as backup in case anything goes wrong.
  5. Locate the ending </head> tag in your template and paste the code you've copied immediately above it.
  6. Finally, click the "SAVE TEMPLATE" button.

You are now ready to call these functions and start using the fade and buzz effects.

2. How do I use the functions?

Below is the syntax for each of these functions, and a short description for each parameter:

2.1. agawebs_fade_out (obj_id, step, pi, pf, flow)

ParameterDescription
obj_idThe id of the element which will fade out.
stepOptional. A numerical value, greater than 0 and less than 100, which determines by what percentage the opacity of the element changes on each iteration. A small value causes the element to fade out slowly, while a bigger value causes the element to fade out quicker. If omitted, the default value is 5.
piOptional. The initial opacity (initial phase) of the element. If omitted, the default value is 100.
pfOptional. The final opacity (final phase) of the element. If omitted, the default value is 0.
flowOptional. If this parameter is set to 1, the element is removed from the normal flow of the page after it fades out. Otherwise, the element is not removed.

2.2. agawebs_fade_in (obj_id, step, pi, pf, flow)

ParameterDescription
obj_idThe id of the element which will fade in.
stepOptional. A numerical value, greater than 0 and less than 100, which determines by what percentage the opacity of the element changes on each iteration. A small value causes the element to fade in slowly, while a bigger value causes the element to fade in quicker. If omitted, the default value is 5.
piOptional. The initial opacity (initial phase) of the element. If omitted, the default value is 0.
pfOptional. The final opacity (final phase) of the element. If omitted, the default value is 100.
flowOptional. If this parameter is set to 1, the function changes the "display" property of the element to "inline". Otherwise, the "display" property remains unchanged.

Note: In order to use this function, you need to declare the initial opacity of the element. Optionally, the initial "display" property of the element can be set to "none" and you can use the "flow" parameter to change the value of this property to "inline" before the element starts fading in.

2.3. agawebs_buzz (obj_id)

ParameterDescription
obj_idThe id of the element which will buzz.

Note: In order to use this function, the element has to have an initial 10 pixel margin.

Surely, the functions can be used within other JavaScript functions. However, a simple way of calling them is by using event attributes for the HTML elements on your pages. A comprehensive list of event handlers can be found on the w3schools site and below you'll find several examples for implementing these effects.

3.1. JavaScript fade image out on the click of a button

In this example, the agawebs_fade_out () function is triggered when the button is clicked. This causes an "HTML fade images out" visual effect and you can check it out by pressing the button below.

emoticon in love

Source code

As you can see from the source code, this is the easiest way of using this function. All the optional parameters were left out and the only one I used was the id of the image.

It is important to note that the image id is encased in single quotes, while the function is encased in double quotes.

  1. <input type="button" value="Click me!" onclick="agawebs_fade_out('adore1')" />
  2. <img src="128/Adore.png" id="adore1" />

3.2. JavaScript fade image in on the click of a button

An opposite example to the one above. Press the button below to check out the "HTML fade images in" effect.

cool emoticon

Source code

Again, the JavaScript fade image function is used in its simplest form and, as before, the id of the HTML fade in element is encased in single quotes.

The difference is that I declared an initial value of 0 for the image opacity in order for the "HTML fade images in" effect to work – as noted in section 2.2.

  1. <style type="text/css">
  2. #cool1 {
  3. opacity: 0;
  4. filter: alpha(opacity=0);
  5. }
  6. </style>
  7. <!-- this style definition goes in the <head> section of
  8. the page -->
  9. <input type="button" value="Click me!" onclick="agawebs_fade_in('cool1')" />
  10. <img src="128/Cool.png" id="cool1" />

3.3. Image buzzes on the click of a button

crying emoticon

Source code

The agawebs_buzz () function is very easy to use, but the HTML element has to have an initial 10 pixel margin – as noted in section 2.3. In this example, I used an inline style declaration to create the required margin.

  1. <input type="button" value="Click me!" onclick="agawebs_buzz('cry1')" />
  2. <img src="128/Cry.png" id="cry1" style="margin: 10px" />

3.4. agawebs_buzz() triggered by the "onmouseover" event

Unlike the previous examples, in this one I used the image itself to trigger the HTML buzz effect. Hover your mouse cursor over the emoticons below to make them shake.

small emoticon in love small cool emoticon small crying emoticon
small evil emoticon small laughing emoticon small blushing emoticon
small army emoticon small geek emoticon small angel emoticon

Source code

This time, I used an "internal style sheet" to create the required 10 pixel margin for the images. Apart from that, I replaced the literal id of each image with the "this.id" variable and left out the single quotes.

  1. <style type="text/css">
  2. .10p_margin { margin: 10px; }
  3. </style>
  4. <!-- this style definition goes in the <head> section of
  5. the page -->
  6. <img src="64/Adore.png" id="adore2" class="10p_margin" onmouseover="agawebs_buzz(this.id)" />
  7. <img src="64/Cool.png" id="cool2" class="10p_margin" onmouseover="agawebs_buzz(this.id)" />
  8. <img src="64/Cry.png" id="cry2" class="10p_margin" onmouseover="agawebs_buzz(this.id)" />
  9. <img src="64/Furious.png" id="furious2" class="10p_margin" onmouseover="agawebs_buzz(this.id)" />
  10. <img src="64/Laugh.png" id="laugh2" class="10p_margin" onmouseover="agawebs_buzz(this.id)" />
  11. <img src="64/Pudently.png" id="pudently2" class="10p_margin" onmouseover="agawebs_buzz(this.id)" />
  12. <img src="64/Struggle.png" id="struggle2" class="10p_margin" onmouseover="agawebs_buzz(this.id)" />
  13. <img src="64/Study.png" id="study2" class="10p_margin" onmouseover="agawebs_buzz(this.id)" />
  14. <img src="64/Sweet-angel.png" id="sweet2" class="10p_margin" onmouseover="agawebs_buzz(this.id)" />

3.5. Fade in, fade out JavaScript effects for the same image

A JavaScript fade effect is used both for the mouse over and for the mouse out event. Hover your mouse cursor over the emoticons below to trigger the "HTML fade images out and in" effects.

small emoticon in love small cool emoticon small crying emoticon
small evil emoticon small laughing emoticon small blushing emoticon
small army emoticon small geek emoticon small angel emoticon

Source code

  1. <img src="64/Adore.png" id="adore3" onmouseover="agawebs_fade_out(this.id)" onmouseout="agawebs_fade_in(this.id)" />
  2. <img src="64/Cool.png" id="cool3" onmouseover="agawebs_fade_out(this.id)" onmouseout="agawebs_fade_in(this.id)" />
  3. <img src="64/Cry.png" id="cry3" onmouseover="agawebs_fade_out(this.id)" onmouseout="agawebs_fade_in(this.id)" />
  4. <img src="64/Furious.png" id="furious3" onmouseover="agawebs_fade_out(this.id)" onmouseout="agawebs_fade_in(this.id)" />
  5. <img src="64/Laugh.png" id="laugh3" onmouseover="agawebs_fade_out(this.id)" onmouseout="agawebs_fade_in(this.id)" />
  6. <img src="64/Pudently.png" id="pudently3" onmouseover="agawebs_fade_out(this.id)" onmouseout="agawebs_fade_in(this.id)" />
  7. <img src="64/Struggle.png" id="struggle3" onmouseover="agawebs_fade_out(this.id)" onmouseout="agawebs_fade_in(this.id)" />
  8. <img src="64/Study.png" id="study3" onmouseover="agawebs_fade_out(this.id)" onmouseout="agawebs_fade_in(this.id)" />
  9. <img src="64/Sweet-angel.png" id="sweet3" onmouseover="agawebs_fade_out(this.id)" onmouseout="agawebs_fade_in(this.id)" />

3.6. The other way around

Using the JavaScript fade functions in the opposite order could be useful in the case of a navigation menu like the one below. Each image could represent a link button.

Source code

The source code for this example is a bit more complicated, but I've taken this opportunity to demonstrate the use of the other parameters of the fade in, fade out JavaScript functions. I used an "internal style sheet" to set the initial opacity of the images to 30 and then used the same value as the "pi" and "pf" parameter for the agawebs_fade_in () and agawebs_fade_out () functions respectively.

  1. <style type="text/css">
  2. #navigation-disk-holder {
  3. width: 510px;
  4. height: 300px;
  5. margin: 0 auto;
  6. position: relative;
  7. }
  8. #navigation-disk-description {
  9. width: 100px;
  10. height: 39px;
  11. text-align: center;
  12. position: absolute;
  13. top: 118px;
  14. left: 200px;
  15. font-size: 14px;
  16. padding: 25px 0 0 0;
  17. overflow: hidden;
  18. }
  19. #xy001, #xy002, #xy003, #xy004,
  20. #xy005, #xy006, #xy007, #xy008 {
  21. position: absolute;
  22. opacity: 0.3;
  23. filter: alpha(opacity=30);
  24. }
  25. #xy001 { top: 18px; left: 218px; }
  26. #xy002 { top: 47px; left: 289px; }
  27. #xy003 { top: 118px; left: 318px; }
  28. #xy004 { top: 189px; left: 289px; }
  29. #xy005 { top: 218px; left: 218px; }
  30. #xy006 { top: 189px; left: 147px; }
  31. #xy007 { top: 118px; left: 118px; }
  32. #xy008 { top: 47px; left: 147px; }
  33. </style>
  34. <!-- this style definition goes in the <head> section of
  35. the page -->
  36. <div id="navigation-disk-holder">
  37. <img id="xy001" src="64/Adore.png" onmouseover="agawebs_fade_in(this.id, 5, 30, 100); document.getElementById('navigation-disk-description').innerHTML = 'Home';" onmouseout="agawebs_fade_out(this.id, 5, 100, 30); document.getElementById('navigation-disk-description').innerHTML = 'NAVIGATION';" />
  38. <img id="xy002" src="64/Cool.png" onmouseover="agawebs_fade_in(this.id, 5, 30, 100); document.getElementById('navigation-disk-description').innerHTML = 'Contact Info';" onmouseout="agawebs_fade_out(this.id, 5, 100, 30); document.getElementById('navigation-disk-description').innerHTML = 'NAVIGATION';" />
  39. <img id="xy003" src="64/Cry.png" onmouseover="agawebs_fade_in(this.id, 5, 30, 100); document.getElementById('navigation-disk-description').innerHTML = 'Index by Date';" onmouseout="agawebs_fade_out(this.id, 5, 100, 30); document.getElementById('navigation-disk-description').innerHTML = 'NAVIGATION';" />
  40. <img id="xy004" src="64/Furious.png" onmouseover="agawebs_fade_in(this.id, 5, 30, 100); document.getElementById('navigation-disk-description').style.height = '50px'; document.getElementById('navigation-disk-description').style.padding = '14px 0 0 0'; document.getElementById('navigation-disk-description').innerHTML = 'Index by Category';" onmouseout="agawebs_fade_out(this.id, 5, 100, 30); document.getElementById('navigation-disk-description').style.height = '39px'; document.getElementById('navigation-disk-description').style.padding = '25px 0 0 0'; document.getElementById('navigation-disk-description').innerHTML = 'NAVIGATION';" />
  41. <img id="xy005" src="64/Laugh.png" onmouseover="agawebs_fade_in(this.id, 5, 30, 100); document.getElementById('navigation-disk-description').innerHTML = 'Links';" onmouseout="agawebs_fade_out(this.id, 5, 100, 30); document.getElementById('navigation-disk-description').innerHTML = 'NAVIGATION';" />
  42. <img id="xy006" src="64/Pudently.png" onmouseover="agawebs_fade_in(this.id, 5, 30, 100); document.getElementById('navigation-disk-description').style.height = '50px'; document.getElementById('navigation-disk-description').style.padding = '14px 0 0 0'; document.getElementById('navigation-disk-description').innerHTML = 'Apuseni « AgaWebs';" onmouseout="agawebs_fade_out(this.id, 5, 100, 30); document.getElementById('navigation-disk-description').style.height = '39px'; document.getElementById('navigation-disk-description').style.padding = '25px 0 0 0'; document.getElementById('navigation-disk-description').innerHTML = 'NAVIGATION';" />
  43. <img id="xy007" src="64/Struggle.png" onmouseover="agawebs_fade_in(this.id, 5, 30, 100); document.getElementById('navigation-disk-description').style.height = '50px'; document.getElementById('navigation-disk-description').style.padding = '14px 0 0 0'; document.getElementById('navigation-disk-description').innerHTML = 'Blogger « AgaWebs';" onmouseout="agawebs_fade_out(this.id, 5, 100, 30); document.getElementById('navigation-disk-description').style.height = '39px'; document.getElementById('navigation-disk-description').style.padding = '25px 0 0 0'; document.getElementById('navigation-disk-description').innerHTML = 'NAVIGATION';" />
  44. <img id="xy008" src="64/Study.png" onmouseover="agawebs_fade_in(this.id, 5, 30, 100); document.getElementById('navigation-disk-description').style.height = '64px'; document.getElementById('navigation-disk-description').style.padding = '0'; document.getElementById('navigation-disk-description').innerHTML = '<img src="64/Sweet-angel.png" />';" onmouseout="agawebs_fade_out(this.id, 5, 100, 30); document.getElementById('navigation-disk-description').style.height = '39px'; document.getElementById('navigation-disk-description').style.padding = '25px 0 0 0'; document.getElementById('navigation-disk-description').innerHTML = 'NAVIGATION';" />
  45. <div id="navigation-disk-description">NAVIGATION</div>
  46. </div>

3.7. Breaking the flow

This example is meant to demonstrate the use of the "flow" parameter for the fade in, fade out JavaScript functions. When you click the evil emoticon the angel enters the normal flow of the page pushing the other image to the left and then slowly fading in. When you click the angel emoticon, the evil one fades out and is then removed from the normal flow of the page, making the angel slide towards the center.

I'm not sure how useful this is, but the fade in, fade out effects from jQuery and script.aculo.us both have this feature, so I added it to my functions as well.

evil emoticon

Source code

Notice that the "step" parameter for both functions has the value 2, making the images fade slower than the previous examples. I used an inline style declaration to set the initial opacity of the angel to 0 and its "display" property to "none".

  1. <img src="128/Furious.png" id="furious1" onclick="agawebs_fade_in('sweet1', 2, 0, 100, 1)" />
  2. <img src="128/Sweet-angel.png" id="sweet1" style="opacity: 0; filter: alpha(opacity=0); display: none" onclick="agawebs_fade_out('furious1', 2, 100, 0, 1)" />

3.8. Text fader for a rotating paragraph

The fade in, fade out JavaScript functions can be used to create a "text fader" for a paragraph which changes its content regularly. In this example, the first transition occurs after 10 seconds and then the paragraphs change back and forward every five seconds.

laughing emoticon Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis, unde omnis iste...

blushing emoticon At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus...

Source code

I used the setTimeout () and setInterval () methods to control timing. Notice that the fade in, fade out JavaScript effects have to be applied to the images as well - otherwise, this would only work in Firefox.

  1. <div style="text-align: justify; height: 130px; position: relative">
  2. <p id="rotating-para1" style="position: absolute; top: -10px">
  3. <img src="128/Laugh.png" id="laugh1" style="float: left; margin: 0 20px 0 0" />
  4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis, unde omnis iste...
  5. </p>
  6. <p id="rotating-para2" style="position: absolute; opacity: 0; filter: alpha(opacity=0); top: -10px">
  7. <img src="128/Pudently.png" id="pudently1" style="float: right; opacity: 0; filter: alpha(opacity=0); margin: 0 0 0 20px" />
  8. At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus...
  9. </p>
  10. <script type="text/javascript">
  11. function ag_switch() {
  12. setTimeout("agawebs_fade_out('rotating-para1', 5, 100, 0)", 0);
  13. setTimeout("agawebs_fade_out('laugh1', 5, 100, 0)", 0);
  14. setTimeout("agawebs_fade_in('rotating-para2', 5, 0, 100)", 500);
  15. setTimeout("agawebs_fade_in('pudently1', 5, 0, 100)", 500);
  16. setTimeout("agawebs_fade_out('rotating-para2', 5, 100, 0)", 5000);
  17. setTimeout("agawebs_fade_out('pudently1', 5, 100, 0)", 5000);
  18. setTimeout("agawebs_fade_in('rotating-para1', 5, 0, 100)", 5500);
  19. setTimeout("agawebs_fade_in('laugh1', 5, 0, 100)", 5500);
  20. }
  21. setInterval("ag_switch()", 10000);
  22. </script>
  23. </div>

4. Compatibility & Support

These JavaScript functions work for virtually any HTML object. I've only encountered problems with fading embedded Flash objects, but that's quite normal. The functions have been tested in the following browsers:

  • Firefox v.3
  • IE v.7 and v.8
  • Google Chrome v.7
  • Opera v.10 and v.11
  • Safari v.5

For support and help with implementing these effects on your site or blog, don't hesitate to contact me by email or by writing a comment. Also, please post your feedback or any suggestions you may have.

11 comments:

  1. your web so usefully my friend, nice to meet you
    Beben si bloglang anu ganteng kalem tea \m/

    ReplyDelete
  2. hey very very good explanations and cool tutorial..

    ReplyDelete
  3. great tutorial :)
    thnx

    ReplyDelete
  4. Surely line 6 in section 3.8. should say <p id="rotating-para2" etc
    Haven't looked at the rest

    ReplyDelete
  5. Wow... than you for pointing that out - you're awesome.

    Cheers,
    /andrei_aga

    ReplyDelete
  6. nice tutorial,i will try this at my site :D it's cool, thanks

    ReplyDelete
  7. nice ....its cooooool...

    ReplyDelete
  8. I really like all the functions about Java Script which you have posted here. Sounds like a reality based compromise with creatively contemplating the future. Take your dreams in the context you are in and make them happen! Good Luck….!!

    ReplyDelete

Note: Only a member of this blog may post a comment.