{"id":5821,"date":"2021-04-10T13:01:28","date_gmt":"2021-04-10T13:01:28","guid":{"rendered":"https:\/\/www.scmgalaxy.com\/tutorials\/?p=5821"},"modified":"2022-04-13T16:30:49","modified_gmt":"2022-04-13T16:30:49","slug":"how-to-create-an-html-slide-presentation-in-reveal-js","status":"publish","type":"post","link":"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-create-an-html-slide-presentation-in-reveal-js\/","title":{"rendered":"How to create an HTML slide presentation in reveal JS?"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"> In this tutorial i&#8217;m going to desribe how to create an HTML slides presentation In Revealjs.  Plz follow some easy step mentioned below. Complete slides found here repository from https:\/\/github.com\/\/reveal.js, and you can implement this slides structure in your own slides.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/vijaypk376\/9e89cdaa3416d99d2c2d3592f2580210.js\"><\/script>\n\n\n\n<p class=\"wp-block-paragraph\">Each \u201cslide\u201d in your \u201cdeck\u201d is denoted by a<br>tag in the section, as shown above. You can then use normal HTML syntax and CSS styling to fancy up your elements, but basically, you just write out your sections, and voila you have a presentation. To use your own CSS you should probably add a custom.css file and reference it in the section after the generic reveal CSS and the one for the theme you\u2019re using, so you override any default behavior.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, to add a pointing-finger emoji to an element in a list as you step into it, you\u2019d use the following CSS:<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/vijaypk376\/0e047f5b73fc793fa6e0b94f8de91d11.js\"><\/script>\n\n\n\n<p class=\"wp-block-paragraph\">and in your html you\u2019d mark it up as follows:<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/vijaypk376\/72eaf8e1775ee8eb1321f26957daca7f.js\"><\/script>\n\n\n\n<p class=\"wp-block-paragraph\">To highlight fragments in a sentence in bold as you step into them, firstly you need to override the default behavior where they are hidden until stepped into:<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/vijaypk376\/f8f31721b76314b8a384a9cd2ed9dab6.js\"><\/script>\n\n\n\n<p class=\"wp-block-paragraph\">you\u2019d use this in your html like this:<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/vijaypk376\/ded8ddb590c3d6616616bf46924fefb8.js\"><\/script>\n\n\n\n<p class=\"wp-block-paragraph\">Best of all, with some additional javascript libraries you can have even more fun! Here\u2019s how to add rainbow sparkles to elements on your slide. It\u2019s still a bit of a work in progress but anyhow here we go:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Firstly, I think you need to add jquery and the javascript code for the sparkles as dependencies in your HTML, so in the\u00a0&lt;script>\u00a0section, underneath the line that initializes the main RevealJS code you need to add the following:<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/vijaypk376\/0fe97839ad6c43e10f5a49b0e460a9d4.js\"><\/script>\n\n\n\n<p class=\"wp-block-paragraph\">Then you need some CSS to define your fragment behavior, like above:<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/vijaypk376\/7129e7fa53eeffb11bf4fbfef83707a2.js\"><\/script>\n\n\n\n<p class=\"wp-block-paragraph\">Then you need to set the desired behavior of your sparkles in the HTML by adding a RevealJS\u00a0EventListener\u00a0that acts when the fragment is shown(https:\/\/github.com\/hakimel\/reveal.js\/#fragment-events). This gets added into the\u00a0&lt;script>\u00a0tag where RevealJS is initialized:<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/vijaypk376\/482f0e5ec993fe50d50f5d40a4ce60ec.js\"><\/script>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial i&#8217;m going to desribe how to create an HTML slides presentation In Revealjs. Plz follow some easy [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":5835,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_joinchat":[],"footnotes":""},"categories":[5198],"tags":[5134,405,4459,5197],"class_list":["post-5821","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-reveal-js","tag-css","tag-github","tag-html","tag-revealjs"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to create an HTML slide presentation in reveal JS? - scmGalaxy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-create-an-html-slide-presentation-in-reveal-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to create an HTML slide presentation in reveal JS? - scmGalaxy\" \/>\n<meta property=\"og:description\" content=\"In this tutorial i&#8217;m going to desribe how to create an HTML slides presentation In Revealjs. Plz follow some easy [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-create-an-html-slide-presentation-in-reveal-js\/\" \/>\n<meta property=\"og:site_name\" content=\"scmGalaxy\" \/>\n<meta property=\"article:published_time\" content=\"2021-04-10T13:01:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-04-13T16:30:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/04\/how-to-create-an-html-slide-presentation-in-reveal-js.png\" \/>\n\t<meta property=\"og:image:width\" content=\"660\" \/>\n\t<meta property=\"og:image:height\" content=\"330\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"rajeshkumar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"rajeshkumar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-to-create-an-html-slide-presentation-in-reveal-js\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-to-create-an-html-slide-presentation-in-reveal-js\\\/\"},\"author\":{\"name\":\"rajeshkumar\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#\\\/schema\\\/person\\\/a40e0dd38feee7c2779460a804d49361\"},\"headline\":\"How to create an HTML slide presentation in reveal JS?\",\"datePublished\":\"2021-04-10T13:01:28+00:00\",\"dateModified\":\"2022-04-13T16:30:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-to-create-an-html-slide-presentation-in-reveal-js\\\/\"},\"wordCount\":350,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-to-create-an-html-slide-presentation-in-reveal-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/wp-content\\\/uploads\\\/2021\\\/04\\\/how-to-create-an-html-slide-presentation-in-reveal-js.png\",\"keywords\":[\"css\",\"github\",\"HTML\",\"revealjs\"],\"articleSection\":[\"Reveal JS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-to-create-an-html-slide-presentation-in-reveal-js\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-to-create-an-html-slide-presentation-in-reveal-js\\\/\",\"url\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-to-create-an-html-slide-presentation-in-reveal-js\\\/\",\"name\":\"How to create an HTML slide presentation in reveal JS? - scmGalaxy\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-to-create-an-html-slide-presentation-in-reveal-js\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-to-create-an-html-slide-presentation-in-reveal-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/wp-content\\\/uploads\\\/2021\\\/04\\\/how-to-create-an-html-slide-presentation-in-reveal-js.png\",\"datePublished\":\"2021-04-10T13:01:28+00:00\",\"dateModified\":\"2022-04-13T16:30:49+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#\\\/schema\\\/person\\\/a40e0dd38feee7c2779460a804d49361\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-to-create-an-html-slide-presentation-in-reveal-js\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-to-create-an-html-slide-presentation-in-reveal-js\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-to-create-an-html-slide-presentation-in-reveal-js\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/wp-content\\\/uploads\\\/2021\\\/04\\\/how-to-create-an-html-slide-presentation-in-reveal-js.png\",\"contentUrl\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/wp-content\\\/uploads\\\/2021\\\/04\\\/how-to-create-an-html-slide-presentation-in-reveal-js.png\",\"width\":660,\"height\":330},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/how-to-create-an-html-slide-presentation-in-reveal-js\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to create an HTML slide presentation in reveal JS?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#website\",\"url\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/\",\"name\":\"scmGalaxy\",\"description\":\"A Platform for Software Engineers\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/#\\\/schema\\\/person\\\/a40e0dd38feee7c2779460a804d49361\",\"name\":\"rajeshkumar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/82337e1fc8642c7f36795aa0775af055a4f38882994004b593efd31758d4434e?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/82337e1fc8642c7f36795aa0775af055a4f38882994004b593efd31758d4434e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/82337e1fc8642c7f36795aa0775af055a4f38882994004b593efd31758d4434e?s=96&d=mm&r=g\",\"caption\":\"rajeshkumar\"},\"url\":\"https:\\\/\\\/www.scmgalaxy.com\\\/tutorials\\\/author\\\/rajeshkumar\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to create an HTML slide presentation in reveal JS? - scmGalaxy","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-create-an-html-slide-presentation-in-reveal-js\/","og_locale":"en_US","og_type":"article","og_title":"How to create an HTML slide presentation in reveal JS? - scmGalaxy","og_description":"In this tutorial i&#8217;m going to desribe how to create an HTML slides presentation In Revealjs. Plz follow some easy [&hellip;]","og_url":"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-create-an-html-slide-presentation-in-reveal-js\/","og_site_name":"scmGalaxy","article_published_time":"2021-04-10T13:01:28+00:00","article_modified_time":"2022-04-13T16:30:49+00:00","og_image":[{"width":660,"height":330,"url":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/04\/how-to-create-an-html-slide-presentation-in-reveal-js.png","type":"image\/png"}],"author":"rajeshkumar","twitter_card":"summary_large_image","twitter_misc":{"Written by":"rajeshkumar","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-create-an-html-slide-presentation-in-reveal-js\/#article","isPartOf":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-create-an-html-slide-presentation-in-reveal-js\/"},"author":{"name":"rajeshkumar","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#\/schema\/person\/a40e0dd38feee7c2779460a804d49361"},"headline":"How to create an HTML slide presentation in reveal JS?","datePublished":"2021-04-10T13:01:28+00:00","dateModified":"2022-04-13T16:30:49+00:00","mainEntityOfPage":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-create-an-html-slide-presentation-in-reveal-js\/"},"wordCount":350,"commentCount":0,"image":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-create-an-html-slide-presentation-in-reveal-js\/#primaryimage"},"thumbnailUrl":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/04\/how-to-create-an-html-slide-presentation-in-reveal-js.png","keywords":["css","github","HTML","revealjs"],"articleSection":["Reveal JS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.scmgalaxy.com\/tutorials\/how-to-create-an-html-slide-presentation-in-reveal-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-create-an-html-slide-presentation-in-reveal-js\/","url":"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-create-an-html-slide-presentation-in-reveal-js\/","name":"How to create an HTML slide presentation in reveal JS? - scmGalaxy","isPartOf":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-create-an-html-slide-presentation-in-reveal-js\/#primaryimage"},"image":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-create-an-html-slide-presentation-in-reveal-js\/#primaryimage"},"thumbnailUrl":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/04\/how-to-create-an-html-slide-presentation-in-reveal-js.png","datePublished":"2021-04-10T13:01:28+00:00","dateModified":"2022-04-13T16:30:49+00:00","author":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#\/schema\/person\/a40e0dd38feee7c2779460a804d49361"},"breadcrumb":{"@id":"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-create-an-html-slide-presentation-in-reveal-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.scmgalaxy.com\/tutorials\/how-to-create-an-html-slide-presentation-in-reveal-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-create-an-html-slide-presentation-in-reveal-js\/#primaryimage","url":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/04\/how-to-create-an-html-slide-presentation-in-reveal-js.png","contentUrl":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-content\/uploads\/2021\/04\/how-to-create-an-html-slide-presentation-in-reveal-js.png","width":660,"height":330},{"@type":"BreadcrumbList","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/how-to-create-an-html-slide-presentation-in-reveal-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.scmgalaxy.com\/tutorials\/"},{"@type":"ListItem","position":2,"name":"How to create an HTML slide presentation in reveal JS?"}]},{"@type":"WebSite","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#website","url":"https:\/\/www.scmgalaxy.com\/tutorials\/","name":"scmGalaxy","description":"A Platform for Software Engineers","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.scmgalaxy.com\/tutorials\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.scmgalaxy.com\/tutorials\/#\/schema\/person\/a40e0dd38feee7c2779460a804d49361","name":"rajeshkumar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/82337e1fc8642c7f36795aa0775af055a4f38882994004b593efd31758d4434e?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/82337e1fc8642c7f36795aa0775af055a4f38882994004b593efd31758d4434e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/82337e1fc8642c7f36795aa0775af055a4f38882994004b593efd31758d4434e?s=96&d=mm&r=g","caption":"rajeshkumar"},"url":"https:\/\/www.scmgalaxy.com\/tutorials\/author\/rajeshkumar\/"}]}},"_links":{"self":[{"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/posts\/5821","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/comments?post=5821"}],"version-history":[{"count":2,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/posts\/5821\/revisions"}],"predecessor-version":[{"id":5838,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/posts\/5821\/revisions\/5838"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/media\/5835"}],"wp:attachment":[{"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/media?parent=5821"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/categories?post=5821"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.scmgalaxy.com\/tutorials\/wp-json\/wp\/v2\/tags?post=5821"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}