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.
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]
Lascia un commento