janishutz-legacy/impress.js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add documentation and examples for scaling to larger screens.

Browse Source 
Document all attributes to root element (#impress) in DOCUMENTATION.md.

For the main demo (/index.html) add width, height, max-scale, min-scale
attributes to the main demo. These just use the defaults, except
data-max-scale="3" which allows to scale to larger screens (HD, 4K).

For examples/classic-slides, add attributes to root element and set it
to target Full HD 1920 x 1080 resolution. Adjust CSS to match.

Add notification everywhere that defaults will change in 2021.
This commit is contained in:
Henrik Ingo
2020-03-23 14:25:15 +02:00
parent 6ced0516f6
commit 64dd0f4064
7 changed files with 173 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
DOCUMENTATION.md
View File

@@ -6,10 +6,55 @@
impress.js requires a Root Element. All the content of the presentation will be created inside that element. It is not recommended to manipulate any of the styles, attributes or classes that are created by impress.js inside the Root Element after initialization.
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.
All impress.js steps are wrapped inside a div element of 0 size! This means that in your CSS you
can't use relative values for width and height (example: `width: 100%`) to define the size of step elements.
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.
**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
See also [the plugin README](src/plugins/README.md) for documentation on `data-autoplay`.
**Attributes**
Attribute | Default | Explanation
-------------------------|-----------|------------
data-transition-duration | 1000 (ms) | Speed of transition between steps.
data-width | 1024 (px) | Width of target screen size. When presentation is viewed on a larger or smaller screen, impress.js will scale all content automatically.
data-height | 768 (px) | Height of target screen size.
data-max-scale | 1 | Maximum scale factor. (Note that the default 1 will not increase content size on larger screens!)
data-min-scale | 0 | Minimum scale factor.
data-perspective | 1000 | Perspective for 3D rendering. See https://developer.mozilla.org/en/CSS/perspective
**Example:**
```html
<div id="impress"></div>
<div id="impress"
data-transition-duration="1000"
data-width="1024"
data-height="768"
data-max-scale="3"
data-min-scale="0"
data-perspective="1000"
data-autoplay="7">
```
### 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.