How to make a great intro in javascript using MooTools

FIRST OF ALL THE DEMO :)

http://www.moonkiki.com/kiki/

See a related video here:

"link to ictv"

Download the code from here:

"link to zip package"

And now a little explanation 

(the following text is a translation from the tab "trascrizione" at this page: "link to ictv" Seeing video and downloading code "link to zip package" can help you if you don't understand somenthing.  (Contact me for any question: tempozero at gmail.com )

We include two javascript framework used to manage the animations. We have chosen to include MooTools and moord. 

Subsequently we have in other sections that identify each area of our scene. In our case we will create a div container and place it into the sky, the sea, the sun and the moon. These distinct areas also add a div called msg that include the message that we propose in our animated intro. 


<div Id="sky"> 
<div id="msg"> <br> <br> <br> <br> <br> One slogan effect ...</ div> 
</ Div> 
<div Id="moon"> 

</ Div> 
<div Id="sun"> 

</ Div> 
<div Id="sea"> 
<br> <br> <br> <br> <br> <br> 
<a Href="#" style="color:white"> Skip </ a> 
</ Div> 
</ Div> 

An intro lasts several seconds, but not necessarily a user must be linked to vision. That is why we put a tag in the ocean-type link that contains a link to that then it will be the first page of our website. In this way we will create the typical effect of Skip to the intro. 

<a href="#" style="color:white"> Skip </ a> 

Using a wise and intuitive use of this information places the style elements of our animation at the point that we prefer. Heaven, earth, sun and moon can stack and deploy in a simple way by using size and margin attributes. 

body ( 
Background: # 000000; 
) 

# (Sea 
background: transparent url (img / sea.gif) no-repeat; 
Position: absolute; 
Width: 800px; 
Height: 304px; 
Text-align: right; 
Z-index: 100; 
Margin-top: 400px; 
Font-size: 18px; 

Color: gray; 
) 

# (Sun 
background: transparent url (img / sun.png) top no-repeat; 
Width: 188px; 
Height: 182px; 
Z-index: 50; 
Position: absolute; 
Margin-top: 340px; 

) 

# (Moon 
background: transparent url (img / moon.png) top no-repeat; 
Width: 188px; 
Height: 182px; 
Z-index: 50; 
Position: absolute; 
Margin-top: 40px; 
Margin-left: 400px; 
Display: none; 
) 

# Sky ( 
background: transparent url (img / starnight.png) no-repeat; 
Width: 800px; 
Height: 400px; 
Position: absolute; 
) 

# Container ( 

Font-style: Verdana Helvetica; 
Font-size: 12px; 
Width: 800px; 
Margin: 0px auto; 

) 

# Msg ( 

Font-style: Verdana Helvetica; 
Font-size: 22px; 
Text-align: center; 
Color: gray; 
) 

The stylesheet can pay particular attention all'attributo position that we put equal to absolute. In this way, the div with id equal to the one described in the CSS on the page are placed in absolute position, exploiting the information margin, widtht and height. The container is placed exactly in the middle of the page because 'we used the same margin to auto. This directive instructs the browser to automatically place an item in the center of the div that contains the item in question. The opposite of absolute positioning is relative, that the browser places the item in relation to others, adding to margin attributes to those that are proceeding. Usually it is better to use relative positions and sizes as a percentage, in this way on any monitor and with any resolution, our site will distribute better. In this case we need 'that every element was in exactly the position where he was wanted in an absolute manner. 
In using some javascript effects made available by the plugin moord and a couple of instructions that are provided by MooTools framework. In particular we will see the object in MooTools Chain. This object allows us to connect several functions in succession, or the scenes of our animation. Get the messages, the sun rise, then the sun and the moon. 

var myChain = new Chain (); 

To unleash a succession of scenes and call chain, use setInterval instead Education. This function receives two arguments: the first and 'a string containing the instruction to perform more de' times consecutively, the second represents the milliseconds to wait between execution and the next. In our case, for instance, the images follow one another every two seconds launches a call callChain. 

var callCh = window.setInterval ( "myChain.callChain ()", 2000); 

Moord to use its influence Gradient to brighten the sky darkened at dawn and dusk, and the effect that Move through simple x and y coordinates moves smoothly a div or other element from the position in which it is expressed as to argument of the function move. 

var = new Fx.Gradient sky ( 'sky', (duration: 1000)); 

var rising = function () (sky.start ([ '# 000000', '# 44CCCC', '# 66FFFF'])}; 
var risingout = function () (sky.start ([ '# 66BDBDB', '# 88AAAA', '# CC6666', '# 000000'])); 


var moveW = new Fx.Move ( 'sun', (duration: 4000, link: 'chain')); 

Create animations for the intro is just one of the features that we offer these javascript. With images with transparent background and a 'can do fancy flying airplanes, poetry and scroll through the planets move without limits to our possibilities.

And again:

DEMO :)

http://www.moonkiki.com/kiki/

video:

"link to ictv"

Download:

"link to zip package"

Nunzio Fiore