Stack Overflow
Stack Overflow

Questions tagged [impress.js]

a JavaScript framework for creating presentations using HTML5 and CSS3.

Impress.js is a small, 33 kB unminified, framework for creating slide presentations using and . A demonstration presentation and the impress.js source code are available at GitHub.

84 questions
2
votes
1 answer

Smaller slide margins in impress.js?

Impress.js seems to default to slides with a huge left margin (or padding -- I can't quite get Firefox's Inspector to tell me clearly). I have a slide with a pretty wide 
 block that would fit if it was actually left aligned, but won't fit on a…
Amanda
  • 12,099
  • 17
  • 63
  • 91
2
votes
0 answers

how to add audio events to "present" slides in an impress.js presentation?

I am trying to add audio events to slides in an impress.js presentation, where a new audio file will play when the "present" slide loads (or where each slide will play back a selection from the same audio file). I have tried a few options,…
botdag
  • 21
  • 2
2
votes
1 answer

Why impress.js does not rotate

I am messing a around with impress.js a little. I wanted 4 slides and wanted to make it to look like there is a square in the middle. My code looks like this: my first presentation using…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/html" class="post-tag grid--cell" title="show questions tagged 'html'" rel="tag">html</a> <a href="../../questions/tagged/css" class="post-tag grid--cell" title="show questions tagged 'css'" rel="tag">css</a> <a href="../../questions/tagged/impress.js" class="post-tag grid--cell" title="show questions tagged 'impress.js'" rel="tag">impress.js</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card__deleted"> <time class="s-user-card--time" datetime="asked Sep 30 '13 at 06:58">asked Sep 30 '13 at 06:58</time> <div class="s-avatar s-avatar__32 s-user-card--avatar"> </div> <div class="s-user-card--info">user2746203</div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-17043356"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>2</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status answered-accepted"> <strong>1</strong> answer </div> </div> </div> <div class="summary"> <h3><a href="../../questions/17043356/how-to-fade-in-out-images-with-impress-js" class="question-hyperlink">How to fade in/out images with impress.js</a></h3> <div class="excerpt">As you can see in this example, when you press < RIGHT > key, another images appear over the existing one. Looking at the source code there is only one image .svg:…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/svg" class="post-tag grid--cell" title="show questions tagged 'svg'" rel="tag">svg</a> <a href="../../questions/tagged/presentation" class="post-tag grid--cell" title="show questions tagged 'presentation'" rel="tag">presentation</a> <a href="../../questions/tagged/impress.js" class="post-tag grid--cell" title="show questions tagged 'impress.js'" rel="tag">impress.js</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Jun 11 '13 at 11:49">asked Jun 11 '13 at 11:49</time> <a href="../../users/824963/filippo" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/824963.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="filippo" /> </a> <div class="s-user-card--info"> <a href="../../users/824963/filippo" class="s-user-card--link">filippo</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">839</li> <li class="s-award-bling s-award-bling__gold" title="2 gold badges">2</li> <li class="s-award-bling s-award-bling__silver" title="13 silver badges">13</li> <li class="s-award-bling s-award-bling__bronze" title="25 bronze badges">25</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-16853349"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>2</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status "> <strong>1</strong> answer </div> </div> </div> <div class="summary"> <h3><a href="../../questions/16853349/how-to-make-impressjs-work-on-ie10" class="question-hyperlink">How to make ImpressJS work on IE10?</a></h3> <div class="excerpt">I am not able to make impressJS work on IE10. I wanted to know which all polyfills are required to be inserted in order to make impressJS work ? </div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/internet-explorer-10" class="post-tag grid--cell" title="show questions tagged 'internet-explorer-10'" rel="tag">internet-explorer-10</a> <a href="../../questions/tagged/polyfills" class="post-tag grid--cell" title="show questions tagged 'polyfills'" rel="tag">polyfills</a> <a href="../../questions/tagged/impress.js" class="post-tag grid--cell" title="show questions tagged 'impress.js'" rel="tag">impress.js</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked May 31 '13 at 08:47">asked May 31 '13 at 08:47</time> <a href="../../users/519305/shiv-kumar-ganesh" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/519305.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Shiv Kumar Ganesh" /> </a> <div class="s-user-card--info"> <a href="../../users/519305/shiv-kumar-ganesh" class="s-user-card--link">Shiv Kumar Ganesh</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">3,799</li> <li class="s-award-bling s-award-bling__gold" title="10 gold badges">10</li> <li class="s-award-bling s-award-bling__silver" title="46 silver badges">46</li> <li class="s-award-bling s-award-bling__bronze" title="85 bronze badges">85</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-16560281"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>2</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status answered-accepted"> <strong>1</strong> answer </div> </div> </div> <div class="summary"> <h3><a href="../../questions/16560281/can-t-get-impress-js-working" class="question-hyperlink">Can't get impress.js working</a></h3> <div class="excerpt">I tried to start with impress.js to create some HTML/CSS3 presentations. Unfortunately I cannot get even the simplest example working. <html lang="en"> <head> <title>Impress Demo
Matthias
  • 9,817
  • 14
  • 66
  • 125
2
votes
2 answers

How does Impress.js's CSS work?

I was reading about Impress.js and I have some questions about the code below (Part of the Inpress's demo). .impress-enabled .step { margin: 0; opacity: 0.3; -webkit-transition: opacity 1s; -moz-transition: opacity 1s; …
Sourabh
  • 8,243
  • 10
  • 52
  • 98
2
votes
4 answers

Change background color for different slides

I am trying impress.js out but I wonder i there is a way to change the background color of the body for some slides. I would like my first 3 slides to have a different background then the rest.
pethel
  • 5,397
  • 12
  • 55
  • 86
2
votes
1 answer

Can I render a webkit page to HD video?

First I was wondering if it would be possible to make a good HD video from a prezi slideshow or something like impress.js. I've seen people trying to make screencasts from their browser page, but the quality is often sub optimal. (motion often not…
Batist
  • 303
  • 2
  • 9
2
votes
1 answer

Simple impress.js does not work

Somehow even the simplest ground up impress.js slide does not work for me :( http://dl.dropbox.com/u/655237/events/GTG.zip … , Always have to use your example. Impress Demo …
Neil
  • 5,919
  • 15
  • 58
  • 85
2
votes
2 answers

How to use impress.js to create non-fullscreen presentations?

How do I use impress.js to create a presentation that does not fill the full page? I need to use it as a banner as part of an existing web page.
Josh
  • 13,530
  • 29
  • 114
  • 159
2
votes
1 answer

impress.js: How to run function on slide #id and class .active (or slide enter)?

How do make a video play on slide enter, and make it stop on slide exit with impress.js? Upon entering a slide, there is a class ".active". In fact, I can just use a unique ID, I just need to know how to tell impress.js to run on slide…
sandraqu
  • 1,428
  • 1
  • 14
  • 31
1
vote
1 answer

Auto press the spacebar key after every 5 seconds

I am using the impress.js and when ever the user presses the space bar, the script moves text around on the screen. Is there a way to have the spacebar be pressed every 5 seconds? Or is there a way to have the impress.js auto move onto the next…
nmacbook.nick
  • 151
  • 1
  • 7
1
vote
2 answers

Snowpack cannot import JavaScript from node_modules

I'm currently using Snowpack to build/prepare an application. I'm trying to import a JavaScript library I installed as part of the dependencies (block) in the package.json file, but somehow Snowpack is not picking up the library. This is (an excerpt…
x80486
  • 6,627
  • 5
  • 52
  • 111
1
vote
1 answer

Impress.js + Firefox: How to disable advance slide on mouse click

Impress.js works great in Chrome, but unfortunately, it's somewhat buggy in Firefox.  The biggest problem that I am having is that, in Firefox, the slideshow advances to the next slide on every mouse click.  Does anybody know of a way to disable…
dgoverde
  • 110
  • 2
  • 15
1
2
3 4 5 6