Reveal.JS

by Shaxrillo

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/reveal.js/2.5.0/css/reveal.min.css">
<script src="//cdn.jsdelivr.net/reveal.js/2.5.0/lib/js/head.min.js"></script>
<script src="//cdn.jsdelivr.net/reveal.js/2.5.0/js/reveal.min.js"></script>
<div class="reveal">
    <div class="slides" id="slides">
        <section>
          <h1>Maqsad</h1>
          <ul>
            <li>Soddalashtirilga sayt yaratish</li>
            <li>Hechqanday programma tillarisiz</li>
            <li>Sayt yaratilishidan oldin sayt yaratilishiga oid savollar berish </li>
            <li>Va shu savollar buyicha foydalanuvchi talabiga tayyor saytlar ro'yxatini chiqarish</li>
          </ul>
        </section>
        <section data-background="http://www.cismst.org/typo3temp/pics/1dd4cb4f88.jpg" data-state="thisState"></section>
    </div>
    <!-- /slides -->
</div>
<!-- /reveal -->

CSS

html.thisState .state-background {
     
     /* background image is NOT changed, but the backgroundcolor changes */

     background-color: rgba(0, 0, 0, 0.8);
     background-image: url('http://pngimg.com/upload/small/key_PNG1180.png');
     /* webkit-filter: blur(5px);
     -moz-filter: blur(5px);
     -o-filter: blur(5px);
     -ms-filter: blur(5px);
     filter: blur(5px); */
 }

JavaScript

Reveal.initialize({
      controls: true,
      progress: true,
      history: true,
      center: false,
      transition: 'none',
      slideNumber: true
  });