Realizato da

Pubblicato il

jQuery

JavaScript

Front-end

Animazione


Questo tutorial ti mostrerà come creare uno o più link nella tua pagina web, i quali, in seguito ad un click, scrolleranno verticalmente il tuo browser in modo animato.
Per ottenere questo effetto di scroll verticale su click di un link, utilizzeremo il plugin di jQuery chiamato MagicNav.js

Il codice per il plugin da includere nel tuo file HTML lo puoi scaricare dalla repository di GitHub di MagicNav.js

MagicNav.js ti permette di creare questi link dinamici e verticalmente scorrevoli, utilizzando una sola funzione che accetta due parametri.

  1. L’elemento HTML che attiverà lo scroll verticale su click del mouse.
  2. L’elemento HTML che sarà il punto di arrivo dello scroll verticale.

Questa funziona è:

$.MagicNav($('#article-nav'),$('article h1'));

Volendo si può usare la versione più personalizzata di MagicNav, passando tre parametri a questa funzione, ovvero: Un oggetto JavaScript che contiene alcuni parametri come velocità e la morbidezza di scroll.

Ecco un esempio della funzione con il terzo parametro:

$.MagicNav($('#article-nav'),$('article h1'),{
titles: 'data-title',
ease: function (x, t, b, c, d) {
// easeOutQuad
return -c *(t/=d)*(t-2) + b;
},
duration: 500,
offset: -60
});

I parametri che si possono passare sono:

  • title: La parola da mostrare del link cliccabile.
  • ease: La morbidezza dello scorrimento verticale
  • duration: La lunghezza in milli secondi dello scroll verticale.
  • offset: La distanza in pixel, da cui il browser si dovrà fermare prima, o dopo il target.

Spero ti sia piaciuto il tutorial e se lo hai trovato di aiuto, non dimenticare di inscriverti alla newsletter.
Inoltre mi aiuteresti molto mettendo mi piace e condividendolo su Facebook. Grazie mille e alla prossima.

Se hai una domanda puoi chiedere qualsiasi cosa nei commenti in basso

Grazie per aver letto questa guida su Devnews.it

Spero ti sia stata utile in qualche modo. Ti prego di supportare questa pagina mettendo mi piace alle nostre pagine social cliccando un basso, dove pubblichiamo regolermente notizie, tutorial e fatti curiosi sull'informatica. Grazie e ci vediamo alla prossima :)