Questa è una diapositiva orizzontale 
 E questa è una diapositiva verticale 

Nella prima diapositiva, inseriremo l'intro. Le viste frammentate andranno nel secondo e questo sarà finalmente seguito da una diapositiva con una virata con una citazione e un link interno all'interno.

Per l'introduzione, ho intenzione di formattare il titolo con h1 e il sottotitolo con h3 modo:

 Presentazione Hongkiat 
Ciao, questa è una demo per Reveal.js 

Ora per la seconda diapositiva, userò alcune parole per il frammento. Per creare una vista frammentata, dovrai raddoppiare la section come nella creazione della diapositiva verticale. Quindi, includi la sottosezione con un ID di fragments e una classe di fragment nell'elemento di contenuto in questo modo:

Sono frammentato 
Colpisci la prossima freccia per rivelarmi!
Sono il numero uno
E io sono il numero due
Ehi, non dimenticarmi! Sono terzo.

Infine, per la battuta finale, voglio usare una citazione popolare di Eric Cantona. Basta avvolgere la parola con a

elemento per ottenere uno stile grazioso. E per collegarsi internamente ad altre diapositive, basta aggiungere un tag con la mappa del link scorrevole. Il seguente è il risultato:

The Punchline 
Questa è una delle citazioni molto popolari di :
 "Quando i gabbiani seguono il trawler, è perché pensano che le sardine saranno gettate in mare. Grazie mille." 
Clicca per tornare alla prima pagina.

Dopo che tutto è finito, l'ultimo passaggio per far funzionare la presentazione è aggiungendo la seguente configurazione:

Queste sono le configurazioni di base di cui abbiamo bisogno per l'implementazione di base. Qui puoi trovare un elenco completo di configurazioni e altre impostazioni avanzate come markdown, note, auto-sliding e altro.

Ora abbiamo una bella slide per la presentazione. Questa è l'introduzione:

Questa è la nostra visione frammentata:

E questa è la diapositiva finale:

Conclusione

Con questo strumento, puoi creare un'ottima presentazione HTML all'interno del tuo sito. Puoi trovare alcuni esempi di ispirazione qui. Rispetto ad altre librerie di presentazione impressionanti, come Impress.js che si concentra sulla sua meravigliosa animazione di transizione, Reveal a mio parere è ancora molto più potente in termini di funzionalità.

Aggiungi collegamenti tweet nei tuoi contenuti con InlineTweet.js

Vedrai questa funzionalità molto su grandi siti come TechCrunch e Mashable. Leggerai un articolo e noterai che un'intera frase è evidenziata come un link .Tuttavia, quando si fa clic su questo si aprirà una finestra di tweet che chiede di condividere quel frammento di testo con i follower di Twitter. È

(Consigli tecnici e di design)

Le storie di Snapchat ora ti consentono di cercare oltre 1 milione di storie

Negli ultimi tempi, molti servizi di social network sono stati impegnati a "prendere in prestito" funzionalità l'una dall'altra. Probabilmente Snapchat avrebbe familiarità con un evento del genere in quanto la sua caratteristica Storie ha ispirato i suoi concorrenti a introdurre funzionalità identiche nei loro servizi.Vi

(Consigli tecnici e di design)