Artigo - Reveal.js | Exemplo 1

In this example below you will see how to do a Artigo - Reveal.js | Exemplo 1 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by DiegoPinho, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright DiegoPinho ©
  • HTML
  • CSS
  • JavaScript
    <div class="reveal">
  <div class="slides">
    <section>Slide 1</section>
    <section>Slide 2</section>
  </div>
</div>

/*Downloaded from https://www.codeseek.co/DiegoPinho/artigo-revealjs-or-exemplo-1-erjENL */
    
/**
 * Black theme for reveal.js.
 *
 * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
 */
@import url(https://fonts.googleapis.com/css?family=Montserrat:700);

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic);

/*********************************************
 * GLOBAL STYLES
 *********************************************/

body {
  background: #111;
  background-color: #111;
}

.reveal {
  font-family: "Open Sans", sans-serif;
  font-size: 30px;
  font-weight: normal;
  color: #eee;
}

::selection {
  color: #fff;
  background: #e7ad52;
  text-shadow: none;
}

.reveal {
  .slides > section {
    line-height: 1.3;
    font-weight: inherit;
    > section {
      line-height: 1.3;
      font-weight: inherit;
    }
  }
  
  h1, h2, h3, h4, h5, h6 {
    margin: 0 0 20px 0;
    color: #eee;
    font-family: "Montserrat", Impact, sans-serif;
    font-weight: normal;
    line-height: 1.2;
    letter-spacing: -0.03em;
    text-transform: none;
    text-shadow: none;
    word-wrap: break-word;
  }
  h1 {
    font-size: 3.77em;
  }
  h2 {
    font-size: 2.11em;
  }
  h3 {
    font-size: 1.55em;
  }
  h4 {
    font-size: 1em;
  }
  h1 {
    text-shadow: none;
  }
  p {
    margin: 20px 0;
    line-height: 1.3;
  }
  img, video, iframe {
    max-width: 95%;
    max-height: 95%;
  }
  strong, b {
    font-weight: bold;
  }
  em {
    font-style: italic;
  }
  ol, dl, ul {
    display: inline-block;
    text-align: left;
    margin: 0 0 0 1em;
  }
  ol {
    list-style-type: decimal;
  }
  ul {
    list-style-type: disc;
    ul {
      list-style-type: square;
      ul {
        list-style-type: circle;
      }
      display: block;
      margin-left: 40px;
    }
    ol {
      display: block;
      margin-left: 40px;
    }
  }
  ol {
    ol, ul {
      display: block;
      margin-left: 40px;
    }
  }
  dt {
    font-weight: bold;
  }
  dd {
    margin-left: 40px;
  }
  q {
    quotes: none;
  }
  blockquote {
    quotes: none;
    display: block;
    position: relative;
    width: 70%;
    margin: 20px auto;
    padding: 5px;
    font-style: italic;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
    p {
      &:first-child, &:last-child {
        display: inline-block;
      }
    }
  }
  q {
    font-style: italic;
  }
  pre {
    display: block;
    position: relative;
    width: 90%;
    margin: 20px auto;
    text-align: left;
    font-size: 0.55em;
    font-family: monospace;
    line-height: 1.2em;
    word-wrap: break-word;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
  }
  code {
    font-family: monospace;
  }
  pre code {
    display: block;
    padding: 5px;
    overflow: auto;
    max-height: 400px;
    word-wrap: normal;
  }
  table {
    margin: auto;
    border-collapse: collapse;
    border-spacing: 0;
    th {
      font-weight: bold;
      text-align: left;
      padding: 0.2em 0.5em 0.2em 0.5em;
      border-bottom: 1px solid;
    }
    td {
      text-align: left;
      padding: 0.2em 0.5em 0.2em 0.5em;
      border-bottom: 1px solid;
    }
    th[align="center"], td[align="center"] {
      text-align: center;
    }
    th[align="right"], td[align="right"] {
      text-align: right;
    }
    tbody tr:last-child {
      th, td {
        border-bottom: none;
      }
    }
  }
  sup {
    vertical-align: super;
  }
  sub {
    vertical-align: sub;
  }
  small {
    display: inline-block;
    font-size: 0.6em;
    line-height: 1.2em;
    vertical-align: top;
    * {
      vertical-align: top;
    }
  }
  a {
    color: #e7ad52;
    text-decoration: underline;
    -webkit-transition: color .15s ease;
    -moz-transition: color .15s ease;
    transition: color .15s ease;
    &:hover {
      color: #f3d7ac;
      text-shadow: none;
      border: none;
    }
  }
  .roll span:after {
    color: #fff;
    background: #d08a1d;
  }
  section img {
    margin: 15px 0px;
    background: rgba(255, 255, 255, 0.12);
    border: 4px solid #eee;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    &.plain {
      border: 0;
      box-shadow: none;
    }
  }
  a {
    img {
      -webkit-transition: all .15s linear;
      -moz-transition: all .15s linear;
      transition: all .15s linear;
    }
    &:hover img {
      background: rgba(255, 255, 255, 0.2);
      border-color: #e7ad52;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
    }
  }
  .controls {
    .navigate-left {
      border-right-color: #e7ad52;
      &.enabled {
        border-right-color: #e7ad52;
      }
    }
    .navigate-right {
      border-left-color: #e7ad52;
      &.enabled {
        border-left-color: #e7ad52;
      }
    }
    .navigate-up {
      border-bottom-color: #e7ad52;
      &.enabled {
        border-bottom-color: #e7ad52;
      }
    }
    .navigate-down {
      border-top-color: #e7ad52;
      &.enabled {
        border-top-color: #e7ad52;
      }
    }
    .navigate-left.enabled:hover {
      border-right-color: #f3d7ac;
    }
    .navigate-right.enabled:hover {
      border-left-color: #f3d7ac;
    }
    .navigate-up.enabled:hover {
      border-bottom-color: #f3d7ac;
    }
    .navigate-down.enabled:hover {
      border-top-color: #f3d7ac;
    }
  }
  .progress {
    background: rgba(0, 0, 0, 0.2);
    span {
      background: #e7ad52;
      -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
      -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
      transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
    }
  }
}


/*Downloaded from https://www.codeseek.co/DiegoPinho/artigo-revealjs-or-exemplo-1-erjENL */
    Reveal.initialize({
  
  theme: 'white',

	// Display controls in the bottom right corner
	controls: true,

	// Display a presentation progress bar
	progress: true,

	// Set default timing of 2 minutes per slide
	defaultTiming: 120,

	// Display the page number of the current slide
	slideNumber: false,

	// Push each slide change to the browser history
	history: false,

	// Enable keyboard shortcuts for navigation
	keyboard: true,

	// Enable the slide overview mode
	overview: true,

	// Vertical centering of slides
	center: true,

	// Enables touch navigation on devices with touch input
	touch: true,

	// Loop the presentation
	loop: false,

	// Change the presentation direction to be RTL
	rtl: false,

	// Randomizes the order of slides each time the presentation loads
	shuffle: false,

	// Turns fragments on and off globally
	fragments: true,

	// Flags if the presentation is running in an embedded mode,
	// i.e. contained within a limited portion of the screen
	embedded: false,

	// Flags if we should show a help overlay when the questionmark
	// key is pressed
	help: true,

	// Flags if speaker notes should be visible to all viewers
	showNotes: false,

	// Global override for autolaying embedded media (video/audio/iframe)
	// - null: Media will only autoplay if data-autoplay is present
	// - true: All media will autoplay, regardless of individual setting
	// - false: No media will autoplay, regardless of individual setting
	autoPlayMedia: null,

	// Number of milliseconds between automatically proceeding to the
	// next slide, disabled when set to 0, this value can be overwritten
	// by using a data-autoslide attribute on your slides
	autoSlide: 0,

	// Stop auto-sliding after user input
	autoSlideStoppable: true,

	// Use this method for navigation when auto-sliding
	autoSlideMethod: Reveal.navigateNext,

	// Enable slide navigation via mouse wheel
	mouseWheel: false,

	// Hides the address bar on mobile devices
	hideAddressBar: true,

	// Opens links in an iframe preview overlay
	previewLinks: false,

	// Transition style
	transition: 'slide', // none/fade/slide/convex/concave/zoom

	// Transition speed
	transitionSpeed: 'default', // default/fast/slow

	// Transition style for full page slide backgrounds
	backgroundTransition: 'fade', // none/fade/slide/convex/concave/zoom

	// Number of slides away from the current that are visible
	viewDistance: 3,

	// Parallax background image
	parallaxBackgroundImage: '', // e.g. "'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'"

	// Parallax background size
	parallaxBackgroundSize: '', // CSS syntax, e.g. "2100px 900px"

	// Number of pixels to move the parallax background per slide
	// - Calculated automatically unless specified
	// - Set to 0 to disable movement along an axis
	parallaxBackgroundHorizontal: null,
	parallaxBackgroundVertical: null,

	// The display mode that will be used to show slides
	display: 'block',
  
  width: 960,
	height: 700,

	// Factor of the display size that should remain empty around the content
	margin: 0.1,

	// Bounds for smallest/largest possible scale to apply to content
	minScale: 0.2,
	maxScale: 1.5

});

Comments