```
### Step Element
@@ -31,6 +76,13 @@ In the Step Element, you can define a specific set of default attributes and pos
Define the pixel based position in which the **center** of the [Step Element](#step-element) will be positioned inside the infinite canvas.
+**Attributes**
+
+Attribute | Default | Explanation
+-------------------------|-----------|------------
+data-x | 0 | X coordinate for step position
+data-y | 0 | Y coordinate for step position
+
**Example:**
```html
@@ -273,7 +325,7 @@ api.init();
api.next();
```
-#### impress().prev()
+#### .prev()
Navigates to the previous step of the presentation using the [`goto()` function](#impressgotostepindexstepelementidstepelement-duration).
@@ -285,7 +337,7 @@ api.init();
api.prev();
```
-#### impress().goto( stepIndex | stepElementId | stepElement, [ duration ] )
+#### .goto( stepIndex | stepElementId | stepElement, [ duration ] )
Accepts a [`Number`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number) that represents the step index.
diff --git a/css/impress-demo.css b/css/impress-demo.css
index b92c76c..ddc7f34 100644
--- a/css/impress-demo.css
+++ b/css/impress-demo.css
@@ -205,6 +205,12 @@ a:focus {
;)
They cover everything what you see on first three steps of the demo.
+
+ All impress.js steps are wrapped inside a div element of 0 size! This means that relative
+ values for width and height (example: `width: 100%`) will not work. You need to use pixel
+ values. The pixel values used here correspond to the data-width and data-height given to the
+ #impress root element. When the presentation is viewed on a larger or smaller screen, impress.js
+ will automatically scale the steps to fit the screen.
*/
.slide {
display: block;
diff --git a/examples/classic-slides/css/classic-slides.css b/examples/classic-slides/css/classic-slides.css
index cbd821c..bbec845 100644
--- a/examples/classic-slides/css/classic-slides.css
+++ b/examples/classic-slides/css/classic-slides.css
@@ -7,7 +7,7 @@
http://www.webupd8.org/2011/01/automatically-install-all-google-web.html
*/
-/* @import url(http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic|Cutive+Mono); */
+/* @import url(https://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic|Cutive+Mono); */
@import url(fonts.css);
@@ -62,14 +62,14 @@ body {
.step {
position: relative;
- width: 900px;
- padding: 40px;
- margin: 20px auto;
+ width: 1800px;
+ padding: 60px;
+ margin: 60px auto;
box-sizing: border-box;
font-family: 'PT Serif', georgia, serif;
- font-size: 48px;
+ font-size: 60px;
line-height: 1.5;
}
/*
@@ -105,21 +105,21 @@ body {
.slide {
display: block;
- width: 900px;
- height: 700px;
+ width: 1850px;
+ height: 1000px;
padding: 40px 60px;
background-image: url(../images/background.png);
background-color: white;
- border: 1px solid rgba(0, 0, 0, .3);
- border-radius: 10px;
- box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
+ border: 2px solid rgba(0, 0, 0, .3);
+ border-radius: 30px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
- text-shadow: 0 2px 2px rgba(0, 0, 0, .1);
+ text-shadow: 0 3px 3px rgba(0, 0, 0, .2);
font-family: 'Open Sans', Arial, sans-serif;
- font-size: 30px;
- letter-spacing: -1px;
+ font-size: 45px;
+ letter-spacing: -2px;
}
@@ -137,15 +137,22 @@ body {
}
.slide li {
- margin: 0.2em;
+ margin-top: 0.2em;
+ margin-bottom: 0.2em;
+ margin-left: 3em;
+ margin-right: 3em;
}
/* Highlight.js used for coloring pre > code blocks. */
.slide pre > code {
- font-size: 14px;
+ font-size: 30px;
text-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
+.slide input {
+ font-size: 1em;
+}
+
/* Inline code, no Highlight.js */
code {
font-family: "Cutive mono","Courier New", monospace;
@@ -157,38 +164,38 @@ a {
text-decoration: none;
padding: 0 0.1em;
background: rgba(200,200,200,0.2);
- text-shadow: -1px 1px 2px rgba(100,100,100,0.9);
+ text-shadow: -2px 2px 4px rgba(100,100,100,0.9);
border-radius: 0.2em;
- border-bottom: 1px solid rgba(100,100,100,0.2);
- border-left: 1px solid rgba(100,100,100,0.2);
+ border-bottom: 3px solid rgba(100,100,100,0.2);
+ border-left: 3px solid rgba(100,100,100,0.2);
transition: 0.5s;
}
a:hover,
a:focus {
background: rgba(200,200,200,1);
- text-shadow: -1px 1px 2px rgba(100,100,100,0.5);
+ text-shadow: -2px 2px 3px rgba(100,100,100,0.5);
}
blockquote {
font-family: 'PT Serif';
font-style: italic;
- font-weight: 400;
+ font-weight: 400;
}
em {
- text-shadow: 0 2px 2px rgba(0, 0, 0, .3);
+ text-shadow: 0 6px 6px rgba(0, 0, 0, .3);
}
strong {
- text-shadow: -1px 1px 2px rgba(100,100,100,0.5);
+ text-shadow: -3px 3px 6px rgba(100,100,100,0.5);
}
q {
font-family: 'PT Serif';
font-style: italic;
font-weight: 400;
- text-shadow: 0 2px 2px rgba(0, 0, 0, .3);
+ text-shadow: 0 6px 6px rgba(0, 0, 0, .3);
}
strike {
@@ -200,34 +207,38 @@ small {
}
img {
- width: 300px
+ width: 600px
+}
+
+td {
+ padding: 0.2em;
}
.slide .right {
float: right;
- margin-left: 40px;
+ margin-left: 60px;
margin-right: 0px;
- margin-top: 20px;
- margin-bottom: 20px;
+ margin-top: 40px;
+ margin-bottom: 40px;
}
.slide .left {
float: left;
- margin-right: 40px;
+ margin-right: 60px;
margin-left: 0px;
- margin-top: 20px;
- margin-bottom: 20px;
+ margin-top: 40px;
+ margin-bottom: 40px;
}
.slide .top {
position: absolute;
- top: 20px;
- margin-bottom: 20px;
+ top: 40px;
+ margin-bottom: 40px;
margin-top: 0px;
}
.slide .bottom {
position: absolute;
- bottom: 20px;
+ bottom: 40px;
margin-bottom: 0px;
- margin-top: 20px;
+ margin-top: 40px;
}
/*
@@ -242,13 +253,13 @@ img {
.title h2,
.title h3 {
position: absolute;
- left: 45px; /* slide width is 900px, so this is like a 5% margin on both sides */
+ left: 90px; /* slide width is 1800px, so this is like a 5% margin on both sides */
width: 90%;
- text-align: center;
+ text-align: center;
}
.title h1 { top: 50px; }
-.title h2 { top: 400px; }
-.title h3 { top: 500px; }
+.title h2 { top: 600px; }
+.title h3 { top: 800px; }
@@ -258,7 +269,7 @@ img {
fly-in class starts from a position outside the slide, then flies into it's correct position.
*/
.future .fly-in {
- transform: translateY(-700px);
+ transform: translateY(-2100px);
opacity: 0.0; /* Make it invisible, just so it doesn't clutter some other slide that might be in the position where we moved it */
}
.present .fly-in {
@@ -267,7 +278,7 @@ img {
transition: 2s;
}
.past .fly-out {
- transform: translateY(700px);
+ transform: translateY(2100px);
opacity: 0.0;
transition: 2s;
}
@@ -400,10 +411,10 @@ body.impress-mouse-timeout {
#acme-graph-bottom {
position: absolute;
bottom: 100px;
- left: 440px;
+ right: 200px;
background-color: black;
- width: 410px;
- height: 2px;
+ width: 900px;
+ height: 3px;
}
/* height: is set from javascript */
@@ -412,30 +423,30 @@ body.impress-mouse-timeout {
#acme-graph-q3,
#acme-graph-q4 {
border: solid 1px black;
- width: 70px;
- margin-left: 10px;
+ width: 140px;
+ margin-left: 30px;
position: absolute;
bottom: 100px;
}
#acme-graph-q1 {
background-color: red;
- left: 450px;
+ right: 900px;
}
#acme-graph-q2 {
background-color: blue;
- left: 550px;
+ right: 700px;
}
#acme-graph-q3 {
background-color: green;
- left: 650px;
+ right: 500px;
}
#acme-graph-q4 {
background-color: purple;
- left: 750px;
+ right: 300px;
}
/*
diff --git a/examples/classic-slides/images/background-title.png b/examples/classic-slides/images/background-title.png
index 4a3ec21..997dcf4 100644
Binary files a/examples/classic-slides/images/background-title.png and b/examples/classic-slides/images/background-title.png differ
diff --git a/examples/classic-slides/images/background.png b/examples/classic-slides/images/background.png
index d109c0c..5ac0492 100644
Binary files a/examples/classic-slides/images/background.png and b/examples/classic-slides/images/background.png differ
diff --git a/examples/classic-slides/index.html b/examples/classic-slides/index.html
index f1c0c24..0200ce3 100644
--- a/examples/classic-slides/index.html
+++ b/examples/classic-slides/index.html
@@ -73,11 +73,24 @@
data-transition-duration sets the time in microseconds that is used for the
animation when transtitioning between slides.
+ The width, height, scale and perspective options define a target screen size that you should
+ design your CSS against. impress.js will automatically scale all content to different screen
+ sizes. See DOCUMENTATION.md for details. Below, I have targeted full HD screen resolution.
+
data-autoplay can be used to set the time in seconds, after which presentation
automatically moves to next slide. It can also be set individually for each
slide, but here we just set a common duration for all slides.
-->
-
+
-
+
Example Presentation:
Classic Slides
Henrik Ingo
@@ -114,7 +127,7 @@
-
+
Table of Contents
- A title slide
@@ -134,7 +147,7 @@
Note that instead of absolute positioning we use relative positioning,
with the data-rel-x and data-rel-y attributes. This means the step is
positioned relative to the foregoing step. In other words, this is
- equivalent to data-x="0" data-y="-1500".
+ equivalent to data-x="0" data-y="-3000".
@@ -174,7 +187,7 @@
Notation shouldn't be a surprise. We use `data-rotate="30"` attribute, meaning that this
element should be rotated by 30 degrees clockwise.
-->
-
+
A blockquote & image
-
+
More text styles
As usual, use em to emphasize,
strong for strong, u for underline,
@@ -202,7 +215,7 @@
-
+
Motion effects 101
Items on the slide can
Fly in
@@ -232,7 +245,7 @@
-
+
Add-ons
This version of impress.js includes several add-ons, striving to make this a
@@ -240,7 +253,7 @@
-
-
+
Highlight.js
// `init` API function that initializes (and runs) the presentation.
@@ -289,7 +302,7 @@
-
+
Mermaid.js
%% This is a comment in mermaid markup
@@ -316,7 +329,7 @@
-
+
# Markdown.js
* [Markdown.js](https://github.com/evilstreak/markdown-js) integration: for authors in a hurry!
@@ -330,7 +343,7 @@
* [A more advanced Markdown presentation is here.](../markdown/)
-
+
- Remember, in impress.js the full power of HTML5, CSS3 & JavaScript is always at your fingertips!
- For example, you can use tables, forms, or dynamic charts as you would on any web page:
@@ -384,7 +397,7 @@
// Draw the bar graph
for ( var q in profits ) {
- var h = 200 * profits[q] / max;
+ var h = 300 * profits[q] / max;
var div = document.getElementById('acme-graph-'+q);
div.style = 'height: ' + h + 'px';
}
@@ -398,7 +411,7 @@
in the root div#impress element, but it is also allowed to set it for each step. Since transitioning
to this step will rotate twice around it's axis, we give the transition a bit more time here.
-->
-
+
More info
- DOCUMENTATION.md is the API reference.
@@ -428,7 +441,7 @@
It's a common way of zooming out at the end, to show the whole presentation.
In CSS, we set pointer-events:none to make this slide non-clickable.
It makes a difference at least for SVG content, such as the mermaid diagram. -->
-
diff --git a/index.html b/index.html
index 7fb5fad..6e5e446 100644
--- a/index.html
+++ b/index.html
@@ -130,25 +130,40 @@
That's the wrapper for your presentation steps. In this element all the impress.js magic happens.
It doesn't have to be a `
`. Only `id` is important here as that's how the script find it.
- You probably won't need it now, but there are some configuration options that can be set on this element.
-
+ Often you don't need to use any attributes here, but for educational purposes I have used all of them below.
+
To change the duration of the transition between slides use `data-transition-duration="2000"` giving it
a number of ms. It defaults to 1000 (1s).
+ When authoring impress.js presentations, you should target some screen size, which you can define here.
+ The default is 1024 x 768. You should write your CSS as if this is the screen size used for the
+ presentation. When you present your presentation on a screen (or browser window) of different size,
+ impress.js will automatically scale the presentation to fit the screen. The minimum and maximum limits
+ to this scaling can also be defined here.
+
+ NOTE: I intend to change the defaults to target HD screens in 2021. So you may want to make a habit
+ of explicitly defining these attributes for now, to avoid any disruption when the defaults change.
+
You can also control the perspective with `data-perspective="500"` giving it a number of pixels.
It defaults to 1000. You can set it to 0 if you don't want any 3D effects.
If you are willing to change this value make sure you understand how CSS perspective works:
https://developer.mozilla.org/en/CSS/perspective
- But as I said, you won't need it for now, so don't worry - there are some simple but interesting things
- right around the corner of this tag ;)
+ Plugins:
- ----------
- Plugins: We set the default time for autoplay plugin to 6 seconds. Autoplay will automatically advance
+ We set the default time for autoplay plugin to 7 seconds. Autoplay will automatically advance
to next slide after a timeout expires.
-
-->
-