Scarica l'articolo in formato PDF

Oggi vi propongo una alternativa al classico effetto Hover sulle parole di un ipotetico menu. Andremo a creare un piacevole effetto scorrimento sulle lettere. Come al solito la fonte è l’ottimo tympanus.

jQuery sliding letters

Useremo il Plugin jQuery Lettering.js.

Vediamo come utilizzarlo:

Importiamo il necessario (facendo attenzione ai percorsi):

1
2
3
4
5

 <link rel="stylesheet" type="text/css" href="css/style.css" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery.lettering.js"></script> 
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script> 
<script type="text/javascript" src="js/jquery.hoverwords.js"></script>

Codice Html:

1
2
3

<div class="sl_examples">
	<a href="#" id="example1" data-hover="Creativity">Illustrations</a>
</div>

Come si può vedere utilizziamo data-hover per specificare la parola che dovrà comparire all’hover. Se non viene specificato il data-hover verrà utilizzata la stessa parola.

Codice css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

.sl_examples{
	float:left;
	font-family: 'Bevan', arial, serif;
	font-size:50px;
	line-height:50px;
	color:#f0f0f0;
	margin-right:5px;
	text-transform:uppercase;
}
.sl_examples a{
	display:block;
	position:relative;
	float:left;
	clear:both;
	color:#fff;
}
.sl_examples a > span{
	height:50px;
	float:left;
	position:relative;
	overflow:hidden;
}
.sl_examples a span span{
	position:absolute;
	display:block;
	left:0px;
	top:0px;
	text-align:center;
}
.sl_examples a span span.sl-w1{
	color:#fff;
	text-shadow:0px 0px 1px #fff;
	z-index:2;
}
.sl_examples a span span.sl-w2{
	color:#e82760;
	text-shadow:-1px 1px 2px #9f0633;
	z-index:3;
}

Infine richiamiamo il plugin con jQuery:

1
2
3

$(window).load(function(){
	$('#example1').hoverwords({ delay:50 });
});

Ovviamente possiamo personalizzare alcuni aspetti:

1
2
3
4
5
6

delay		: false,		// tutte le lettere hanno una durata dell'animazione diversa
speed		: 300,			// velocità animazione
easing		: 'jswing',		// animazione easing
dir			: 'leftright', 	// direzione animazione
overlay		: false,		// la parola hover viene fatta scorrere sopra la parola corrente (caso in cui data-hover non specificato)
opacity		: true			// animazione sull'opacità

Visualizza una demo da qui.
Scarica un esempio da qui.

Ti piace questo plugin? Lo utilizzerai per qualche tuo progetto?

[adsense]