` var foo = data.pluginaFoo; // ... } })(document, window); ``` -------------------------------- ### Handle impress.js initialization event (JavaScript) Source: https://github.com/impress/impress.js/blob/master/DOCUMENTATION.md This JavaScript example demonstrates how to listen for the `impress:init` event, which is triggered after impress.js has been successfully initialized. This allows for custom logic to be executed once the presentation is ready. ```javascript var rootElement = document.getElementById( "impress" ); rootElement.addEventListener( "impress:init", function() { console.log( "Impress init" ); });impress().init(); ``` -------------------------------- ### Impress.js HTML Setup and Initialization Source: https://context7.com/impress/impress.js/llms.txt This snippet demonstrates the complete HTML structure required for an impress.js presentation, including the necessary CSS and JavaScript includes, fallback message for unsupported browsers, and the main impress container with initialization script. ```html My Presentation

Your browser doesn't support the features required by impress.js.

Welcome

Overview slide

``` -------------------------------- ### QUnit test example with iframe isolation Source: https://github.com/impress/impress.js/blob/master/test/HOWTO.md Example QUnit test structure that loads an Impress.js presentation in an iframe and tests DOM elements and their attributes. Uses helper functions to initialize the presentation and access iframe document context. ```javascript QUnit.test( "Example tests", function( assert ) { loadIframe( "test/core_tests_presentation.html", assert, function() { initPresentation( assert, function() { var iframe = document.getElementById( "presentation-iframe" ); var iframeDoc = iframe.contentDocument; var iframeWin = iframe.contentWindow; var step1 = iframeDoc.querySelector( "div#step-1" ); assert.equal( step1.dataset.x, "0", "data-x attribute set to zero" ); assert.equal( step1.dataset.y, "0", "data-y attribute set to zero" ); }); }); }); ``` -------------------------------- ### Initialize impress.js Plugin Source: https://github.com/impress/impress.js/blob/master/GettingStarted.md This JavaScript code snippet initializes the impress.js framework. It is typically placed at the end of the HTML body to ensure the DOM is ready. The impress() function creates an instance, and .init() starts the presentation. ```javascript impress().init() ``` -------------------------------- ### Impress.js JavaScript API - Initialization and Control (JavaScript) Source: https://context7.com/impress/impress.js/llms.txt Provides examples of using the impress.js JavaScript API to initialize presentations, navigate between slides programmatically, and tear down the presentation. It covers initializing with default or custom root elements, moving next/prev, going to specific slides by index or ID, and re-initializing after changes. ```javascript // Initialize default #impress element var api = impress(); api.init(); // Initialize custom root element var customApi = impress("my-presentation"); customApi.init(); // Navigate to next slide api.next(); // Navigate to previous slide api.prev(); // Go to specific slide by index (0-based) api.goto(3); // Go to slide by ID api.goto("overview"); // Go to slide by element reference var slideElement = document.getElementById("intro"); api.goto(slideElement); // Go to slide with custom transition duration (2 seconds) api.goto("conclusion", 2000); // Teardown and reset presentation api.tear(); // Re-initialize after changes api.init(); ``` -------------------------------- ### Mermaid.js Diagram Syntax Source: https://github.com/impress/impress.js/blob/master/examples/classic-slides/index.html Example of Mermaid.js syntax used to define a flowchart. Mermaid allows SVG diagrams to be generated from a Markdown-like syntax, facilitating the creation of visual elements within presentations. ```mermaid %% This is a comment in mermaid markup graph LR A(Support for diagrams) B\[Provided by mermaid.js\] C{Already know mermaid?} D(Tutorial) E(Great, hope you enjoy!) A-->B B-->C C--No-->D C--Yes-->E classDef startEnd fill:#fcc,stroke:#353,stroke-width:2px; class A,D,E startEnd; ``` -------------------------------- ### Code Blocks with Highlight.js Integration Source: https://github.com/impress/impress.js/blob/master/examples/markdown/index.html When Highlight.js is integrated, code blocks within Markdown are first converted to HTML and then styled by Highlight.js for syntax highlighting. The example shows the `init` API function. ```javascript // `init` API function that initializes (and runs) the presentation. var init = function () { if (initialized) { return; } execPreInitPlugins(); // First we set up the viewport for mobile devices. // For some reason iPad goes nuts when it is not done properly. var meta = $("meta[name='viewport']") || document.createElement("meta"); meta.content = "width=device-width, minimum-scale=1, maximum-scale=1, user-scalable=no"; if (meta.parentNode !== document.head) { meta.name = 'viewport'; document.head.appendChild(meta); } } ``` -------------------------------- ### Configure Media Autoplay with Autostop Behavior Source: https://github.com/impress/impress.js/blob/master/src/plugins/media/README.md Set up media to automatically start when entering a step and stop (pause and reset to beginning) when leaving the step. This configuration ensures media restarts from the beginning each time the step is re-entered. ```html

``` -------------------------------- ### Initialize impress.js with a specific root element (JavaScript) Source: https://github.com/impress/impress.js/blob/master/DOCUMENTATION.md This JavaScript example shows how to create an instance of the ImpressAPI by calling the `impress()` factory function. It accepts an optional string argument representing the ID of the root element for the presentation. If no ID is provided, it defaults to an element with the ID 'impress'. ```javascript var impressAPI = impress( "root" ); ``` -------------------------------- ### Conditional Goto Plugin Usage (HTML) Source: https://github.com/impress/impress.js/blob/master/src/plugins/goto/README.md Shows how to define different goto destinations based on the direction of navigation (next or previous). This allows for context-aware transitions, for example, using prev() vs. next(). ```html

``` -------------------------------- ### Listening for Plugin Initialization Events (JavaScript) Source: https://github.com/impress/impress.js/blob/master/src/plugins/README.md This JavaScript snippet shows how a dependent plugin (pluginB) listens for a custom initialization event ('impress:plugina:init') dispatched by another plugin (pluginA). This allows pluginB to execute its logic only after pluginA has completed its setup, ensuring proper dependency handling. ```javascript // pluginB document.addEventListener("impress:plugina:init", function (event) { // plugin B implementation }, false); ``` -------------------------------- ### Configure Media Autoplay with Autopause Behavior Source: https://github.com/impress/impress.js/blob/master/src/plugins/media/README.md Set up media to automatically start when entering a step and pause (maintaining current playback time) when leaving the step. This allows media to resume from where it was paused when re-entering the step. ```html

``` -------------------------------- ### Impress.js 3D Rotation Attribute Example Source: https://github.com/impress/impress.js/blob/master/test/plugins/rel/rotation_tests_presentation.html Demonstrates the usage of the 'data-rotate' attribute in HTML to apply 3D rotation effects to presentation elements. This attribute is part of the Impress.js library for creating dynamic and interactive presentations. ```html

Slide with 90-degree rotation

``` -------------------------------- ### Configure Media Autoplay with Continue on Exit Source: https://github.com/impress/impress.js/blob/master/src/plugins/media/README.md Set media to automatically start when entering a step and continue playing when leaving the step. The media will not pause or stop when exiting the step, allowing playback to continue across step transitions. ```html

``` -------------------------------- ### Example CSS for Help Popup Styling Source: https://github.com/impress/impress.js/blob/master/src/plugins/help/README.md This CSS provides styling for the Impress.js help popup when the presentation is enabled. It sets the background, text color, font size, position, dimensions, border radius, padding, text alignment, z-index, and font family for the help popup and its table cells. ```css .impress-enabled #impress-help { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5); color: #EEEEEE; font-size: 80%; position: fixed; left: 2em; bottom: 2em; width: 24em; border-radius: 1em; padding: 1em; text-align: center; z-index: 100; font-family: Verdana, Arial, Sans; } .impress-enabled #impress-help td { padding-left: 1em; padding-right: 1em; } ``` -------------------------------- ### Impress.js 2D Slide Positioning (data-x, data-y) Source: https://context7.com/impress/impress.js/llms.txt This example shows how to position presentation slides (steps) in a 2D plane using the `data-x` and `data-y` attributes. These attributes define the horizontal and vertical coordinates for each step, allowing for flexible slide arrangements. ```html

First Slide

Second Slide

Third Slide

Fourth Slide

``` -------------------------------- ### CSS State Classes for Animations (HTML/CSS) Source: https://context7.com/impress/impress.js/llms.txt Explains how to leverage impress.js's generated CSS classes like `.future`, `.past`, `.present`, and `.impress-on-[id]` to create step-specific animations and styling. This section provides CSS examples for hiding future slides, adjusting opacity for past slides, highlighting the active slide, and applying transitions to elements within steps. ```html

Animated Content

``` -------------------------------- ### HTML Example: Configuring Autoplay in Impress.js Source: https://github.com/impress/impress.js/blob/master/src/plugins/autoplay/README.md This HTML snippet demonstrates how to configure the Impress.js Autoplay plugin. The global 'data-autoplay' attribute sets the default timeout, while individual 'step' elements can override this value or disable autoplay by setting 'data-autoplay' to '0'. ```html

This slide will not auto-advance

This slide will auto-advance at the globally defined rate.

This slide will auto-advance after 10 seconds

``` -------------------------------- ### Registering a Pre-init Plugin Source: https://github.com/impress/impress.js/blob/master/src/plugins/README.md Demonstrates how to register a plugin to be executed in the 'pre-init' phase, before impress().init() is called. Plugins are ordered by an optional weight parameter. ```javascript impress.addPreInitPlugin( plugin [, weight] ); ``` -------------------------------- ### Navigate to the previous step in impress.js (JavaScript) Source: https://github.com/impress/impress.js/blob/master/DOCUMENTATION.md This JavaScript code snippet demonstrates how to navigate to the previous step of an impress.js presentation. It initializes the API and then calls the `prev()` method, which internally uses the `goto()` function. ```javascript var api = impress(); api.init(); api.prev(); ``` -------------------------------- ### Registering a Pre-StepLeave Plugin Source: https://github.com/impress/impress.js/blob/master/src/plugins/README.md Shows how to register a plugin that runs synchronously at the beginning of the impress().goto() method. It receives an event object with details about the current and next step. ```javascript impress.addPreStepLeavePlugin( plugin [, weight] ); ``` -------------------------------- ### Style Toolbar with CSS Source: https://github.com/impress/impress.js/blob/master/src/plugins/toolbar/README.md Apply CSS styling to position and format the toolbar container and its child elements. This example positions the toolbar in the bottom-right corner with reduced opacity and adds right margin to toolbar items. ```css .impress-enabled div#impress-toolbar { position: fixed; right: 1px; bottom: 1px; opacity: 0.6; } .impress-enabled div#impress-toolbar > span { margin-right: 10px; } ``` -------------------------------- ### Navigate to the next step in impress.js (JavaScript) Source: https://github.com/impress/impress.js/blob/master/DOCUMENTATION.md This JavaScript code snippet shows how to navigate to the next step of an impress.js presentation. It first initializes the API and then calls the `next()` method, which utilizes the `goto()` function internally. ```javascript var api = impress(); api.init(); api.next(); ``` -------------------------------- ### Advanced Non-linear Navigation with Goto Plugin (HTML) Source: https://github.com/impress/impress.js/blob/master/src/plugins/goto/README.md Illustrates the use of data-goto-key-list and data-goto-next-list for building complex, non-linear navigation paths. This enables mapping specific key presses to particular step transitions, offering a highly interactive experience. ```html

``` -------------------------------- ### Basic Goto Plugin Usage (HTML) Source: https://github.com/impress/impress.js/blob/master/src/plugins/goto/README.md Demonstrates how to use the data-goto attribute to specify a direct step transition when leaving the current step. This is useful for creating specific navigation flows. ```html

``` -------------------------------- ### Impress.js 2D Slide Rotation (data-rotate) Source: https://context7.com/impress/impress.js/llms.txt This example demonstrates how to rotate slides clockwise or counter-clockwise using the `data-rotate` attribute, measured in degrees. This allows for dynamic and visually interesting transitions between presentation steps. ```html

Normal Orientation

Rotated 90°

Upside Down

Counter-clockwise 45°

``` -------------------------------- ### Substep Custom Reveal Order with data-substep-order Source: https://github.com/impress/impress.js/blob/master/src/plugins/substep/README.md HTML example showing how to use the data-substep-order attribute to control the sequence in which substeps are revealed. Substeps are revealed in ascending order by their data-substep-order value; those without the attribute are revealed after ordered substeps. ```html

Priority Items

Second item

First item

Third item (no order specified)

``` -------------------------------- ### Plugin Initialization and Event Dispatching (JavaScript) Source: https://github.com/impress/impress.js/blob/master/src/plugins/README.md This JavaScript code demonstrates how a plugin (pluginA) initializes itself upon receiving the 'impress:init' event and then dispatches a custom 'impress:plugina:init' event to signal its own readiness to other plugins. This pattern is crucial for managing plugin dependencies. ```javascript // pluginA document.addEventListener("impress:init", function (event) { // plugin A does it's own initialization first... // Signal other plugins that plugin A is now initialized var root = document.querySelector( "div#impress" ); var event = document.createEvent("CustomEvent"); event.initCustomEvent("impress:plugina:init', true, true, { "plugina" : "data..." }); root.dispatchEvent(event); }, false); ``` -------------------------------- ### Initialize impress.js Presentation Source: https://github.com/impress/impress.js/blob/master/examples/cube/index.html This JavaScript code initializes the impress.js presentation framework. It is essential for enabling the 3D transitions and animations defined in the HTML structure. Ensure impress.js library is included before calling this function. ```javascript impress().init(); ``` -------------------------------- ### JavaScript for Toggling CSS Styles Source: https://github.com/impress/impress.js/blob/master/examples/markdown/index.html A JavaScript example demonstrates how to dynamically toggle CSS styles for presentation slides. This includes functions to enable/disable specific CSS classes like 'devopsy' and 'effects', providing interactive control over the presentation's appearance. ```javascript var enableBwCss = function(){ disableDevopsCss(); disableEffectsCss(); }; var enableDevopsCss = function(){ document.body.classList.add("devopsy"); disableEffectsCss(); }; var disableDevopsCss = function(){ document.body.classList.remove("devopsy"); }; var enableEffectsCss = function(){ document.body.classList.add("effects"); disableDevopsCss(); }; var disableEffectsCss = function(){ document.body.classList.remove("effects"); }; ``` -------------------------------- ### Build impress.js Core and Plugins Source: https://github.com/impress/impress.js/blob/master/src/plugins/README.md This command is used to build the distributable `js/impress.js` file by concatenating the core impress.js library with all default plugins. It is executed using Node.js after modifying or adding code in the `src/` directory. A minified version is also created but not included in the Git repository. ```bash node build.js ``` -------------------------------- ### Initialize Impress.js Presentation Source: https://github.com/impress/impress.js/blob/master/examples/classic-slides/index.html This JavaScript function initializes the Impress.js presentation. It handles pre-initialization plugins and sets up the viewport meta tag for mobile devices to ensure proper display. ```javascript var init = function () { if (initialized) { return; } execPreInitPlugins(); // First we set up the viewport for mobile devices. // For some reason iPad goes nuts when it is not done properly. var meta = $("meta[name='viewport']") || document.createElement("meta"); meta.content = "width=device-width, minimum-scale=1, maximum-scale=1, user-scalable=no"; if (meta.parentNode !== document.head) { meta.name = 'viewport'; document.head.appendChild(meta); } } ``` -------------------------------- ### Define relative positioning with pixel values in HTML Source: https://github.com/impress/impress.js/blob/master/src/plugins/rel/README.md Position a step relative to the previous step using pixel-based data-rel-x and data-rel-y attributes. The example shows positioning a step 1000 px to the right and 500 px up from the previous step. ```html

``` -------------------------------- ### Initialize impress.js Presentation Source: https://github.com/impress/impress.js/blob/master/index.html This snippet checks for touch support and updates the hint message accordingly before initializing the impress.js presentation. It is essential for enabling the core functionality of the impress.js library. ```javascript if ("ontouchstart" in document.documentElement) { document.querySelector(".hint").innerHTML = "

Swipe left or right to navigate

"; } impress().init(); ``` -------------------------------- ### Accessing Impress.js Libraries via API Source: https://github.com/impress/impress.js/blob/master/src/lib/README.md Demonstrates how to access library functions from Impress.js core or plugins using the provided API. It shows the event-driven initialization and the subsequent API call structure for library access. ```javascript var api; document.addEventListener( "impress:init", function(event){ api = event.detail.api; api().lib..(); }); impress().lib..(); ``` -------------------------------- ### Define relative positioning with reference step in HTML Source: https://github.com/impress/impress.js/blob/master/src/plugins/rel/README.md Position a step relative to a specific previous step by using the data-rel-to attribute with a step ID. This example positions a step 1000 px to the left and 750 px up from the step with id 'title'. ```html

``` -------------------------------- ### Impress.js Event Handling (JavaScript) Source: https://context7.com/impress/impress.js/llms.txt Demonstrates how to listen for and respond to impress.js events using JavaScript event listeners. It covers `impress:init` (fired after initialization), `impress:stepenter` (fired when entering a new step), and `impress:stepleave` (fired when leaving a step). These events allow for custom animations, loading content, or managing media. ```javascript var rootElement = document.getElementById("impress"); // Fired after initialization rootElement.addEventListener("impress:init", function(event) { console.log("Presentation initialized"); }); // Fired when entering a new step rootElement.addEventListener("impress:stepenter", function(event) { var currentStep = event.target; console.log("Entered step:", currentStep.id); // Add custom animations or load content if (currentStep.id === "video-slide") { document.getElementById("myVideo").play(); } }); // Fired when leaving current step rootElement.addEventListener("impress:stepleave", function(event) { var currentStep = event.target; var nextStep = event.detail.next; console.log("Leaving", currentStep.id, "going to", nextStep.id); // Cleanup or pause media if (currentStep.id === "video-slide") { document.getElementById("myVideo").pause(); } }); // Initialize after setting up listeners impress().init(); ``` -------------------------------- ### Hide Cursor and Toolbar on Mouse Timeout CSS Source: https://github.com/impress/impress.js/blob/master/src/plugins/mouse-timeout/README.md CSS example showing how to hide the mouse cursor and toolbar when the body has the 'impress-mouse-timeout' class applied. This demonstrates the primary use case of the plugin by using CSS selectors to target elements that should be hidden during mouse inactivity. ```css body.impress-mouse-timeout { cursor: none; } body.impress-mouse-timeout div#impress-toolbar { display: none; } ``` -------------------------------- ### Enable Plugins and Extra Addons via HTML Source: https://github.com/impress/impress.js/blob/master/src/plugins/README.md This HTML snippet demonstrates how to enable various impress.js plugins and extra addons. It includes links to CSS for syntax highlighting and diagramming, and script tags for loading JavaScript libraries like Highlight.js, Mermaid.js, Markdown.js, and MathJax. The `data-autoplay` attribute is used to control automatic slide transitions. ```html

Slide content

Point 1
Point 2

Speaker notes are shown in the impressConsole.

``` -------------------------------- ### Interactive CSS Style Toggling with Links Source: https://github.com/impress/impress.js/blob/master/examples/markdown/index.html This example shows how to create interactive links within a presentation slide that trigger JavaScript functions to toggle CSS styles. Clicking these links allows users to switch between different visual themes like 'Black & white', 'Devopsy', and 'Effects overload'. ```html [Black & white](#), [Devopsy](#), [Effects overload](#) ``` -------------------------------- ### Navigate to Step by Index, ID, or Element (JavaScript) Source: https://github.com/impress/impress.js/blob/master/DOCUMENTATION.md The .goto() function allows navigation to a specific presentation step. It accepts the step index (number), step element ID (string), or the step element itself (HTMLElement). An optional duration parameter (number) can be provided for transition timing. ```javascript var api = impress(); api.init(); api.goto(7); ``` ```javascript var api = impress(); api.init(); api.goto( "overview" ); ``` ```javascript var overview = document.getElementById( "overview" ); var api = impress(); api.init(); api.goto( overview ); ``` ```javascript var api = impress(); api.init(); api.goto(7, 2000); ``` -------------------------------- ### Sample CSS for Progress Plugin Styling Source: https://github.com/impress/impress.js/blob/master/src/plugins/progress/README.md This CSS provides sample styling for the progress bar and page counter elements used by the impress.js Progress plugin. It defines positions, dimensions, borders, backgrounds, and transitions for visual presentation. Users can customize these styles to match their presentation's theme. ```css .impress-progressbar { position: absolute; right: 318px; bottom: 1px; left: 118px; border-radius: 7px; border: 2px solid rgba(100, 100, 100, 0.2); } .impress-progressbar DIV { width: 0; height: 2px; border-radius: 5px; background: rgba(75, 75, 75, 0.4); transition: width 1s linear; } .impress-progress { position: absolute; left: 59px; bottom: 1px; text-align: left; opacity: 0.6; } ``` -------------------------------- ### Bookmark Plugin HTML Structure Source: https://github.com/impress/impress.js/blob/master/src/plugins/bookmark/README.md Demonstrates how to configure the Bookmark plugin in HTML. The `data-bookmark-key-list` attribute specifies the keys that will navigate to this step, and an `id` attribute is required for the step element. Multiple keys can be assigned to a single step. ```html

``` -------------------------------- ### Define relative positioning with screen-relative units in HTML Source: https://github.com/impress/impress.js/blob/master/src/plugins/rel/README.md Position a step using screen height and width multipliers by appending 'h' or 'w' units to numeric values. This example positions a step 1.5 times the screen width to the right and 1.5 times the screen height down from the previous step. ```html

``` -------------------------------- ### Skeleton for Implementing an Impress.js Library Source: https://github.com/impress/impress.js/blob/master/src/lib/README.md Provides a complete skeleton for creating a new Impress.js library. It includes the necessary IIFE wrapper, factory function registration, handling of multiple root elements, and the structure for library functions and instance variables. ```javascript /** * Example library libName * * Henrik Ingo (c) 2016 * MIT License */ (function ( document, window ) { 'use strict'; // Singleton library variables var roots = []; var singletonVar = {}; var libraryFactory = function(rootId) { if (roots["impress-root-" + rootId]) { return roots["impress-root-" + rootId]; } // Per root global variables (instance variables?) var instanceVar = {}; // LIBRARY FUNCTIONS var libraryFunction1 = function () { /* ... */ }; var libraryFunction2 = function () { /* ... */ }; var lib = { libFunction1: libraryFunction1, libFunction2: libraryFunction2 } roots["impress-root-" + rootId] = lib; return lib; }; // Let impress core know about the existence of this library window.impress.addLibraryFactory( { libName : libraryFactory } ); })(document, window); ``` -------------------------------- ### Apply 2D scaling to Step Element in HTML Source: https://github.com/impress/impress.js/blob/master/DOCUMENTATION.md Uses the data-scale attribute to define relative scaling of a step element compared to other steps. For example, data-scale="4" makes an element appear 4 times larger and affects how transitions scale the element back to normal size. ```html

then you should try

impress.js^*

^* no rhyme intended

``` -------------------------------- ### Impress.js JavaScript API Source: https://context7.com/impress/impress.js/llms.txt Initialize and programmatically control impress.js presentations using its JavaScript API. ```APIDOC ## JavaScript API ### Description Initialize, navigate, and control impress.js presentations programmatically. ### Method JavaScript API Calls ### Endpoint N/A (JavaScript functions operating on an Impress instance) ### Functions - **impress()**: Initializes impress.js with the default `#impress` element. - **impress(selector)**: Initializes impress.js with a custom root element specified by the selector. - **api.init()**: Initializes the presentation. - **api.next()**: Navigates to the next slide. - **api.prev()**: Navigates to the previous slide. - **api.goto(index|id|element, duration)**: Navigates to a specific slide by its index, ID, or element reference. An optional duration in milliseconds can be provided for the transition. - **api.tear()**: Tears down the presentation, resetting its state. ### Request Example ```javascript // Initialize default #impress element var api = impress(); api.init(); // Navigate to slide with ID 'overview' after 1 second setTimeout(function() { api.goto("overview", 1000); }, 1000); ``` ### Response N/A (Modifies the presentation state) ``` -------------------------------- ### Basic HTML Structure for impress.js Presentation Source: https://github.com/impress/impress.js/blob/master/GettingStarted.md This HTML code sets up the fundamental structure for an impress.js presentation. It includes the necessary CSS link, a fallback message for unsupported browsers, the main impress container, a slide element, and the impress.js script with initialization. ```html My first presentation

Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

My first Slide

``` -------------------------------- ### Configure impress.js Root Element with HTML attributes Source: https://github.com/impress/impress.js/blob/master/DOCUMENTATION.md Sets up the root container for an impress.js presentation with transition duration, target screen dimensions, scaling limits, and 3D perspective settings. The root element serves as the container for all presentation content and accepts data attributes to control presentation behavior. ```html

``` -------------------------------- ### Impress.js CDN Loading with Local Fallback Source: https://context7.com/impress/impress.js/llms.txt Provides a method to load the impress.js library from a Content Delivery Network (CDN) with a local file as a fallback. This ensures the presentation works even if the CDN is inaccessible. The script first attempts to load from a local 'js/impress.js' file and, if it fails (detected by 'window.impress' not being defined), it loads from the specified CDN URL. ```html My Presentation

Content Here

``` -------------------------------- ### LaTeX for Mathematical Formulas Source: https://github.com/impress/impress.js/blob/master/examples/classic-slides/index.html Demonstrates the use of LaTeX syntax within Impress.js presentations to render mathematical formulas. MathJax.js is required to process and display these formulas correctly. ```latex $\LaTeX$ ``` -------------------------------- ### Create Basic Slide with HTML Source: https://github.com/impress/impress.js/blob/master/GettingStarted.md Creates a simple slide using a div element with the 'step' class in impress.js. This is the fundamental building block for presentations. The slide displays basic text content. ```html

Hello World

``` -------------------------------- ### Impress.js Goto Plugin for Direct Navigation Source: https://context7.com/impress/impress.js/llms.txt Enables direct navigation to specific slides in impress.js using slide IDs or their numerical order. The 'goto' function can be called programmatically via the impress API or through user interaction triggered by keyboard commands. This allows for creating custom navigation buttons or shortcuts. ```html

Introduction

Features

Conclusion

``` -------------------------------- ### Create Step Element with 2D positioning in HTML Source: https://github.com/impress/impress.js/blob/master/DOCUMENTATION.md Defines a step element with basic positioning using data-x and data-y attributes to place content on an infinite canvas. Step elements contain the actual presentation content and require a .step class to be recognized by impress.js. ```html

Aren't you just bored with all those slides-based presentations?

``` -------------------------------- ### Event Handling Source: https://context7.com/impress/impress.js/llms.txt Listen for impress.js events to trigger custom behavior during presentation transitions. ```APIDOC ## Event Handling ### Description Attach event listeners to the impress root element to react to presentation lifecycle events like initialization and step transitions. ### Method JavaScript Event Listeners ### Endpoint N/A (Event listeners attached to the DOM) ### Events - **impress:init**: Fired after the presentation has been initialized. - **impress:stepenter**: Fired when the user enters a new slide. - `event.target`: The DOM element of the current slide. - `event.detail.next`: The DOM element of the next slide. - **impress:stepleave**: Fired when the user leaves the current slide. - `event.target`: The DOM element of the current slide. - `event.detail.next`: The DOM element of the next slide. ### Request Example ```javascript var rootElement = document.getElementById("impress"); rootElement.addEventListener("impress:stepenter", function(event) { console.log("Entered step:", event.target.id); // Custom logic for the entered step }); impress().init(); // Ensure initialization after setting up listeners ``` ### Response N/A (Triggers custom JavaScript functions) ```