<pedrocorreia.net ⁄>
corner
<mySearch ⁄> <mySearch ⁄>

corner
 
corner
<mySnippets order="rand" ⁄> <mySnippets order="rand" ⁄>

corner
 
corner
<myContacts ⁄> <myContacts ⁄>

<email ⁄>


pc@pedrocorreia.net

<windows live messenger ⁄>


pedrojacorreia@hotmail.com

<myCurriculum type="pdf" ⁄>


Download
corner
 
corner
<myBlog show="last" ⁄> <myBlog show="last" ⁄>

corner
 
corner
<myNews show="rand" ⁄> <myNews show="rand" ⁄>

corner
 
corner
<myNews type="cat" ⁄> <myNews type="cat" ⁄>

corner
 
corner
<myQuote order="random" ⁄> <myQuote order="random" ⁄>

O que importa antes de tudo é o momento presente. O momento presente é o criador do seu amanhã. Somos escravos do ontem, mas somos dono do nosso amanhã.
corner
 
corner
<myPhoto order="random" ⁄> <myPhoto order="random" ⁄>

<pedrocorreia.net ⁄>
corner
 
corner
<myAdSense ⁄> <myAdSense ⁄>

corner
 
corner
<myVisitorsMap ⁄> <myVisitorsMap ⁄>

corner
 
<php ⁄><asp.net ⁄><vb.net ⁄><csharp ⁄><actionscript ⁄><sql ⁄>

<javascript ⁄><vb6 ⁄><vba ⁄><xml ⁄><css ⁄><asp ⁄>

 

<Javascript SlideDown and Toggle Animations ⁄ >




clicks: 2354 2354 2010-07-28 2010-07-28 goto mySnippets mySnippets javascript  Download  Bookmark This Bookmark This



 
A few months ago I talked about JavaScript animations, in this snippet I'll give two more examples about this area.

I won't use a framework, it'll be plain and simple JavaScript.

It'll be two fairly simple animations and easily customized by you.


The first example will be an image animation from the top until the middle of the window visible area; the second on will be a toggle animation on mouse hover... you'll see these animations at end of this snippet.


There's nothing more to talk about this snippet, so let's just start coding ^_^''



style.css, in here we'll define the layout and image backgrounds, you should customize this css to your own needs, for instance, the images you have certainly have different dimensions, etc

  1. #slidebar{ overflow: hidden; }
  2. #slidebar a{ display: block; background-repeat: no-repeat; outline: none; }
  3. #slidebar a.top{ background-image: url("bg.png"); z-index: 1; width: 125px; }
  4. #slidebar a.bottom{ background-image: url("bg2.png"); right: -160px; }
  5. #slidebar ul{ display: inline; list-style: none; }
  6. #slidebar, #slidebar a{ height: 83px; position: absolute; right: 0; top: 0; }
  7. #slidebar, #slidebar .bottom{ width: 160px; }








DummyAnimations.js, our class, responsible for all the animations, comments, thorough the code, are explanatory

  1. /**
  2. * Javascript SlideDown and Toggle Animations
  3. *
  4. * @return Function SlideMiddle
  5. * @return Function Toggle
  6. * @author pedrocorreia.net
  7. */
  8. var DummyAnimations = function() {
  9.  
  10.   var 
  11.     /**
  12.       * Get html element reference
  13.       *
  14.       * @param String Html ID
  15.       * @return Object
  16.     */
  17.     $ = function(o) { return document.getElementById(o) || null; },
  18.  
  19.     /**
  20.       * Get browser viewport height
  21.       *
  22.       * @return Int
  23.     */
  24.     _view_height = function() {
  25.       return window.innerHeight || document.documentElement.clientHeight || document.getElementsByTagName('body')[0].clientHeight;
  26.     }, end _view_height
  27.  
  28.     /**
  29.       * SlideDown object from top to center of browser window
  30.       *
  31.       * @param Object Html element
  32.       * @param Int Value to increment
  33.       * @param Int Speed
  34.       * @param Int To position
  35.       * @param Int Current position
  36.     */
  37.     _Slide_Middle = function(o, step, speed, to, value) {
  38.       var 
  39.         el = (typeof o === "object") ? o : $(o),
  40.         value = value || 0,
  41.         to = to || ((_view_height() - el.offsetHeight) / 2),
  42.  
  43.         /**
  44.         * SlideDown Animation
  45.         *
  46.         * @param Int Current position
  47.         */
  48.         _animate = function(value) {
  49.           var 
  50.             self = arguments.callee,
  51.             interval = setTimeout(function() {
  52.               if (value < to) {
  53.                 value += step;
  54.                 el.style.top = value + "px";
  55.                 self(value);
  56.               }
  57.               else {
  58.                 clearTimeout(interval);
  59.               }
  60.             }, speed);
  61.         } (value);
  62.     }, //end _Slide_Middle
  63.  
  64.     /**
  65.       * Toggle
  66.       *
  67.       * @param Object Html element
  68.       * @param Object Html element to toggle
  69.       * @param Int Value to increment
  70.       * @param Int Animation speed
  71.     */
  72.     _ToggleBackground = function(o, o_bottom, step, speed) {
  73.       var 
  74.         el = (typeof o === "object") ? o : $(o),
  75.         el_bottom = (typeof o_bottom === "object") ? o_bottom : $(o_bottom),
  76.         el_width = el.offsetWidth,
  77.         el_bottom_width = el_bottom.offsetWidth,
  78.  
  79.         /**
  80.           * Toggle animation
  81.           *
  82.           * @param Int Value to increment
  83.           * @param Int Animation speed
  84.           * @param Int Width
  85.           * @param Object Element to hide
  86.           * @param Object Element to show
  87.           * @param Int Current position
  88.         */
  89.         _animate = function(step, speed, _width, _el_hide, _el_show, value) {
  90.           var 
  91.             value = value || 0,
  92.             self = arguments.callee,
  93.             interval = setTimeout(function() {
  94.               if (value > -_width) {
  95.                 value -= step;
  96.                 _el_hide.style.right = value + "px";
  97.                 _el_show.style.right = Math.abs(value) - _width + "px";
  98.                 self(step, speed, _width, _el_hide, _el_show, value);
  99.               }
  100.               else {
  101.                 clearTimeout(interval);
  102.               }
  103.             }, speed);
  104.     }; //end _ToggleBackground
  105.  
  106.     el.onmouseover = function(e) {
  107.       e = e || window.event;
  108.       _animate(step, speed, el_width, el, el_bottom);
  109.     }; //end el.onmouseover
  110.  
  111.     el_bottom.onmouseout = function(e) {
  112.       e = e || window.event;
  113.       _animate(step, speed, el_bottom_width, el_bottom, el);
  114.     }; //end el_bottom.onmouseout
  115.  
  116.     el.onclick = function(e) {
  117.       e = e || window.event;
  118.       if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; }
  119.     }; //end el.onclick
  120.  
  121.     el_bottom.onclick = function(e) {
  122.       e = e || window.event;
  123.       alert("Your code goes here....");
  124.       if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; }
  125.     };
  126.   }; //end el_bottom.onclick
  127.  
  128.   return { SlideMiddle: _Slide_Middle, Toggle: _ToggleBackground };
  129.  
  130. } (); //end DummyAnimations




Init.js, two short examples with DummyAnimations.js

  1. window.onload = function() {
  2.  
  3.   // Slide Animation from Top to Middle
  4.   DummyAnimations.SlideMiddle("slidebar", 25, 50);
  5.  
  6.   // Toggle pictures
  7.   DummyAnimations.Toggle("top", "bottom", 5, 25);
  8.  
  9. };








Our html file

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" >
  3. <head>
  4.     <title>Javascript SlideDown and Toggle Animations</title>
  5.  
  6.     <link rel="stylesheet" href="style.css" />
  7.     <script type="text/javascript" src="DummyAnimations.js"></script>
  8.     <script type="text/javascript" src="Init.js"></script>
  9.  
  10. </head>
  11.  
  12. <body>
  13.  
  14.   <div id="slidebar">
  15.  
  16.     <ul>
  17.       <li><a href="#" class="top"></a></li>
  18.       <li><a href="#" class="bottom"></a></li>
  19.     </ul>
  20.  
  21.   </div>
  22.  
  23. </body>
  24. </html>




Here's a demo of this script:











If you have any doubt or found any error, please drop me an email.



 






clicks: 2354 2354 2010-07-28 2010-07-28 goto mySnippets mySnippets javascript  Download  Bookmark This Bookmark This