SlideShare ist ein Scribd-Unternehmen logo
1 von 31
Downloaden Sie, um offline zu lesen
REVEAL.JS
HTML PRESENTATIONS MADE EASY
Createdby /HakimElHattab @hakimel
HEADS UP
reveal.js is aframework for easilycreatingbeautiful
presentations usingHTML. You'llneed abrowser with support
for CSS 3D transforms to see itin its fullglory.
VERTICAL SLIDES
Slides can be nested inside of other slides, trypressing .down
BASEMENT LEVEL 1
Press down or up to navigate.
BASEMENT LEVEL 2
Cornify
BASEMENT LEVEL 3
That's it, time to go back up.
SLIDES
Notacoder?No problem. There's afully-featured visualeditor
for authoringthese, tryitoutat .http://slid.es
POINT OF VIEW
Press ESC to enter the slide overview.
Hold down altand click on anyelementto zoom in on itusing
. Alt+ click anywhere to zoom back out.zoom.js
WORKS IN MOBILE SAFARI
Tryitout!You can swipe through the slides and pinch your way
to the overview.
MARVELOUS UNORDERED LIST
No order here
Or here
Or here
Or here
FANTASTIC ORDERED LIST
1. One is smaller than...
2. Two is smaller than...
3. Three!
MARKDOWN SUPPORT
For those of you who like thatsortof thing. Instructions and abit
more info available .here
<sectiondata-markdown>
##Markdownsupport
Forthoseofyouwholikethatsortofthing.
Instructionsandabitmoreinfoavailable[here](https://github.com/hakimel/reveal.js#
</section>
TRANSITION STYLES
You can selectfrom differenttransitions, like:
- - - - - - -Cube Page Concave Zoom Linear Fade None Default
THEMES
Reveal.js comes with afew themes builtin:
- - - - -
-
Default Sky Beige Simple Serif Night
Moon Solarized
*Themedemosareloadedafterthepresentationwhichleadstoflicker.Inproductionyoushouldloadyour
themeinthe<head>usinga<link>.
GLOBAL STATE
Setdata-state="something"on aslide and "something"
willbe added as aclass to the documentelementwhen the slide
is open. This lets you applybroader style changes, like switching
the background.
CUSTOM EVENTS
Additionallycustom events can be triggered on aper slide basis
bybindingto the data-statename.
Reveal.addEventListener('customevent',function(){
console.log('"customevent"hasfired');
});
SLIDE BACKGROUNDS
Setdata-background="#007777"on aslide to change the
fullpage background to the given color. AllCSS color formats are
supported.
IMAGE BACKGROUNDS
<sectiondata-background="image.png">
REPEATED IMAGE BACKGROUNDS
<sectiondata-background="image.png"data-background-repeat="repeat"data-ba
ckground-size="100px">
BACKGROUND TRANSITIONS
Pass reveal.js the backgroundTransition: 'slide'
configargumentto make backgrounds slide rather than fade.
BACKGROUND TRANSITION OVERRIDE
You can override background transitions per slide byusing
data-background-transition="slide".
CLEVER QUOTES
These guys come in two forms, inline: “The nice thing about
standards is thatthere are so many to choose from”and block:
“For years there has been atheory thatmillions
of monkeys typing atrandomon millions of
typewriters would reproduce the entire works of
Shakespeare. The Internethas proven this
theory to be untrue.”
PRETTY CODE
functionlinkify(selector){
if(supports3DTransforms){
varnodes=document.querySelectorAll(selector);
for(vari=0,len=nodes.length;i<len;i++){
varnode=nodes[i];
if(!node.className){
node.className+='roll';
}
}
}
}
Courtesyof .highlight.js
INTERGALACTIC INTERCONNECTIONS
You can link between slides internally, .like this
FRAGMENTED VIEWS
Hitthe nextarrow...
... to step through ...
1. any type
2. of view
3. fragments
FRAGMENT STYLES
There's afew styles of fragments, like:
grow
shrink
roll-in
fade-out
highlight-red
highlight-green
highlight-blue
current-visible
highlight-current-blue
SPECTACULAR IMAGE!
EXPORT TO PDF
Presentations can be , below is an example
that's been uploaded to SlideShare.
exported to PDF
TAKE A MOMENT
Press b or period on your keyboard to enter the 'paused'mode.
This mode is helpfulwhen you wantto take distractingslides off
the screen duringapresentation.
STELLAR LINKS
Trythe online editor
Source code on GitHub
Follow me on Twitter
THE END
BY HAKIM EL HATTAB / HAKIM.SE

Weitere ähnliche Inhalte

Ähnlich wie Revealjs sample

MOConf'13: WebNotBombs: Optimize this
MOConf'13: WebNotBombs: Optimize thisMOConf'13: WebNotBombs: Optimize this
MOConf'13: WebNotBombs: Optimize this
Boris Zapolsky
 
Android 2D Drawing and Animation Framework
Android 2D Drawing and Animation FrameworkAndroid 2D Drawing and Animation Framework
Android 2D Drawing and Animation Framework
Jussi Pohjolainen
 
Tom Germeau: Mobile Apps: Finding the balance between performance and flexibi...
Tom Germeau: Mobile Apps: Finding the balance between performance and flexibi...Tom Germeau: Mobile Apps: Finding the balance between performance and flexibi...
Tom Germeau: Mobile Apps: Finding the balance between performance and flexibi...
Chartbeat
 
Css3 transitions and animations + graceful degradation with jQuery
Css3 transitions and animations + graceful degradation with jQueryCss3 transitions and animations + graceful degradation with jQuery
Css3 transitions and animations + graceful degradation with jQuery
Andrea Verlicchi
 

Ähnlich wie Revealjs sample (20)

reveal.js 3.0.0
reveal.js 3.0.0reveal.js 3.0.0
reveal.js 3.0.0
 
The future of images in email - Litmus live London 2017
The future of images in email - Litmus live London 2017The future of images in email - Litmus live London 2017
The future of images in email - Litmus live London 2017
 
Geek Sync | Performance Tuning: Getting the Biggest Bang for Your Buck - Moni...
Geek Sync | Performance Tuning: Getting the Biggest Bang for Your Buck - Moni...Geek Sync | Performance Tuning: Getting the Biggest Bang for Your Buck - Moni...
Geek Sync | Performance Tuning: Getting the Biggest Bang for Your Buck - Moni...
 
Build 2017 - B8100 - What's new and coming for Windows UI: XAML and composition
Build 2017 - B8100 - What's new and coming for Windows UI: XAML and compositionBuild 2017 - B8100 - What's new and coming for Windows UI: XAML and composition
Build 2017 - B8100 - What's new and coming for Windows UI: XAML and composition
 
I Can't Believe It's Not Flash
I Can't Believe It's Not FlashI Can't Believe It's Not Flash
I Can't Believe It's Not Flash
 
MOConf'13: WebNotBombs: Optimize this
MOConf'13: WebNotBombs: Optimize thisMOConf'13: WebNotBombs: Optimize this
MOConf'13: WebNotBombs: Optimize this
 
Html5
Html5Html5
Html5
 
Css3 and gwt in perfect harmony
Css3 and gwt in perfect harmonyCss3 and gwt in perfect harmony
Css3 and gwt in perfect harmony
 
Css3 and gwt in perfect harmony
Css3 and gwt in perfect harmonyCss3 and gwt in perfect harmony
Css3 and gwt in perfect harmony
 
An in-depth look at jQuery UI
An in-depth look at jQuery UIAn in-depth look at jQuery UI
An in-depth look at jQuery UI
 
Android 2D Drawing and Animation Framework
Android 2D Drawing and Animation FrameworkAndroid 2D Drawing and Animation Framework
Android 2D Drawing and Animation Framework
 
Tom Germeau: Mobile Apps: Finding the balance between performance and flexibi...
Tom Germeau: Mobile Apps: Finding the balance between performance and flexibi...Tom Germeau: Mobile Apps: Finding the balance between performance and flexibi...
Tom Germeau: Mobile Apps: Finding the balance between performance and flexibi...
 
Spectrum 16 pmc 16 - preparing legacy projects for responsive design
Spectrum 16   pmc 16 - preparing legacy projects for responsive designSpectrum 16   pmc 16 - preparing legacy projects for responsive design
Spectrum 16 pmc 16 - preparing legacy projects for responsive design
 
HTML5 apps for iOS (and probably beyond)
HTML5 apps for iOS (and probably beyond)HTML5 apps for iOS (and probably beyond)
HTML5 apps for iOS (and probably beyond)
 
Responsive & Responsible: Implementing Responsive Design at Scale
Responsive & Responsible: Implementing Responsive Design at ScaleResponsive & Responsible: Implementing Responsive Design at Scale
Responsive & Responsible: Implementing Responsive Design at Scale
 
Css3 transitions and animations + graceful degradation with jQuery
Css3 transitions and animations + graceful degradation with jQueryCss3 transitions and animations + graceful degradation with jQuery
Css3 transitions and animations + graceful degradation with jQuery
 
CSS Less framework overview, Pros and Cons
CSS Less framework overview, Pros and ConsCSS Less framework overview, Pros and Cons
CSS Less framework overview, Pros and Cons
 
Flash Camp - Degrafa & FXG
Flash Camp - Degrafa & FXGFlash Camp - Degrafa & FXG
Flash Camp - Degrafa & FXG
 
Die View Users Guide
Die View Users GuideDie View Users Guide
Die View Users Guide
 
Html5
Html5Html5
Html5
 

Kürzlich hochgeladen

valsad Escorts Service ☎️ 6378878445 ( Sakshi Sinha ) High Profile Call Girls...
valsad Escorts Service ☎️ 6378878445 ( Sakshi Sinha ) High Profile Call Girls...valsad Escorts Service ☎️ 6378878445 ( Sakshi Sinha ) High Profile Call Girls...
valsad Escorts Service ☎️ 6378878445 ( Sakshi Sinha ) High Profile Call Girls...
Call Girls In Delhi Whatsup 9873940964 Enjoy Unlimited Pleasure
 
₹5.5k {Cash Payment}New Friends Colony Call Girls In [Delhi NIHARIKA] 🔝|97111...
₹5.5k {Cash Payment}New Friends Colony Call Girls In [Delhi NIHARIKA] 🔝|97111...₹5.5k {Cash Payment}New Friends Colony Call Girls In [Delhi NIHARIKA] 🔝|97111...
₹5.5k {Cash Payment}New Friends Colony Call Girls In [Delhi NIHARIKA] 🔝|97111...
Diya Sharma
 
Lucknow ❤CALL GIRL 88759*99948 ❤CALL GIRLS IN Lucknow ESCORT SERVICE❤CALL GIRL
Lucknow ❤CALL GIRL 88759*99948 ❤CALL GIRLS IN Lucknow ESCORT SERVICE❤CALL GIRLLucknow ❤CALL GIRL 88759*99948 ❤CALL GIRLS IN Lucknow ESCORT SERVICE❤CALL GIRL
Lucknow ❤CALL GIRL 88759*99948 ❤CALL GIRLS IN Lucknow ESCORT SERVICE❤CALL GIRL
imonikaupta
 

Kürzlich hochgeladen (20)

WhatsApp 📞 8448380779 ✅Call Girls In Mamura Sector 66 ( Noida)
WhatsApp 📞 8448380779 ✅Call Girls In Mamura Sector 66 ( Noida)WhatsApp 📞 8448380779 ✅Call Girls In Mamura Sector 66 ( Noida)
WhatsApp 📞 8448380779 ✅Call Girls In Mamura Sector 66 ( Noida)
 
VVIP Pune Call Girls Mohammadwadi WhatSapp Number 8005736733 With Elite Staff...
VVIP Pune Call Girls Mohammadwadi WhatSapp Number 8005736733 With Elite Staff...VVIP Pune Call Girls Mohammadwadi WhatSapp Number 8005736733 With Elite Staff...
VVIP Pune Call Girls Mohammadwadi WhatSapp Number 8005736733 With Elite Staff...
 
Call Now ☎ 8264348440 !! Call Girls in Shahpur Jat Escort Service Delhi N.C.R.
Call Now ☎ 8264348440 !! Call Girls in Shahpur Jat Escort Service Delhi N.C.R.Call Now ☎ 8264348440 !! Call Girls in Shahpur Jat Escort Service Delhi N.C.R.
Call Now ☎ 8264348440 !! Call Girls in Shahpur Jat Escort Service Delhi N.C.R.
 
valsad Escorts Service ☎️ 6378878445 ( Sakshi Sinha ) High Profile Call Girls...
valsad Escorts Service ☎️ 6378878445 ( Sakshi Sinha ) High Profile Call Girls...valsad Escorts Service ☎️ 6378878445 ( Sakshi Sinha ) High Profile Call Girls...
valsad Escorts Service ☎️ 6378878445 ( Sakshi Sinha ) High Profile Call Girls...
 
(INDIRA) Call Girl Pune Call Now 8250077686 Pune Escorts 24x7
(INDIRA) Call Girl Pune Call Now 8250077686 Pune Escorts 24x7(INDIRA) Call Girl Pune Call Now 8250077686 Pune Escorts 24x7
(INDIRA) Call Girl Pune Call Now 8250077686 Pune Escorts 24x7
 
Real Men Wear Diapers T Shirts sweatshirt
Real Men Wear Diapers T Shirts sweatshirtReal Men Wear Diapers T Shirts sweatshirt
Real Men Wear Diapers T Shirts sweatshirt
 
Ganeshkhind ! Call Girls Pune - 450+ Call Girl Cash Payment 8005736733 Neha T...
Ganeshkhind ! Call Girls Pune - 450+ Call Girl Cash Payment 8005736733 Neha T...Ganeshkhind ! Call Girls Pune - 450+ Call Girl Cash Payment 8005736733 Neha T...
Ganeshkhind ! Call Girls Pune - 450+ Call Girl Cash Payment 8005736733 Neha T...
 
APNIC Updates presented by Paul Wilson at ARIN 53
APNIC Updates presented by Paul Wilson at ARIN 53APNIC Updates presented by Paul Wilson at ARIN 53
APNIC Updates presented by Paul Wilson at ARIN 53
 
Call Girls Sangvi Call Me 7737669865 Budget Friendly No Advance BookingCall G...
Call Girls Sangvi Call Me 7737669865 Budget Friendly No Advance BookingCall G...Call Girls Sangvi Call Me 7737669865 Budget Friendly No Advance BookingCall G...
Call Girls Sangvi Call Me 7737669865 Budget Friendly No Advance BookingCall G...
 
₹5.5k {Cash Payment}New Friends Colony Call Girls In [Delhi NIHARIKA] 🔝|97111...
₹5.5k {Cash Payment}New Friends Colony Call Girls In [Delhi NIHARIKA] 🔝|97111...₹5.5k {Cash Payment}New Friends Colony Call Girls In [Delhi NIHARIKA] 🔝|97111...
₹5.5k {Cash Payment}New Friends Colony Call Girls In [Delhi NIHARIKA] 🔝|97111...
 
Al Barsha Night Partner +0567686026 Call Girls Dubai
Al Barsha Night Partner +0567686026 Call Girls  DubaiAl Barsha Night Partner +0567686026 Call Girls  Dubai
Al Barsha Night Partner +0567686026 Call Girls Dubai
 
Lucknow ❤CALL GIRL 88759*99948 ❤CALL GIRLS IN Lucknow ESCORT SERVICE❤CALL GIRL
Lucknow ❤CALL GIRL 88759*99948 ❤CALL GIRLS IN Lucknow ESCORT SERVICE❤CALL GIRLLucknow ❤CALL GIRL 88759*99948 ❤CALL GIRLS IN Lucknow ESCORT SERVICE❤CALL GIRL
Lucknow ❤CALL GIRL 88759*99948 ❤CALL GIRLS IN Lucknow ESCORT SERVICE❤CALL GIRL
 
VIP Model Call Girls NIBM ( Pune ) Call ON 8005736733 Starting From 5K to 25K...
VIP Model Call Girls NIBM ( Pune ) Call ON 8005736733 Starting From 5K to 25K...VIP Model Call Girls NIBM ( Pune ) Call ON 8005736733 Starting From 5K to 25K...
VIP Model Call Girls NIBM ( Pune ) Call ON 8005736733 Starting From 5K to 25K...
 
Shikrapur - Call Girls in Pune Neha 8005736733 | 100% Gennuine High Class Ind...
Shikrapur - Call Girls in Pune Neha 8005736733 | 100% Gennuine High Class Ind...Shikrapur - Call Girls in Pune Neha 8005736733 | 100% Gennuine High Class Ind...
Shikrapur - Call Girls in Pune Neha 8005736733 | 100% Gennuine High Class Ind...
 
Sarola * Female Escorts Service in Pune | 8005736733 Independent Escorts & Da...
Sarola * Female Escorts Service in Pune | 8005736733 Independent Escorts & Da...Sarola * Female Escorts Service in Pune | 8005736733 Independent Escorts & Da...
Sarola * Female Escorts Service in Pune | 8005736733 Independent Escorts & Da...
 
Enjoy Night⚡Call Girls Samalka Delhi >༒8448380779 Escort Service
Enjoy Night⚡Call Girls Samalka Delhi >༒8448380779 Escort ServiceEnjoy Night⚡Call Girls Samalka Delhi >༒8448380779 Escort Service
Enjoy Night⚡Call Girls Samalka Delhi >༒8448380779 Escort Service
 
Nanded City ( Call Girls ) Pune 6297143586 Hot Model With Sexy Bhabi Ready ...
Nanded City ( Call Girls ) Pune  6297143586  Hot Model With Sexy Bhabi Ready ...Nanded City ( Call Girls ) Pune  6297143586  Hot Model With Sexy Bhabi Ready ...
Nanded City ( Call Girls ) Pune 6297143586 Hot Model With Sexy Bhabi Ready ...
 
Call Now ☎ 8264348440 !! Call Girls in Rani Bagh Escort Service Delhi N.C.R.
Call Now ☎ 8264348440 !! Call Girls in Rani Bagh Escort Service Delhi N.C.R.Call Now ☎ 8264348440 !! Call Girls in Rani Bagh Escort Service Delhi N.C.R.
Call Now ☎ 8264348440 !! Call Girls in Rani Bagh Escort Service Delhi N.C.R.
 
Wagholi & High Class Call Girls Pune Neha 8005736733 | 100% Gennuine High Cla...
Wagholi & High Class Call Girls Pune Neha 8005736733 | 100% Gennuine High Cla...Wagholi & High Class Call Girls Pune Neha 8005736733 | 100% Gennuine High Cla...
Wagholi & High Class Call Girls Pune Neha 8005736733 | 100% Gennuine High Cla...
 
Top Rated Pune Call Girls Daund ⟟ 6297143586 ⟟ Call Me For Genuine Sex Servi...
Top Rated  Pune Call Girls Daund ⟟ 6297143586 ⟟ Call Me For Genuine Sex Servi...Top Rated  Pune Call Girls Daund ⟟ 6297143586 ⟟ Call Me For Genuine Sex Servi...
Top Rated Pune Call Girls Daund ⟟ 6297143586 ⟟ Call Me For Genuine Sex Servi...
 

Revealjs sample