Awesome Interactive Particles Slideshow with HTML5 Canvas

File Size: 32.2 KB
Views Total: 4611
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Awesome Interactive Particles Slideshow with HTML5 Canvas

An awesome interactive slideshow component with math shapes and texts using html5 Canvas and CSS3. The slideshow consists of pairs of shape and text, both made out of particles that the user can interact with and that transition into the next pair when navigating. With Canvas we can dynamically draw 2D stuff using JavaScript and this experiment shows some of the possibilities.

How to use it:

1. Create the html for the slideshow

<div class="ip-slideshow-wrapper">
<nav> <span class="ip-nav-left"></span> <span class="ip-nav-right"></span> </nav>
<div class="ip-slideshow"></div>

2. The CSS

.ip-slideshow-wrapper, .ip-slideshow {
position: relative;
background: #f1c40f;
width: 100%;
height: 500px;
overflow: hidden;
.ip-nav-left, .ip-nav-right {
width: 80px;
height: 80px;
top: 50%;
margin-top: -40px;
z-index: 100;
position: absolute;
border: 6px solid #fff;
border-radius: 50%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
.ip-nav-left {
left: 20px;
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
transform: translateX(-100%);
opacity: 0;
.ip-nav-right {
right: 20px;
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
transform: translateX(100%);
opacity: 0;
.ip-nav-left:hover, .ip-nav-right:hover {
background-color: rgb(255, 165, 0);
cursor: pointer;
.ip-nav-left:after, .ip-nav-right:after {
width: 100%;
height: 100%;
color: #fff;
font-family: 'Lato', sans-serif;
font-size: 70px;
line-height: 62px;
text-align: center;
position: absolute;
top: 0;
left: 0;
.ip-nav-left:after {
content: '<';
.ip-nav-right:after {
content: '>';
.ip-nav-show {
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
transform: translateX(0%);
opacity: 1;

3. Include particlesSlideshow.js on the page

<script src="js/particlesSlideshow.js"></script>

4. Custom your list words in the particlesSlideshow.js

words = [ 'circle', 'ovals', 'drop', 'ribbon' ],

This awesome jQuery plugin is developed by FRANCESCO TRILLINI. For more Advanced Usages, please check the demo page or visit the official website.