Quando si crea il markup per pezzi scritti più lunghi su una singola pagina, è spesso importante creare strutture di navigazione per saltare tra diverse parti di quel testo. Questo è supportato nativamente in HTML, permettendoci di saltare alle sezioni all'interno di una pagina e persino visitarle direttamente da link esterni.
Un elenco a parte: qui viene visualizzato il link della sezione e "identificatore di frammento" (tag hash ...) nell'URLLa documentazione della guida su GitHub è un altro posto dove puoi trovare i collegamenti alle sezioni dinamiche
In questo tutorial, discuteremo una tecnica per generare dinamicamente quei collegamenti con JavaScript e quindi animarli usando CSS. Tuffiamoci dentro!
markup
Il primo passo necessario è creare un markup adatto per il tuo pezzo scritto. Supponiamo che tu abbia un articolo, e all'interno di quell'articolo ce ne sono molti seziones, ognuno con il proprio h1 tag e contenuto successivo.
Ecco come potrebbe essere il tuo codice HTML:
Ecco una parte
Mobilitare la campagna di raccolta fondi per l'orgoglio, i criteri di fondazione salvano le vite dei diritti umani donare empowerment. Generosità dei cambiamenti climatici, i leader globali della popolazione vulnerabili perdurano nel tempo. Risultati, onestà delle nazioni in via di sviluppo interrompono la progettazione centrata sull'uomo; Attuazione del progresso L'UNHCR elabora molte voci.
Gli anziani; la complessità celebra; assistenza legale diversificazione servizi igienico-sanitari imprenditorialità sociale contributo di assistenza open source operatori sanitari della comunità.
Eccone un altro
Espansione della proprietà della comunità; Kickstarter servizio pubblico consumo collaborativo, occupazione Rockefeller partnership pubblico-privato che affronta trasformazioni. Partner Aga Khan economie informali necessità città collaborative istituzioni pubbliche opportunità di nutrizione.
E ancora uno di più
Espressione libera del settore pubblico significativa, abilitante; Andrew Carnegie Bloomberg, emergente coinvolgimento situazione di crisi della globalizzazione. Genere, uguaglianza di genere verità a lungo termine miglioramento qualità gioventù impegno civico uguaglianza scalabile fine fame sostenibile L'agenzia Medecins du Monde cambia vita.
Analisi sociale, affiliazione; beneficiari salvavita alla vita Jane Addams libertà di parola, movimenti di cambiamento che sollevano le persone su sfide sociali cambiamento sociale positivo disgregatore futuro.
Nota: come puoi vedere, stiamo applicando un id alle sezioni separate. Scegliamo di farlo perché il id è in realtà correlato alla sezione stessa, non al h1 etichetta.
Per saltare a un elemento con un dato id su una pagina, si crea un tag di ancoraggio con un href valore uguale al segno cancelletto seguito dal id. Ad esempio, nel nostro esempio di contenuto dall'alto, per passare alla seconda sezione, potremmo creare il seguente link:
Seconda sezione
Ci sono molti modi per farlo: potresti codificare i link a mano, potresti usare un'astrazione che costruisca la tua sezione HTML, incluso il link. In questo tutorial, tuttavia, utilizzeremo JavaScript per generare i collegamenti in modo dinamico.
Vanilla JS
Ecco il codice JavaScript:
var sections = document.querySelectorAll ('section'); per (var i = 0; i < sections.length; i++) var section = sections[i]; var id = section.id; var h1 = section.querySelectorAll('h1')[0]; var text = h1.innerHTML; h1.innerHTML = ""+ testo +""+" "+ id +" ";
versione jQuery
Ed ecco una versione di jQuery, essenzialmente ottenendo la stessa cosa:
$ ('article section'). each (function (i, el) var id = $ (this) .attr ('id'); var h1 = $ (this) .find ('h1'). first () ; var t = h1.text (); h1.html (""+ t +""); h1.append (" # "+ id +" "););
Entrambi danno lo stesso risultato. Cerchiamo tutti i discendenti di una determinata sezione dell'articolo, e per ognuno di essi troviamo il id di quella sezione. Quindi, costruiamo un link che punta a questo id e aggiungilo al intestazione elemento. Inoltre, avvolgiamo il testo esistente in un intervallo per uno stile più flessibile.
A proposito di Styling ...
Successivamente, applichiamo alcuni CSS di base per fornire un effetto Nascondi e Mostra:
url @import (http://fonts.googleapis.com/css?family=Fira+Sans:300,400,700); body font-family: "Fira Sans", sans-serif; colore: # 444; article width: 90%; margine: 0 auto; h1 posizione: relativa; span float: left; a transition: all .4s; opacità: 0; colore: # FD9148; font-weight: 300; margin-left: 12px; decorazione del testo: nessuna; &: hover a text-indent: 0; opacità: 1;
Queste regole prima impostano alcuni stili di base; font, colore, articolo larghezza e così via. Quindi affermiamo che il un (che abbiamo aggiunto in precedenza tramite JavaScript) avranno transizioni applicate ad esso e avranno una opacità di 0 per impostazione predefinita. Solo quando passiamo il mouse su di esso, la sua opacità aumenta a 1, dandoci la dissolvenza in effetto.
E questo è tutto! Ora abbiamo una implementazione relativamente semplice di questa tecnica in azione:
Conclusione
Abbiamo appena realizzato un miglioramento davvero utile per le pagine Web ricche di contenuti! Anche il fallback è elegante: se JavaScript è disabilitato, i link semplicemente non appaiono e se un tag hash è presente alla fine dell'URL viene ignorato.
Il nostro effetto dissolvenza è un modo semplice per presentare il link, quindi come potresti migliorarlo? Quali tipi di animazioni potresti applicare? Vuoi posizionare il link allo stesso modo? Non vediamo l'ora di ascoltare le tue idee (e fare attenzione al progetto comunitario che a breve pubblicheremo proprio su questo argomento!)