Scorrimento fluido delle pagine con jquery. Come rendere fluido lo scorrimento verso un'ancora

E quindi, scopriamo prima cosa sono i link di ancoraggio o solo le ancore. I link di ancoraggio sono link che portano il visitatore in punti specifici della pagina. Al suo interno, è come i segnalibri. Se la pagina è grande e, di fatto, è divisa in blocchi diversi, puoi fare in modo che il visitatore possa andare immediatamente nella parte della pagina desiderata senza utilizzare uno scroll.

Tali collegamenti di ancoraggio sono spesso utilizzati nelle pagine FAQ.... In tali pagine, ci sono molti punti diversi con le risposte alle domande più frequenti. Per non scorrere manualmente l'intero testo, queste domande sono poste all'inizio con i collegamenti al paragrafo desiderato. Tali collegamenti di ancoraggio vengono spesso utilizzati anche nelle pagine di destinazione (pagine di destinazione). Uso spesso anche tali ancore nelle pagine di destinazione, se il cliente lo chiede. Le pagine di destinazione sono spesso lunghe e quindi tali ancore non sono un cattivo aiuto.

Un esempio di come funzionano tali collegamenti può essere trovato in questa pagina:

Nel nostro caso, questo è un semplice blocco div. Fondamentalmente, per una semplice transizione, è tutto. Quando si fa clic su tale collegamento, il visitatore verrà immediatamente reindirizzato alla parte della pagina in cui si trova il blocco con l'ancora.

Per implementare un movimento fluido lungo gli ancoraggi, è necessario collegare - jQuery... C'era una volta che stavo cercando la sceneggiatura giusta da molto tempo e ho rovistato tra un mucchio di informazioni. Più della metà mostra script che semplicemente non funzionano più sulle nuove versioni delle librerie. Forse hai trovato anche questi script prima di arrivare al mio sito. Poi mi sono imbattuto in questo script, che era un'ottima soluzione per i miei compiti.

Primo, nel cappello davanti alla chiusura testa o al piano interrato prima della chiusura corpo devi includere la libreria jQuery.

Assicurati che ciò non sia stato fatto prima, in modo da non provocare un conflitto e l'inoperabilità degli script.

Ora, dopo la libreria, colleghiamo lo script stesso, che animerà la transizione graduale.

La seconda riga dello script specifica l'ID del blocco con collegamenti di ancoraggio. Ad esempio, puoi organizzare il seguente blocco:

La sesta riga contiene il numero 1500 - il tempo in millisecondi ed è uguale a 1,5 secondi. Questo è il tempo durante il quale viene effettuata la transizione all'ancoraggio desiderato. Per accelerare o rallentare la tua animazione, cambia semplicemente il numero.

Questo è tutto, grazie per l'attenzione. ?

Ciao amici. Voglio toccare un argomento come transizione graduale al collegamento di ancoraggio nella pagina del sito. Se scrivi testi voluminosi sul tuo sito, formattalo correttamente, con schermate e altri elementi, lo scorrimento uniforme fino all'ancora renderà il design ancora più attraente. Ma scopriamo prima di cosa si tratta e come funzionerà. Puoi guardare un esempio di lavoro in questa pagina facendo clic sugli elementi in questo elenco.

Che cos'è un collegamento di ancoraggio?

Come creare un link di ancoraggio HTML

I collegamenti di ancoraggio sono realizzati nel linguaggio di markup ipertestuale. Creare un'ancora in HTML non è affatto complicato. È richiesta solo una piccola conoscenza di questa lingua e la comprensione di come funziona. se non hai problemi con questo, puoi farlo senza troppe difficoltà. Quindi, per creare un'ancora su una pagina HTML, è necessario scrivere qualcosa di simile a quanto segue nel codice.

E per andare in questo posto nella pagina in cui è indicata questa etichetta, devi registrarlo nel link:

<a href = "#ancora"> Vai a un'etichetta su una pagina</ a>

Vai a un'etichetta su una pagina

Con questo approccio, la transizione sarà effettuata da un salto istantaneo da un luogo all'altro.

Scorrimento fluido fino all'ancora

Con lo sviluppo delle tecnologie web, è diventato possibile realizzare siti più belli e dinamici con vari effetti, ecc. Ed è davvero fantastico quando puoi interessare il visitatore con qualcosa, oltre al contenuto e lasciare una buona impressione sul sito. In una certa misura, questo fa il gioco del proprietario del sito. Per una transizione graduale all'ancora, utilizzeremo la libreria e includeremo uno script molto piccolo.

1 2 3 4 5 6 7 8 9 10 11 12 13 14

< script type= "text/javascript" >$ (document) .ready (function () ($ ("a") .click (function () (elementClick = $ (this) .attr ("href"); destination = $ (elementClick) .offset () .top ; if ($ .browser .safari) ($ ("corpo") .animate ((scrollTop: destinazione), 1100);) else ($ ("html") .animate ((scrollTop: destinazione), 1100);) restituire falso;));));

Ci sono tre modi per connettere questo script. Il primo è inserire nella pagina tra i tag head. Il secondo è metterlo in un file separato e collegarlo separatamente in qualcosa del genere:

L'etichetta sulla pagina verso cui navigare

In secondo luogo, se desideri uno scorrimento fluido non su tutti gli ancoraggi, ma solo su alcuni, devi modificare la terza riga dello script in questo modo:

Vai a un'etichetta su una pagina

Un'altra sfumatura che volevo dire è che, a differenza di un semplice ancoraggio HTML, l'ancoraggio jQuery non scrive un collegamento di ancoraggio nella barra degli indirizzi del browser durante la navigazione. Per farti capire di cosa si tratta, darò un esempio di come potrebbe apparire un collegamento di ancoraggio nella barra degli indirizzi di un browser.

#ancora

Ciao cari amici!

Oggi vogliamo parlarti dello scorrimento fluido della pagina di destinazione fino all'elemento desiderato.

Lo scorrimento uniforme (o scorrimento uniforme) consente al visitatore della pagina di destinazione di navigare tra le sezioni senza perdere il contatto visivo con il contenuto dell'offerta.

Puoi vedere un esempio da. In questa pagina, quando si fa clic sul pulsante "Consegna dell'ordine", viene attivato uno scorrimento uniforme.

Vorrei anche attirare la vostra attenzione sul fatto che l'uso dello scorrimento uniforme è rilevante anche in combinazione con un menu statico. In precedenza, abbiamo pubblicato una guida alla creazione che semplifica notevolmente anche la navigazione su pagine di destinazione ad alto volume e aiuta ad aumentare le conversioni.

Quindi, ecco una guida illustrata dettagliata per creare uno scorrimento fluido per un singolo elemento:

1) Aprire la pagina di destinazione nell'editor visuale LPgenerator

2) Copia il codice:

3) Usando lo strumento "Script", incolla il codice copiato nella pagina

Imposta la posizione del codice: “Prima del tag” :

4) Annotare nel codice l'identificativo del pulsante, quando si clicca sul quale avverrà lo scorrimento. L'identificatore è scritto tra virgolette singole.

5) È possibile visualizzare l'identificatore dell'elemento nelle sue proprietà estese a destra:

6) Attenzione: se l'elemento su cui fai clic per avviare lo scorrimento non è un pulsante, elimina la lettera 'a' nel codice:

Nota: dopo lo scorrimento, l'elemento avrà uno spostamento zero dal bordo superiore della finestra, ovvero sarà nella parte superiore della pagina.

Pertanto, se desideri spostare un visitatore in un modulo di lead, ti consigliamo di specificare nel codice l'identificatore del suo titolo o l'elemento che si trova sopra il primo campo del modulo, ad esempio una freccia:

Attenzione: lo scorrimento fluido non funziona per le sezioni. Pertanto, non includere l'identificatore di sezione nel codice.

8) Per impostazione predefinita, il tempo per scorrere fino all'elemento specificato è 1000 ms = 1 sec. Puoi rallentare lo scorrimento (es. 5000ms = 5 sec).

Scrivi il tempo richiesto nel codice:

9) Controlla la posizione dello script, non dimenticare di impostare un nome per lo script. Quindi salva le modifiche e salva la pagina di destinazione nell'editor visivo.

Saluti, cari amici. Come avrai notato, in quasi tutti i browser, lo scorrimento sui siti Web è molto nitido e non piacevole. E, naturalmente, vorrei rendere più fluido lo scorrimento del mio sito, certo che puoi farlo e inoltre, non sforzarti troppo. Questo viene fatto usando un semplice plugin jQuery e alcune regole CSS. E per vedere come funziona, ti consiglio di dare un'occhiata alla demo qui sotto.

Ι

Passiamo ora ad allegare lo scorrimento fluido al nostro sito.

HTML

Per prima cosa, dovremo allegare la libreria jQuery. Se lo hai già allegato, salta questo passaggio:

Quindi dobbiamo collegare il plug-in jQuery stesso, che è responsabile del nostro scorrimento fluido, e insieme ad esso ci sono regole CSS separate che cambiano la barra di scorrimento stessa sul sito. Parleremo di più della barra di scorrimento in modo più dettagliato nella prossima lezione, ma per ora solo scorrimento fluido. Ed ecco le regole e il plugin:

Qualunque cosa. Ora abbiamo già fatto il primo e importante passo. Ora dobbiamo aggiungere una semplice regola agli stili CSS del nostro sito.

CSS

html, corpo (altezza: 100%;)

Questo per chiarire al nostro plugin che la larghezza della pagina è allungata ed è alta al 100%. Assicurati di aggiungere questa regola al tuo CSS o lo scorrimento non funzionerà.

sceneggiatura

E ora propongo di dare un'occhiata più da vicino all'esempio demo. E inizieremo con HTML.

HTML nella demo

Contenuto

---

---

Come puoi vedere, qui ho utilizzato markup HTML5 completamente standard, con tutti gli script e i file CSS inseriti sopra di cui abbiamo parlato. Penso che non ci sia nulla da spiegare qui, se qualcosa non ti è chiaro, assicurati di chiedere nei commenti.

Per ora, diamo un'occhiata alle regole CSS.

CSS da demo

@import url (http://fonts.googleapis.com/css?family=Bad+Script&subset=latin,cyrillic); @import url (http://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic); body (colore di sfondo: #fff; colore: # 555; dimensione carattere: 14px; famiglia di caratteri: "Bad Script", corsivo; margin: 0; padding: 0; min-width: 480px;) html, body ( altezza: 100%;) h2 (font-size: 80px; text-align: center; font-family: "Lobster", corsivo; font-weight: 700; font-style: italic; color: # 444;) hr ( altezza: 0; bordo: nessuno; bordo-basso: 1px solido #eee; bordo-alto: 1px solido #eee; margine-basso: 50px; chiaro: entrambi;) .cont (dimensione carattere: 30px; margine: 0 auto ; padding-top: 20px; width: 50%; max-width: 50%;) .text (padding-top: 15px; padding-bottom: 20px)

Anche le regole CSS sono molto semplici e non ce ne sono molte, puoi anche vedere che i caratteri di Google sono allegati qui per rendere la demo visivamente gradevole.

Di recente, le animazioni che vengono riprodotte mentre scorri la pagina stanno guadagnando sempre più popolarità. Tuttavia, ho notato che la stragrande maggioranza dei browser non è progettata per tali animazioni. Lo scorrimento delle pagine con il mouse non è fluido (come in Firefox), ma graduale. Di conseguenza, anche le animazioni di scorrimento sulle pagine vengono riprodotte a scatti. Secondo me, il problema qui non è affatto nei browser, ma nei plugin che vengono utilizzati per creare queste animazioni. Perché sono quelli che permettono salti acuti. Credo che per qualsiasi animazione dovrebbe esserci una velocità di riproduzione massima alla quale l'animazione sarà fluida e l'utente sarà in grado di capire cosa è successo sulla pagina. Se sei d'accordo con me, allora muoviti dolcemente e senza sussulti sotto il gatto.

In questo articolo parleremo di un plugin per la creazione di animazioni controllate dallo scorrimento, che ho chiamato Scrollissimo. Il suo analogo più vicino è il plugin ScrollMagic. Ciò che hanno in comune è il loro scopo e il fatto che Greensock è stato scelto come motore di animazione. Se per qualche motivo non lo conosci ancora, allora, forse, per una comprensione completa di tutto ciò che sta accadendo, dovresti leggere gli articoli su Greensock, che sono già stati pubblicati su Habré. Ad esempio .

Oltre alle somiglianze, questi plugin hanno anche delle differenze. Ma vorrei evidenziare la cosa principale: un'animazione fluida. Affinché non sembri infondato, ecco una prova. Anche la pagina principale di ScrollMagic conferma le mie parole.

Come usarlo?

ci colleghiamo

Per iniziare a utilizzare Scrollissimo, devi fare due cose. Innanzitutto, collega Greensock. Puoi collegare solo le librerie minime richieste (TweenLite, TimelineLite e CSS):

oppure, collega una libreria contenente tutto quanto sopra:

E in secondo luogo, colleghiamo lo stesso Scrollissimo. La libreria è disponibile dal repository. E per gli utenti bower è anche possibile installare con il comando

Bower installa scrollissimo
Scaricato, ora colleghiamo:

Facoltativamente, puoi (ma non necessariamente) includere jQuery per tua comodità. Più avanti nell'articolo, scriverò il codice utilizzandolo per una maggiore leggibilità.

Ho fornito la possibilità di attivare Scrollissimo non solo per lo scorrimento dell'intera pagina, ma anche per qualsiasi altro evento, ma nella stragrande maggioranza delle situazioni è necessario iscriversi all'evento di scorrimento della pagina:

$ (finestra) .scroll (funzione () (Scrollissimo.knock ();));
Ora, ogni volta che si verifica l'evento di scorrimento, lo Scrollissimo calcolerà l'attuale avanzamento delle animazioni e lo riprodurrà.

NOTA: Se non hai bisogno del plugin per contare lo scorrimento della pagina stesso, puoi passare il tuo valore della proprietà scrollTop al metodo knock().Ad esempio, Scrollissimo.knock (1000) dirà al plugin che hai fatto scorrere la pagina per 1000 pixel.

NOTA: Per supportare i dispositivi tachimetriche, c'è un adattatore touch scrollissimo.touch.js che combatte il blocco della pagina durante lo scorrimento.

Ecco fatto, ora puoi animare direttamente! Scrollissimo può animare interpolazioni (singole animazioni) e timeline (coda di singole animazioni). Cominciamo con i gemelli.

Animazione più semplice

Diciamo che abbiamo un bel div rosso chiamato Divy. Vuole davvero crescere, ma finora è largo e alto solo 50 pixel.

#Divy (posizione: fissa; alto: 0; sinistra: 0; altezza: 50px; larghezza: 50px; sfondo: rosso;)
Rendiamolo largo 300 pixel dopo 1000 pixel dall'inizio della pagina. Per fare ciò, crea prima il gemello appropriato, come se stessimo facendo una normale animazione usando Greensock:

Var divyTween = new TweenLite ($ ("# Divy"), 1000, (larghezza: 300));
NOTA: Come hai notato, l'unica differenza dall'animazione standard su Greensock è che specifichiamo la durata dell'animazione non in secondi, ma in pixel (nel nostro caso 1000).

Bene! Non resta che dare questo gemello allo Scrollissimo:

Scrollissimo.add (divyTween, 0, 6);
Ora rallentiamo e analizziamo questa linea. Il primo argomento è lo stesso gemello che abbiamo creato. Il secondo argomento è dove iniziare l'animazione. Nel nostro caso, questo è l'inizio della pagina (0 pixel). Resta il terzo argomento. Qui è dove arriviamo alla caratteristica principale che distingue Scrollissimo dai normali plugin. Il terzo argomento è la velocità massima di riproduzione dell'animazione. Questa velocità viene misurata in unità astratte adimensionali e selezionata "a occhio". Risponderò immediatamente alla domanda "Cosa succederà se non specifichi il terzo parametro?" Se non specifichi la velocità massima, non lo sarà. Questa animazione verrà riprodotta nello stesso modo in cui verrà riprodotta con i normali plug-in.

Linea del tempo

Quindi Divy è cresciuto in larghezza. Come possiamo aiutarlo a crescere in altezza? È qui che le catene di animazione o, in termini di Greensock, le linee temporali tornano utili. Se li hai già usati per creare animazioni, non è una novità per te. Allo stesso modo in cui abbiamo fatto con il gemello sopra, lo facciamo con la timeline. jsFiddle

Var divyTimeline = new TimelineLite (); divyTimeline.to ($ ("# Divy"), 1000 (larghezza: 300)); divyTimeline.to ($ ("# Divy"), 1000, (altezza: 300)); Scrollissimo.add (divyTimeline, 0, 6);

Conclusione

Questo è tutto ciò che serve per creare con successo animazioni di scorrimento con Scrollissimo. Su questo, forse, finirò l'articolo. In conclusione, vorrei dire che il plugin è in fase di sviluppo attivo, ha spazio per crescere e migliorare. Pertanto, sarò lieto di avere domande, consigli e richieste di funzionalità.

Disponi, anima!