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

finished build script

Browse Source
This commit is contained in:
Janis Hutz
2023-02-23 19:17:08 +01:00
parent 784541d9ab
commit e0dca1e82f
7 changed files with 124 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
website/docs/reference/HTML.html
View File

@@ -17,8 +17,8 @@
<div id="top"></div>
<div id="docPage">
<div id="doc-container">
<h2>HTML</h2>
<h3>Root Element</h3>
<h2 id="html">HTML</h2>
<h3 id="root-element">Root Element</h3>
<p>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.</p>
<p>To change the duration of the transition between slides use <code>data-transition-duration=&quot;2000&quot;</code> giving it
a number of ms. It defaults to 1000 (1s).</p>
@@ -41,7 +41,7 @@ to be affected. In order to get back the old target resolution, use:</p>
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</p>
<p>See also <a href="src/plugins/README.md">the plugin README</a> for documentation on <code>data-autoplay</code>.</p>
<p>See also <a href="/docs/plugins/">the plugin README</a> for documentation on <code>data-autoplay</code>.</p>
<p><strong>Attributes</strong></p>
<table>
<thead>
@@ -96,7 +96,7 @@ https://developer.mozilla.org/en/CSS/perspective</p>
data-autoplay=&quot;7&quot;&gt;
</code></pre>
<h3>Step Element</h3>
<h3 id="step-element">Step Element</h3>
<p>A Step Element is an element that contains metadata that defines how it is going to be presented in the screen.
A Step Element should contain a <code>.step</code> class and an optional <code>id</code> attribute.
The content represents an html fragment that will be positioned at the center of the camera.
@@ -106,8 +106,8 @@ In the Step Element, you can define a specific set of default attributes and pos
&lt;q&gt;Aren’t you just &lt;b&gt;bored&lt;/b&gt; with all those slides-based presentations?&lt;/q&gt;
&lt;/div&gt;
</code></pre>
<h4>2D Coordinates Positioning (data-x, data-y)</h4>
<p>Define the pixel based position in which the <strong>center</strong> of the <a href="#step-element">Step Element</a> will be positioned inside the infinite canvas.</p>
<h4 id="2d-coordinates-positioning-data-x--data-y">2D Coordinates Positioning (data-x, data-y)</h4>
<p>Define the pixel based position in which the <strong>center</strong> of the <a href="/docs/reference/HTML.html#step-element">Step Element</a> will be positioned inside the infinite canvas.</p>
<p><strong>Attributes</strong></p>
<table>
<thead>
@@ -135,8 +135,8 @@ In the Step Element, you can define a specific set of default attributes and pos
&lt;q&gt;Aren’t you just &lt;b&gt;bored&lt;/b&gt; with all those slides-based presentations?&lt;/q&gt;
&lt;/div&gt;
</code></pre>
<h4>2D Scaling (data-scale)</h4>
<p>Defines the scaling multiplier of the <a href="#step-element">Step Element</a> relative to other Step Elements. For example, <code>data-scale=&quot;4&quot;</code> means that the element will appear to be 4 times larger than the others. From the presentation and transitions point of view, it means that it will have to be scaled down (4 times) to make it back to its correct size.</p>
<h4 id="2d-scaling-data-scale">2D Scaling (data-scale)</h4>
<p>Defines the scaling multiplier of the <a href="/docs/reference/HTML.html#step-element">Step Element</a> relative to other Step Elements. For example, <code>data-scale=&quot;4&quot;</code> means that the element will appear to be 4 times larger than the others. From the presentation and transitions point of view, it means that it will have to be scaled down (4 times) to make it back to its correct size.</p>
<p><strong>Example:</strong></p>
<pre><code class="language-html">&lt;div id=&quot;title&quot; class=&quot;step&quot; data-x=&quot;0&quot; data-y=&quot;0&quot; data-scale=&quot;4&quot;&gt;
&lt;span class=&quot;try&quot;&gt;then you should try&lt;/span&gt;
@@ -144,7 +144,7 @@ In the Step Element, you can define a specific set of default attributes and pos
&lt;span class=&quot;footnote&quot;&gt;&lt;sup&gt;*&lt;/sup&gt; no rhyme intended&lt;/span&gt;
&lt;/div&gt;
</code></pre>
<h4>2D Rotation (data-rotate)</h4>
<h4 id="2d-rotation-data-rotate">2D Rotation (data-rotate)</h4>
<p>Represents the amount of clockwise rotation of the element relative to 360 degrees.</p>
<p><strong>Example:</strong></p>
<pre><code class="language-html">&lt;div id=&quot;its&quot; class=&quot;step&quot; data-x=&quot;850&quot; data-y=&quot;3000&quot; data-rotate=&quot;90&quot; data-scale=&quot;5&quot;&gt;
@@ -155,18 +155,18 @@ In the Step Element, you can define a specific set of default attributes and pos
&lt;/p&gt;
&lt;/div&gt;
</code></pre>
<h4>3D Coordinates Positioning (data-z)</h4>
<p>Define the pixel based position in which the <strong>center</strong> of the <a href="#step-element">Step Element</a> will be positioned inside the infinite canvas on the third dimension (Z) axis. For example, if we use <code>data-z=&quot;-3000&quot;</code>, it means that the <a href="#step-element">Step Element</a> will be positioned far away from the camera (by 3000px).</p>
<h4 id="3d-coordinates-positioning-data-z">3D Coordinates Positioning (data-z)</h4>
<p>Define the pixel based position in which the <strong>center</strong> of the <a href="/docs/reference/HTML.html#step-element">Step Element</a> will be positioned inside the infinite canvas on the third dimension (Z) axis. For example, if we use <code>data-z=&quot;-3000&quot;</code>, it means that the <a href="/docs/reference/HTML.html#step-element">Step Element</a> will be positioned far away from the camera (by 3000px).</p>
<p><strong>Example:</strong></p>
<pre><code class="language-html">&lt;div id=&quot;tiny&quot; class=&quot;step&quot; data-x=&quot;2825&quot; data-y=&quot;2325&quot; data-z=&quot;-3000&quot; data-rotate=&quot;300&quot; data-scale=&quot;1&quot;&gt;
&lt;p&gt;and &lt;b&gt;tiny&lt;/b&gt; ideas&lt;/p&gt;
&lt;/div&gt;
</code></pre>
<p><strong>Note:</strong> The introduction of the <a href="src/plugins/rel/README.md">rel</a> plugin includes a slight backward incompatible change.
<p><strong>Note:</strong> The introduction of the <a href="/docs/plugins/rel/">rel</a> plugin includes a slight backward incompatible change.
Previously the default value for <code>data-x</code>, <code>data-y</code> and <code>data-z</code> was zero. The <code>rel</code> plugin changes the default to inherit
the value of the previous slide. This means, you need to explicitly set these values to zero, if they ever were non-zero.</p>
<h4>3D Rotation (data-rotate-x, data-rotate-y, data-rotate-z)</h4>
<p>You can not only position a <a href="#step-element">Step Element</a> in 3D, but also rotate it around any axis.</p>
<h4 id="3d-rotation-data-rotate-x--data-rotate-y--data-rotate-z">3D Rotation (data-rotate-x, data-rotate-y, data-rotate-z)</h4>
<p>You can not only position a <a href="/docs/reference/HTML.html#step-element">Step Element</a> in 3D, but also rotate it around any axis.</p>
<p><strong>Example:</strong></p>
<p>The example below will get rotated by -40 degrees (40 degrees anticlockwise) around X axis and 10 degrees (clockwise) around Y axis.</p>
<p>You can of course rotate it around Z axis with <code>data-rotate-z</code> - it has exactly the same effect as <code>data-rotate</code> (these two are basically aliases).</p>
@@ -182,9 +182,9 @@ the value of the previous slide. This means, you need to explicitly set these va
&lt;span class=&quot;footnote&quot;&gt;* beat that, prezi ;)&lt;/span&gt;
&lt;/div&gt;
</code></pre>
<h4>3D Rotation Order (data-rotate-order)</h4>
<h4 id="3d-rotation-order-data-rotate-order">3D Rotation Order (data-rotate-order)</h4>
<p>The order in which the CSS <code>rotateX(), rotateY(), rotateZ()</code> transforms are applied matters. This is because each rotation is relative to the then current position of the element.</p>
<p>By default the rotation order is <code>data-rotate-order=&quot;xyz&quot;</code>. For some advanced uses you may need to change it. The demo presentation <a href="/demo/examples/3D-rotations/index.html3D rotations</a> sets this attribute to rotate some steps into positions that are impossible to reach with the default order.</p>
<p>By default the rotation order is <code>data-rotate-order=&quot;xyz&quot;</code>. For some advanced uses you may need to change it. The demo presentation <a href="examples/3D-rotations/index.html">3D rotations</a> sets this attribute to rotate some steps into positions that are impossible to reach with the default order.</p>
</div>
</div>
<div id="footer"></div>