It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.

Last update: Jan 2, 2023

Related tags

Overview

impress.js

It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.

WARNING

impress.js may not help you if you have nothing interesting to say ;)

HOW TO USE IT

Checking out and initializing the git repository

git clone --recursive https://github.com/impress/impress.js.git
cd impress.js

Note: For a minimal checkout, omit the --recursive option. This will leave out extra plugins.

Stable releases

New features and fixes are continuously merged into the master branch, which is what the above command will check out. For the latest stable release, see the Github Releases page.

Documentation

Reference documentation of core impress.js features and API you can find it in DOCUMENTATION.md.

The HTML source code of the official impress.js demo serves as a good example usage and contains comments explaining various features of impress.js. For more information about styling you can look into CSS code which shows how classes provided by impress.js can be used. Last but not least JavaScript code of impress.js has some useful comments if you are interested in how everything works. Feel free to explore!

Official demo

impress.js demo by @bartaz

Examples and demos

The Classic Slides demo is targeted towards beginners, or can be used as a template for presentations that look like the traditional PowerPoint slide deck. Over time, it also grew into the example presentation that uses most of the features and addons available.

More examples and demos can be found on Examples and demos wiki page.

Feel free to add your own example presentations (or websites) there.

Mailing list

You're welcome to ask impress.js related questions on the impressionist-presentations mailing list.

REPOSITORY STRUCTURE

index.html: This is the official impress.js demo, showcasing all of the features of the original impress.js, as well as some new plugins as we add them.
- As already mentioned, this file is well commented and acts as the official tutorial.
examples/: Contains several demos showcasing additional features available.
- Classic Slides is a simple demo that you can use as template if you want to create very simple, rectangular, PowerPoint-like presentations.
src/: The main file is src/impress.js. Additional functionality is implemented as plugins in src/plugins/.
- See src/plugins/README.md for information about the plugin API and how to write plugins.
test/: Contains QUnit and Syn libraries that we use for writing tests, as well as some test coverage for core functionality. (Yes, more tests are much welcome.) Tests for plugins are in the directory of each plugin.
js/: Contains js/impress.js, which contains a concatenation of the core src/impress.js and all the plugins. Traditionally this is the file that you'll link to in a browser. In fact both the demo and test files do exactly that.
css/: Contains a CSS file used by the demo. This file is not required for using impress.js in your own presentations. Impress.js creates the CSS it needs dynamically.
extras/ contains plugins that for various reasons aren't enabled by default. You have to explicitly add them with their own script element to use them.
build.js: Simple build file that creates js/impress.js. It also creates a minified version impress.min.js, but that one is not included in the github repository.
package.json: An NPM package specification. This was mainly added so you can easily install buildify and run node build.js. Other than the build process, which is really just doing roughly cat src/impress.js src/plugins/*/*.js > js/impress.js, and testing, impress.js itself doesn't depend on Node or any NPM modules.

WANT TO CONTRIBUTE?

For developers, once you've made changes to the code, you should run these commands for testing:

npm install
npm run all

Note that running firefox qunit_test_runner.html is usually more informative than running karma with npm run test. They both run the same tests.

More info about the src/ directory can be found in src/plugins/README.md.

Requirements

>= node 7.6
npm

ABOUT THE NAME

impress.js name is courtesy of @skuzniak.

It's an (un)fortunate coincidence that a Open/LibreOffice presentation tool is called Impress ;)

Reference API

See the Reference API

BROWSER SUPPORT

The design goal for impress.js has been to showcase awesome CSS3 features as found in modern browser versions. We also use some new DOM functionality, and specifically do not use jQuery or any other JavaScript libraries, nor our own functions, to support older browsers. In general, recent versions of Firefox and Chrome are known to work well. Reportedly IE now works too.

The typical use case for impress.js is to create presentations that you present from your own laptop, with a browser version you know works well. Some people also use impress.js successfully to embed animations or presentations in a web page, however, be aware that in this some of your visitors may not see the presentation correctly, or at all.

In particular, impress.js makes use of the following JS and CSS features:

COPYRIGHT AND LICENSE

Released under the MIT License

Comments

State of the project

Hi @bartaz, is this project going to be actively developed?

In several threads you stated no time for working into this project and the latest commits were just regarding grammars.

Impress is impressive (!!), and there are many useful pull requests waiting to be landed. Any news if this project is going somewhere or if you are willing to handle it to someone else to continue active development?

Why do I ask this? Well, maybe I am not the only one, but its sad to see fragmented projects with useful features that could be centralized. If there is any chance that this project is going to get on track, it would be nice to disclose the information, so one may not jump into creating another repository and potentially reinvent the wheel.

Also, I noticed there is a lack of general documentation, so it is hard to know exactly what is supported and what is considered an implementation detail (although the code is pretty well documented and one can have a very good basis).

Anyway, with > 1k watchers and > 22k stars it is unlikely not to exist at least one willing to take over or be an active collaborator. Is there any news regarding the project state? Just to get into the context.

Thanks.
backlog FORUM ;)

opened by FagnerMartinsBrack 84
Authoring tool discussion

I love it!

Perhaps out of the scope of this library, but I figured I'd file it here nonetheless: in order for this to be useful for more than a few people, you need some sort of authoring tool for these kinds of presentations, such as what Prezi has, or my own Infinite Canvas tool from several years ago:

http://infinitecanvas.jgate.de/create?name=Brad%27s%20Somber%20Mood

Any plans to do something like that, or are you leaving it to the community?
FORUM ;)

opened by iangilman 77
Public JavaScript API
impress.js should provide public API with methods that will allow triggering transitions between slides.

Proposed API methods:

next()

prev()

goTo( step )

If you think any other method may be useful, just let me know in comments.
0.3
opened by bartaz 47
Add Substeps
Hey there,

I would like to see "substeps". I don't know how to call those properly, I give a little description:

Imagine you have your presentation with some slides/steps. Now on one slide you have a list and you want to fly in the list items one-by-one each by a arrow right keystroke. I tried it that way:

<ul> <li class="step">Item 1</li> <li class="step">Item 2</li> </ul>

It didn't worked, of course I didn't expected that. But would be cool to have something like that.

Thanks very much.
backlog RGSoC
opened by gossi 39
Broken on firefox 45+

Hello,

The demo website is broken under Firefox 45.

The arrows make you move in the desired direction but not following the "path" of the presentation. I mean we are able to freely able to "move the camera". Zooms are also not working.

This was tested under two different Linux distributions with the same behavior.

opened by GuillaumeLeclerc 33
Automatic layout based on content structure

A configuration step could be added so that the slide selector can be defined. This would allow for other definitions of what constitutes a slide. e.g. It would be useful to have the HTML5 section tag supported, so that rather than working with divs in a purely linear document, each section and (importantly) sub-section can become a slide. For example, see the structure of http://webf1.soc.port.ac.uk/2011/style/lecture/ ... it's a structurally nested document, but you can press escape to start the presentation and it works linearly. For education purposes having a doc that can be presented is invaluable - less writing is good! If I get time before someone else does I'll look into extracting the useful code and put in a pull request, but be my guest to run with the idea/request.

What would be especially nice if if the document structure could be somehow reflected using an automatic presentation structure, so that the document should have no extra markup beyond the script tag.

opened by ear1grey 29
Add relative move and rotate to rel plugin

The relative position in rel plugin is currently based on the world coordinate. So for the same effect, like fly in from the right-hand side, we must use difference data-rel-x/y/z value. Why not let the plugin do the hard part?

So I introduce a data-rel-position, when set to relative, all relative attribute is based on the position and rotation of previous slide. So no matter the rotation of previous slide, data-rel-x="1000" always looks like fly in from the right-hand side. We can change the position and rotation of one slide, and the position of all following slides will be changed too.

When data-rel-position is set to relative, relative rotation has a clear meaning. It describes the relative rotations between slides. We don't need to set rotations for all slide, setting the key slides is enough. If data-rel-position is not relative, the effect of data-rel-rotate-x/y/z is not clear, so they're only used when data-rel-position="relative".

After the introduction of relative rotation, there're 6 attribute that will inherit from previous slide. If we want to set a relative X move, we have to set all other 5 attributes to 0. It's boring. So a data-rel-clear is used to set all 6 attributes to 0, and then the value specified in current slide is applied. I think this attribute should be used in the second slide of a sequence. The first one setup the basic position, the second set the increments, and the following ones inherit from the second slide.

The examples/3D-positions/indaex.html shows some usage. As you can see, the html code of two slide ring is the same, and slides except for the first two in a ring has no position attributes. It work by inheriting the previous one.

BTW, the test/HOWTO.md says the test js should be placed in the same directory of the plugin itself. But it doesn't point aout where to put the corresponding html file. But in karma.conf.js, only test/plugins/*/*.html is served. So the html files should be put into test/plugins/*? Because I want test js put in the same directory of test html, I have to put the test js into test/plugins/rel/ instead of src/plugins/rel/. Maybe we could update the HOWTO.md to describe where to put html files?

This PR invokes a lot math calculations. Basically, the rotation of a slide is translated into the coordinate describing the directions of X/Y/Z axes. And data-rel-x/y/z can be easily calculated by that. The rotations is the hard part, I mainly use the algorithm in the Quaternions and spatial rotation - Wikipedia to compose two and more rotations.

I'm not a math guy, hope I don't make much mistakes.

opened by thawk 26
No way with dynamicaly added step

Hi everyone!

I discovered impress.js a few months ago. Thank you bartaz for this awesome tool that makes me crazy just thinking about everything is possible to do with!!

Nevertheless, I am in front of a problem: I have created dynamicaly many div reading an image folder and a json file where each div contains one image and data related. With random variables I have generated values to the attributes. It works, all the images are displayed in the space and the generated code looks exactly the same than the "normal" one.

The issue is that only the div manually implemented in pure HTML are "stepable". I mean I can move just in the 3 steps formally created but not in the dynamic ones.

Would you have an idea about the way I should follow to make it works as well as a "normal" step?

Hope my explaination is well understandable. Thanks!

opened by ridom 22
Switching Windows With Alt+Tab Sometimes Triggeres Next Step

Switching between windows using Alt+Tab triggers next event when switching to browser most of the time.

I'm not sure how to get rid of this but at least it is mentioned here ;)

opened by m42e 20
Added better swiping support for touch devices.

So, recently I've been doing some stuff for a presentation and noticed that it is not working on my Android.

A little examination has shown me that Android, iPhone and iPad are blacklisted for the swipe.

I think the time has come to disable the blacklist as most modern (and not-so-modern) devices nowadays work flawlessly with Impress.JS.

So, I've implemented a "swipe" left & right effect and removed "Android" User-Agent from the blacklist.

Check out the video below.

Hope this is useful to somebody :)
backlog

opened by and3rson 19
Fork future / graph navigation / skip slides

I love impress.js

I've been searching for something like this to represent complex mindmap structures.

For that I would like to be able to asign direction keys to different presentation "paths". Like reveal.js does.

That is a presentation graph like this: [slide1] -> [slide2] -> [slide3]-> [slide4] .............. v................ ...........[slide2.1]........... .............. v................ ...........[slide2.2]...........

Actually, I'd like to do this in 3d, allowing to learn more about a topic or move on otherwise. That way I could do multilayered presentations with different amount of detail (or go into details if the audience wishes so)

What do you think about it? Did I miss something similar?
RGSoC

opened by quimnuss 19
Highlight future substeps in slideView

In the current version of impress.js, the slideView in the impress-console is an exact copy of the slide that is currently presented. In my opinion, this ignores one essential benefit of this view, namely to additionally give the presenter hints on what is coming next.

This PR adds a CSS snippet that indicates the next substeps by a red border:

In addition, if at least one substep has the data-substep-order attribute set, the corresponding step number is displayed as well:

The highlighting is removed once the substep is displayed:

This PR is a follow-up on #825 and #827.

opened by fnogatz 3
Update npm package

The last version of impress.js for npm is 1.1.0. Current release is 2.0.0. I suggest updating to 2.0.0 (would also be willing to now maintain impress.js npm package) and add the new readme I have created in PR

opened by simplePCBuilding 1
New Website - Suggestions

I am currently working on a new website. I am currently elaborating my font choices, but I can't seem to come to a conclusion. Any suggestions? You can find the current state of development here

opened by simplePCBuilding 1
Getting Started Guide

For me, getting started with impress.js was not that easy, honestly, in retrospective, I don't know why. So I created a little "Getting Started" guide to help new users starting out. I also noticed a problem, where the notes didn't hide as they should have. So I added some code that takes care of that (it just sets the CSS display property to "none" on all objects with class "notes". Tested it, it worked.)

I will also be creating an introduction video in a short while and link it in the Getting Started Guide.

opened by simplePCBuilding 15

Releases(v2.0.0)

v2.0.0(Jul 22, 2022)
This release includes new features and fixes since Apr 11, 2020, when v1.1.0 was released.

Major features and improvements:

The default target resolution used inside impress.js code for various layout and transformations, is now 1920x1080 (Full HD). In addition the max scale factor by default is now 3 x the default, meaning for larger resolutions, impress.js will stretch the slide contents to fill the available screen.

NOTE: This change may affect your layout if you've used the default target resolution in your presentations. See DOCUMENTATION.md for how to explicitly set the wanted resolution.

The Rel plugin now supports relative coordinates also for rotations. This means you can now define all coordinates relative to the previous step position and rotation. Huge thank you to new contributor Thawk for this amazing piece of math.

Fixes to defining coordinates with relative-to-screen-size units (h and w).

Use element attribute title, if available, in the navigation-ui drop box

Support custom ordering for substeps

Thanks to Tim Gates, kdxcxs, Bartek Szopka, Daniel Sockwell, thawk, Ikko Ashimine, hugocvx, Christoph Neumann, Henrik Ingo for features, fixes, and cleanup, whether small or large, in this release.
Source code(tar.gz)
Source code(zip)
1.1.0(Apr 11, 2020)
This release includes new features and fixes since March 2018 when 1.0 was released.

New Plugin:

The media plugin can autoplay and autopause/autostop

Improvements:

Rel plugin can now use relative positioning relative to any previous step.

Shift+space now moves to previous slide

Add support for PowerPoint keybindings, as these are used by various remote controllers.

Update node modules used for testing and a package-lock file.

Support Maruku dialect in the Markdown plugin

Autoplay plugin can now be enabled/disabled with url parameter

Fixes:

Slides would zoom too large when swiping

Teardown should only reset element attributes that impress.js had actually modified.

Notice: DOCUMENTATION.md now has details on attributes of the #impress root element that can be used to target different screen sizes. Please be aware that the default (1024x768) is planned to change in 2021. (Probably to 1920x1080.) You are advised to use these attributes explicitly to provide for a smooth upgrade path.

Contributors: Holger Teichert, Diego Zilioti, Guilherme Weizenmann, Moritz, Will Soares, Christoph Weiler, Jason Cooke, Oliver Sanders, Tobias Bora, Eduardo Moreira, Mohamed Feddad, Ingrid-Regina Vähi.
Source code(tar.gz)
Source code(zip)
1.0.0(Mar 7, 2018)
impress.js 1.0, the first stable release

New plugin based architecture allows adding more features without bloating core src/impress.js file

Source files are in src/ and compiled into js/impress.js with npm run build. End users should continue to use js/impress.js as before.

19 new plugins

Integrates impressConsole.js by default (press 'P' to open speaker console)

Markdown support for those that are too much in a hurry to type HTML

5 new demo presentations under examples/ show case the new features

Removes the code that prevented impress.js from running on mobile phones

You can read more about this release on my blog: http://openlife.cc/blogs/2018/march/impressjs-10-released
Source code(tar.gz)
Source code(zip)
1.0.0-beta2(Jan 15, 2018)
As remaining issues in the queue have been fixed, it's time for another beta release!

Improvements since 1.0.0-beta1:

Change the support for form fields. Now any keys typed into a text input field will no longer propagate outside of the text input element. In particular, typing "parrot" in a text field will no longer open the presenter console.

The "click to open speaker console" big button didn't work due to syntax error. Now works.

Thanks to Naja Melan and Blaine Carter for contributing fixes, and several others for reporting issues!
Source code(tar.gz)
Source code(zip)
1.0.0-beta1(Nov 12, 2017)
Highlights

New plugin based architecture allows adding more features without bloating core src/impress.js file

Source files are in src/ and compiled into js/impress.js with npm run build. End users should continue to use js/impress.js as before.

19 new plugins

Integrates impressConsole.js by default (press 'P' to open speaker console)

Markdown support for those that are too much in a hurry to type HTML

5 new demo presentations under examples/ show case the new features

Removes the code that prevented impress.js from running on mobile phones

Source code(tar.gz)
Source code(zip)
0.6.0(Jul 3, 2016)
The first release after 4 years of inactivity, thanks everyone!

Changelog

24cef7f: Add comment of some CSS tricks in the impress-demo.css file

028a298: Removed double dashes -- from index.html comments as Firefox was marking them as invalid

9ccb39d: Example and Demos moved to the Wiki

#193: Bower support

#511: Change license to MIT

#499: Fix issues with meta keys

8159876: Fix IE support in the README

#562: Rework introduction to sound less elitist

#563: Create the official impress.js reference documentation

#565: Document browser support and remove note for mobile

#426: Published on npm: http://npmjs.com/package/impress.js

Source code(tar.gz)
Source code(zip)
0.5.3(May 14, 2016)
Changelog

2da949e: Version 0.5 introduced events including impress:stepenter, but this event was not triggered properly in some specific transition types (for example when only scale was changing between steps). It was caused by the fact that in such cases expected transitionend event was not triggered. Unfortunately modern transitionend event is no longer used to detect when the transition has finished, but old school (and more reliable) setTimeout is used.

Source code(tar.gz)
Source code(zip)
0.5.2(May 14, 2016)
Changelog

c87d7df: More descriptive comments added to impress.js source file, so now not only index.html is worth reading

Source code(tar.gz)
Source code(zip)
0.5.1(May 14, 2016)
Changelog

#126: Changes in version 0.5 introduced a bug that was preventing clicks on links (or any clickable elements) on currently active step.

Source code(tar.gz)
Source code(zip)
0.5(May 14, 2016)
Changelog

8220ab9...e06cda1 b3d680e: API changed, so that impress() function no longer automatically initialize presentation; new method called init was added to API and it should be used to start the presentation. impress:init event is triggered on root presentation element (#impress by default) when presentation is initialized

c64d9fb: new CSS classes were added: impress-disabled is added to body element by the impress.js script and it's changed to impress-enabled when init() function is called

1bbf205 b3d680e: Events added when step is entered and left - custom impress:stepenter and impress:stepleave events are triggered on step elements and can be handled like any other DOM events (with addEventListener)

b0a139e...5fd0f58: Additional past, present and future classes are added to step elements

1a21865: goto() API method is back! it seems that goto was a future reserved word but isn't anymore, so we can use this short and pretty name instead of camelCassy stepTo - and yes, that means API changed again...

9d99c03: additionally goto() method now supports new types of parameters

b0c5644: goto() also accepts second parameter to define the transition duration in ms, for example impress().goto("make-it-quick", 300) or impress().goto("now", 0)

UPGRADING FROM PREVIOUS VERSIONS

In current version calling impress() doesn't automatically initialize the presentation. You need to call init() function from the API. So in a place were you called impress() to initialize impress.js simply change this call to impress().init().

Version 0.4 changed goto API method into stepTo. It turned out that goto is not a reserved word anymore, so it can be used in JavaScript. That's why version 0.5 brings it back and removes stepTo.

So if you have been using version 0.4 and have any reference to stepTo API method make sure to change it to goto.
Source code(tar.gz)
Source code(zip)
0.4.1(May 14, 2016)
Changelog

78f2ce6: Fix changes is version 0.4 that introduced a bug causing JavaScript errors being thrown all over the place in fallback mode. It also adds a flag impress.supported that can be used in JavaScript to check if impress.js is supported in the browser.

Source code(tar.gz)
Source code(zip)
0.4(May 14, 2016)
Changelog

811e045: Fix Firefox perspective

2131784: Configs data-perspective (in px, defaults so 1000), data-transition-duration (in ms, defaults to 1000)

eb4df9c: Automatic scaling to fit window size, with configuration options data-width (in px, defaults to 1024), data-height (in px, defaults to 768), max-scale (defaults to 1), min-scale (defaults to 0) 207c823: goto API function was renamed to stepTo because goto is a future reserved work in JavaScript, so please make sure to update your code

9d495ab: Fallback impress-not-supported class is now set on body element instead of #impress element and it's replaced with impress-supported when browser supports all required features

9d495ab: Classes step-ID used to indicate progress of the presentation are now renamed to impress-on-ID and are set on body element, so please make sure to update your code

5ff0398: Basic validation of configuration options

e1786e3: Couple of typos and bugs fixed, courtesy of @gustaff-weldon

047c1c2: favicon added

UPGRADING FROM PREVIOUS VERSIONS

If in your custom JavaScript code you were using goto() function from impress.js API make sure to change it to stepTo().

If in your CSS you were using classes based on currently active step with step- prefix, such as step-bored (where bored is the id of the step element) make sure to change it to impress-on- prefix (for example impress-on-bored). Also in previous versions these classes were assigned to #impress element and now they are added to body element, so if your CSS code depends on this, it also should be updated.

Same happened to impress-not-supported class name - it was moved from #impress element to body, so update your CSS if it's needed.

NOTE ON BLACKBERRY PLAYBOOK

Changes and fixes added in this version have broken the experience on Blackberry Playbook with OS in version 1.0. It happened due to a bug in the Playbook browser in this version. Fortunately in version 2.0 of Playbook OS this bug was fixed and impress.js works fine.

So currently, on Blackberry Playbook, impress.js work only with latest OS. Fortunately, it seems that most of the users are quite quick with updating their devices
Source code(tar.gz)
Source code(zip)
0.3(May 14, 2016)
Changelog

7b4393cf: Fix Firefox 3D Bug that requires transform-style.

343299c6: enable clicking on elements 'hiding' behind body in 3D

cfe64485: Basic API to control the presentation flow from JavaScript

db5857af: Add touch support

2b22ee3b...23244841: Basic support for iPad (iOS 5 and iOS 4 with polyfills) and Blackberry Playbook

Breaking Changes

Because API was introduced the way impress.js script is initialized was changed a bit. You not only have to include impress.js script file, but also call impress() function.

See the source of index.html for example and more details.
Source code(tar.gz)
Source code(zip)
0.2(May 14, 2016)
Changelog

d8f70bdb15c4c685fd5cdfb28336b07ad7f69f98: Use strict mode

5ea857e6c2c09783bbe91fa66c4caccd15557c32: Yoda documentation added to the index.html file

65c456cb47fde46945e793e18c145541d624de3a / 8cd464a92660b311d9d40894f0b43b2ef191e0a1: Fixes laggy transitions in Chrome

11e5ddc77a7927305f20016cf507791050837aca: Add mousewheel event listener

bb0113e5be76fabde364363e2e6a72784b641dfe: Disabled animation on the beggining of the presentation

e96893311ed2ef247175f96110dd880779da403a: Clarify IE support

Source code(tar.gz)
Source code(zip)
0.1(May 14, 2016)

First impressive release.

Contains basic functionality for step placement and transitions between them with simple fallback for non-supporting browsers.
Source code(tar.gz)
Source code(zip)

Owner

impress.js

GitHub http://impress.js.org

A simple and easy jQuery plugin for CSS animated page transitions.

Animsition A simple and easy jQuery plugin for CSS animated page transitions. Demo & Installation http://git.blivesta.com/animsition/ Development Inst

3.8k Dec 17, 2022

Unobtrusive page transitions with jQuery.

smoothState.js smoothState.js is a jQuery plugin that progressively enhances page loads to give us control over page transitions. If the user's browse

4.5k Dec 21, 2022

CSS3 backed JavaScript animation framework

Move.js CSS3 JavaScript animation framework. About Move.js is a small JavaScript library making CSS3 backed animation extremely simple and elegant. Be

4.7k Dec 30, 2022

Create beautiful CSS3 powered animations in no time.

Bounce.js Bounce.js is a tool and JS library for generating beautiful CSS3 powered keyframe animations. The tool on bouncejs.com allows you to generat

6.2k Dec 30, 2022

A jquery plugin for CSS3 text animations.

Textillate.js v0.4.1 See a live demo here. Textillate.js combines some awesome libraries to provide an easy-to-use plugin for applying CSS3 animations

3.6k Jan 2, 2023

Slide-element - A ~700 byte Promise-based library for animating elements with dynamic heights open & closed. Basically, a modern variant of jQuery's slideUp(), slideDown(), and slideToggle().

slide-element A tiny, accessible, Promise-based, jQuery-reminiscent library for sliding elements with dynamic heights open & closed. To see it in acti

165 Dec 12, 2022

Simple parallax scrolling effect inspired by Spotify.com implemented as a jQuery plugin

Parallax.js Simple parallax scrolling implemented as a jQuery plugin. http://pixelcog.com/parallax.js/ Please also check our v2.0.0-alpha! We'd be hap

3.5k Dec 21, 2022

Click effect inspired by Google's Material Design

Waves Click effect inspired by Google's Material Design http://fian.my.id/Waves/ Documentation Waves uses Situs to generate documentation. Here are so

3.5k Dec 23, 2022

UI Framework for AngularJS

Suave UI 0.3.1 UI Framework for AngularJS Suave UI is designed for web-applications based on AngularJS. It consists of CSS definitions, directives and

339 Aug 3, 2022

Javascript library to create physics-based animations

Dynamics.js Dynamics.js is a JavaScript library to create physics-based animations To see some demos, check out dynamicsjs.com. Usage Download: GitHub

7.5k Jan 6, 2023

Create scroll-based animation without JavaScript

Trigger JS Create scroll-based animation without JavaScript. Sometimes we want to update the CSS style of an HTML element based on the scroll position

1.1k Jan 4, 2023

tsParticles - Easily create highly customizable particles animations and use them as animated backgrounds for your website. Ready to use components available for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno.

tsParticles - TypeScript Particles A lightweight TypeScript library for creating particles. Dependency free (*) and browser ready! Particles.js conver

4.7k Jan 4, 2023

Responsive, interactive and more accessible HTML5 canvas elements. Scrawl-canvas is a JavaScript library designed to make using the HTML5 canvas element a bit easier, and a bit more fun!

Scrawl-canvas Library Version: 8.5.2 - 11 Mar 2021 Scrawl-canvas website: scrawl-v8.rikweb.org.uk. Do you want to contribute? I've been developing thi

227 Dec 31, 2022

It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.

Related tags

Overview

impress.js

HOW TO USE IT

Checking out and initializing the git repository

Documentation

Official demo

Examples and demos

Other tutorials and learning resources

Mailing list

REPOSITORY STRUCTURE

WANT TO CONTRIBUTE?

Requirements

ABOUT THE NAME

Reference API

BROWSER SUPPORT

COPYRIGHT AND LICENSE

Comments

Releases(v2.0.0)

v2.0.0(Jul 22, 2022)

1.1.0(Apr 11, 2020)

1.0.0(Mar 7, 2018)

1.0.0-beta2(Jan 15, 2018)

1.0.0-beta1(Nov 12, 2017)

0.6.0(Jul 3, 2016)

Changelog

0.5.3(May 14, 2016)

Changelog

0.5.2(May 14, 2016)

Changelog

0.5.1(May 14, 2016)

Changelog

0.5(May 14, 2016)

Changelog

UPGRADING FROM PREVIOUS VERSIONS

0.4.1(May 14, 2016)

Changelog

0.4(May 14, 2016)

Changelog

UPGRADING FROM PREVIOUS VERSIONS

NOTE ON BLACKBERRY PLAYBOOK

0.3(May 14, 2016)

Changelog

0.2(May 14, 2016)

Changelog

0.1(May 14, 2016)

Owner

impress.js

A simple and easy jQuery plugin for CSS animated page transitions.

Unobtrusive page transitions with jQuery.

CSS3 backed JavaScript animation framework

Create beautiful CSS3 powered animations in no time.

A jquery plugin for CSS3 text animations.

Slide-element - A ~700 byte Promise-based library for animating elements with dynamic heights open & closed. Basically, a modern variant of jQuery's slideUp(), slideDown(), and slideToggle().

Simple parallax scrolling effect inspired by Spotify.com implemented as a jQuery plugin

Click effect inspired by Google's Material Design

UI Framework for AngularJS

Javascript library to create physics-based animations

Create scroll-based animation without JavaScript

tsParticles - Easily create highly customizable particles animations and use them as animated backgrounds for your website. Ready to use components available for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno.

Responsive, interactive and more accessible HTML5 canvas elements. Scrawl-canvas is a JavaScript library designed to make using the HTML5 canvas element a bit easier, and a bit more fun!

Animator Core is the runtime and rendering engine for Haiku Animator and the components you create with Animator

Javascript and SVG odometer effect library with motion blur

🐿 Super easy and lightweight(<3kb) JavaScript animation library

:dizzy: TransitionEnd is an agnostic and cross-browser library to work with transitionend event.

fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple

A jQuery plugin that assists scrolling and snaps to sections.