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

18
website/docs/reference/CSS.html
View File

@@ -17,29 +17,29 @@
<div id="top"></div>
<div id="docPage">
<div id="doc-container">
<h2>CSS</h2>
<h3>4D States (.past, .present and .future classes)</h3>
<p>The <code>.future</code> class is added to all <a href="#step-element">Step Elements</a> that haven't been visited yet.</p>
<h2 id="css">CSS</h2>
<h3 id="4d-states--past---present-and--future-classes">4D States (.past, .present and .future classes)</h3>
<p>The <code>.future</code> class is added to all <a href="/docs/reference/HTML.html#step-element">Step Elements</a> that haven't been visited yet.</p>
<p><strong>Example:</strong></p>
<pre><code class="language-CSS">.future {
display: none;
}
</code></pre>
<p>The <code>.present</code> class is added to the <a href="#step-element">Step Element</a> that is currently at the center of the camera. This is useful to create animations inside the step once the camera navigates to it.</p>
<p>The <code>.present</code> class is added to the <a href="/docs/reference/HTML.html#step-element">Step Element</a> that is currently at the center of the camera. This is useful to create animations inside the step once the camera navigates to it.</p>
<p><strong>Example:</strong></p>
<pre><code class="language-CSS">.present .rotating {
transform: rotate(-10deg);
transition-delay: 0.25s;
}
</code></pre>
<p>The <code>.past</code> class is added to all <a href="#step-element">Step Elements</a> that have been visited at least once.</p>
<p>The <code>.past</code> class is added to all <a href="/docs/reference/HTML.html#step-element">Step Elements</a> that have been visited at least once.</p>
<p><strong>Example:</strong></p>
<pre><code class="language-CSS">.past {
display: none;
}
</code></pre>
<h3>Current Active Step (.active class)</h3>
<p>The <code>.active</code> class is added to the <a href="#step-element">Step Element</a> that is currently visible at the center of the camera.</p>
<h3 id="current-active-step--active-class">Current Active Step (.active class)</h3>
<p>The <code>.active</code> class is added to the <a href="/docs/reference/HTML.html#step-element">Step Element</a> that is currently visible at the center of the camera.</p>
<p><strong>Example:</strong></p>
<pre><code class="language-CSS">.step {
opacity: 0.3;
@@ -49,7 +49,7 @@
opacity: 1
}
</code></pre>
<p>At the same time, the <code>impress-on-*</code> class is added to the body element, the class name represents the active <a href="#step-element">Step Element</a> id. This allows for custom global styling, since you can't match a CSS class backwards from the active <a href="#step-element">Step Element</a> to the <code>body</code>.</p>
<p>At the same time, the <code>impress-on-*</code> class is added to the body element, the class name represents the active <a href="/docs/reference/HTML.html#step-element">Step Element</a> id. This allows for custom global styling, since you can't match a CSS class backwards from the active <a href="/docs/reference/HTML.html#step-element">Step Element</a> to the <code>body</code>.</p>
<p><strong>Example:</strong></p>
<pre><code class="language-CSS">.impress-on-overview .step {
opacity: 1;
@@ -61,7 +61,7 @@
background: LightBlue;
}
</code></pre>
<h3>Progressive Enhancement (.impress-not-supported class)</h3>
<h3 id="progressive-enhancement--impress-not-supported-class">Progressive Enhancement (.impress-not-supported class)</h3>
<p>The <code>.impress-not-supported</code> class is added to the <code>body</code> element if the browser doesn't support the features required by impress.js to work, it is useful to apply some fallback styles in the CSS.</p>
<p>It's not necessary to add it manually on the <code>body</code> element. If the script detects that the browser lacks important features it will add this class.</p>
<p>It is recommended to add the class manually to the <code>body</code> element though, because that means that users without JavaScript will also get fallback styles. When impress.js script detects that the browser supports all required features, the <code>.impress-not-support</code> class will be removed from the <code>body</code> element.</p>