Interactive Particles Slideshow

An interactive particles slideshow experiment built with HTML5 Canvas.
InteractiveParticlesSlideshow

This is an experimental interactive slideshow component with math shapes and texts using Canvas. 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.

Please note: this only works as intended in browsers that support the respective CSS properties. Modern browsers only!

The particles for the shapes have a predefined set of colors that the particles will be painted with. The text will be built up of white particles:

InteractiveParticlesSlideshow01

When navigating to the next (or previous) slide, the text and the shape will morph into the new one, creating an interesting effect:
InteractiveParticlesSlideshow02

After the transformation, we can see the shape and the text of the next slide:
InteractiveParticlesSlideshow03

The particles of the text and the shape are interactive in a way that we can push them around a bit:
InteractiveParticlesSlideshow04

Hope you liked it, and that it gave you some inspiration!

Tagged with:

I'm a freelance developer. I love all things related to animations, motion, and interactive web stuff. I also love arts, physics, and cars. You can find my experiments at: http://codepen.io/Francext

http://francescotrillini.it

Receive our bi-weekly Collective or official newsletter right in your inbox.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 33

Comments are closed.
  1. Hi. Interesting one. But if i wanted to customize it on my own, make my own wordings, how do i make that?

  2. It’s quite interesting but you might check something because the animation disappears when you navigate through open tabs and never reappears (on Chrome Beta, at least). Keep up the good work 😉

  3. I see I can change the wording to whatever I want. How do I only get the word and take out the circle, ovals, ribbon etc. ?

  4. Amazing!
    Every time i need any CSS outstanding stuff, i simply open codrops bookmark 🙂
    Bravo


  5. function createParticles() {

    for(var quantity = 0, len = 200; quantity 0 || radius < 12 ? false : true;
    ...

    Last line in the code block should be always evaluating to false. Is that intended?

  6. WOUHAOU ! very nice work Francesco / How is it possible to create a link target on each words / animation ? Thanks you

  7. Hi, I like it and I want to change from circle to heart-shaped?? Thank you so much!