Creare un bottone animato per i nostri form
Con l’impiego di jQuery e CSS si possono ottenere degli interessantissimi effetti grafici ed estetici, oltre che funzionali; con questo tutorial spiegherò come riuscire a creare un’animazione di movimento sul bottone d’invio dei nostri form di contatto.
Ecco qui un esempio per rendere subito l’idea.
Ok, il nostro obiettivo é abbastanza semplice, perchè vogliamo un’icona che saltella un paio di volte quando ci si passa sopra con il mouse, quindi con effetto hover.
Il bottone di per se è costituito da un link che contiene un’immagine del nostro bottone e un testo.
<a class="button-send" href="#"><img src="send.png" alt="" />Invia</a>
Adesso ci concentreremo sul CSS:
.button-send {
padding: 4px 10px 3px 25px;
border: solid 1px #8AB134;
position: relative;
cursor: pointer;
display: inline-block;
background: url('bg.png') repeat-x;
font-size: 11px;
height: 16px;
text-decoration: none;
color: #40740D;
-moz-border-radius: 5px;
-webkit-border-radius:5px;
}
.button-send img {
position: absolute;
top: -4px;
left: -12px;
border: none;
}
.button-send:hover { color: #8AB134;}
Ho creato una classe che imposta e controlla ovviamente padding, bordi e posizione; la proprietà interessante da notare è la scelta di cursor: pointer, questo perchè cambiando il valore della proprietà possiamo impostare differenti stili. Impostando questa proprietà in maniera non corretta si può confondere l’utente, quindi fate attenzione.
Altra nota interessante è la scelta di voler creare il nostro bottone con angoli arrotondati implementando CSS3 con browser che lo supportano, Mozilla/Firefox e Chrome/Safari/Webkit, al tal proposito ho scelto di utilizzare le proprietà -moz-border-radius: 5px; e -webkit-border-radius: 5px; che imposta un angolo arrotondato di 5px.
Le altre impostazioni servono per posizionare l’immagine che salterà all’interno del bottone e l’effetto :hover sul link.
Adesso ci concentriamo sull’animazione del nostro bottone. Richiamiamo nella nostra pagina il collegamento a jQuery e lo posizioniamo all’interno del tag <head>:
<head>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
</head>
a questo punto pensiamo a creare l’animazione vera e propria decidendo che al passaggio del mouse sul bottone l’icona effettui un balzo, ovviamente per rendere il tutto più credibile il saltello deve essere graduale, con il primo più alto e i successivi più bassi.
<script type="text/javascript">
$(document).ready(function(){
$(".button-send").hover(function(){
$(".button-send img")
.animate({top:"-10px"}, 200).animate({top:"-4px"}, 200) // primo salto
.animate({top:"-7px"}, 100).animate({top:"-4px"}, 100) // salto salto
.animate({top:"-6px"}, 100).animate({top:"-4px"}, 100); // ultimo salto
});
});
</script>
Copiamo e incolliamo questo codice prima della chiusura del tag <head>. Il codice crea una funzione sull’elemento .button-send al momento dell’hover (passaggio del mouse) e come risposta fa saltare l’immagine prima di 10px, poi di 7px e infine di 6px.
Articolo interessantissimo..
Grazie mille!!