Cydia Sources Japanese

a particular header: # 1 animated clouds

Demo	This particular effect makes the header of our blog / web site in an added attraction. I implement Z-Graphics and I've heard from some visitors who get to play with the clouds:) (although in this part of the tutorial will discuss how to put the animation).

The library that we use to add movement is called $ fx and free downloads. The first thing to do is download it to our computer and upload to any server, once done this should be added to the template:

\u0026lt;script type = "text / javascript" src = "url" fx.js " > \u0026lt;/ script>

We (Ctrl + f) tag: \u0026lt;/ head> and paste just before The following JavaScript code:

 
 \u0026lt;script type="text/javascript"> var ani = {
  var_nube1 : 
 {type: 'left', 
 from: 5, 
 to: screen.availWidth , 
 step: 1, 
 delay: 50 
} 
 var_nube2  : 
 {type: 'left', 
 from: 0, 
 to: screen.availWidth, 
 step: 1, 
 delay: 100, 
 OnStart : function () {
 this.style.display = 'block';} 
 
} 
 var_nube3  : 
 {type: 'left', 
 from: 600, 
 to: screen.availWidth, 
 step: 1, 
 delay: 100, 
 OnStart: function () {
 this.style.display = 'block'; 
 
}}} 
; 
 
 startAnimation   function () {$ 
 fx (' #  nube1  '). fxAdd (ani.  var_nube1 ). fxRun (null, -1); 
 $ fx (' #  nube2  '). fxAdd (ani.  var_nube2 ). fxRun (null, - 1); 
 $ fx ('#  nube3 '). fxAdd (ani.  var_nube3 ). fxRun (null, -1);} 
 
 
 \u0026lt;/ script> 
 

What we just did is to create each of the variables needed every cloud, ie define the type of movement (from left to right: left) from where the animation should start, as far as the animation must be: screen.availWidth regards the width of the window, and the speed with that will move the cloud. Following
paste this code must also styles

 \u0026lt;style type="text/css"> 
 #  nube1  
 {position: absolute; 
  top: 5%;  
  left: 5%;  
 width: 125px; 
 height: 67px; 
 filter: alpha (opacity = 5); 
-moz-opacity: .5; 
 opacity: .5} 
 # 
  nube2  
 {position: absolute; 
  top: 10%;  

  left: 15%;  
 width: 125px; 
 height: 67px; 
 filter: alpha (opacity = 7); 
 - moz-opacity: .7; 
 opacity: .7 
} # 
  nube3  
 {position: absolute; 
  top: 20%;  
  right: 5%;  
 width: 125px; 
 height: 67px ; 
 filter: alpha (opacity = 7); 
-moz-opacity: .7; 
 opacity: .7 
 
} \u0026lt;/ style> 
 

For each layer (# nube1 , # nube2 and # nube3 ) defines a width (width), high (height) and position: top and left. if the animation was from right to left position is not given by left but by right. attributes filter: alpha (opacity = 7);-moz-opacity: .7; opacity: .7 refer to the opacity of the layer, defined three because not all browsers use the same.

Animation locate the clouds appear where, in this case must be at the top of the blog, but as we have defined we can put absolutely positioned just below the \u0026lt;body>:

\u0026lt;div id = " nube1 "> \u0026lt;img src = "images / nube.png " /> \u0026lt;/ div> \u0026lt;div id="
nube2 "> \u0026lt;img src="images/ nube2.png /> \u0026lt; ; / div> \u0026lt;div id="
nube3 "> \u0026lt;img src="images/ nube.png /> \u0026lt;/ div>

One last thing: to make the animation work we call it, the methods may be found in the documentation for the library but complications do not enter the call from the body by replacing \u0026lt;body> \u0026lt;body onload=" startAnimation ();">

Demo Download

. Rar