Introdução
moo.fx é uma biblioteca de efeitos em javascript muito leve (3kb)
que permite acrescentar efeitos espectaculares em qualquer site,
rapidamente e com muito pouco trabalho.
Funciona em qualquer
browser, incluindo o IE, e não exige conhecimentos de programação. É
evidente que se os tiver, nomeadamente em javascript e css, poderá
alterar os códigos a seu gosto e assim obter efeitos mais
personalizados.
O que é preciso
prontos a meter a mão na massa.
Façam o download dos ficheiros moo.fx.js
e prototype.lite.js
Para o exemplo que quero demonstrar neste artigo, sigam para
mootools.
"Percam" mais um bocadinho de tempo a ler a documentação, o que
pode ajudar bastante.
Exemplo do harmónio
Vão à página do
Acordeão do mootools,
vejam a demonstração a funcionar, e depois façam o download do
exemplo.
Descomprimam a pasta.
Em seguida só têm que fazer
o upload dos ficheiros moo.fx.js e prototype.lite.js (estes
ficheiros serão necessários para todos os efeitos que queiram pôr em
prática) para o vosso
servidor, ou para um gratuito, como o
ripway, por exemplo.entre <head> e </head> da vossa página html (onde
convém modificar os nomes dos ficheiros que refiro no parágrafo
anterior (por exemplo para dAcordeon.css e dAcordeon.js) uma vez que
os downloads que eles nos proporcionam, têm todos os mesmos nomes,
apesar de conteúdo diferente.
Seguidamente escrevam:
<link href='http://www.cei-esas.com.pt/Uploads/luisj/dAcordeon.css'
rel='stylesheet' type='text/css'/>
<script src='http://www.cei-esas.com.pt/Uploads/luisj/mootools.js'
type='text/javascript'/>
<script src='http://www.cei-esas.com.pt/Uploads/luisj/dAcordeon.js'
type='text/javascript'/>
entre <head> e </head> da vossa página HTML (ondequerem aplicar o efeito).
Nota Importante:
http://www.cei-esas.com.pt/Uploads/luisj/ deve ser substituído pelo
endereço do vosso servidor, onde colocaram os ficheiros. Devem notar
ainda que o nome dos ficheiros (dAcordeon.css e dAcordeon.js) já
estão como eu os modifiquei. Caso não os tenham modificado depois da
descompressão, serão demo.css e demo.js
Além disso, caso não
tenham um servidor onde alojar os ficheiros, podem usar o meu, que
já estão os ficheiros necessários, caso em que o código que devem
colocar no vosso cabeçalho html é exactamente igual às 3 linhas
acima.
Finalmente editem o ficheiro descomprimido index.html,
alterem os conteúdos e o nome das barras a vosso gosto e publiquem a
página.
E já está. Tudo deve funcionar na perfeição.
Nota final
questões nos comentários, por favor.
Se utilizou este tutorial,
ficaríamos bastante satisfeitos que o mencionasse no seu site/blog.
Obrigado.
