From our sponsor: Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox.
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.
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:
When navigating to the next (or previous) slide, the text and the shape will morph into the new one, creating an interesting effect:
After the transformation, we can see the shape and the text of the next slide:
The particles of the text and the shape are interactive in a way that we can push them around a bit:
Hope you liked it, and that it gave you some inspiration!
Hi. Interesting one. But if i wanted to customize it on my own, make my own wordings, how do i make that?
me too
Line 39: words array
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 😉
Wow! )
just simply astounding! nice f***ing job! [asterisks mine]
wow! so awesome! Thank for your sharing!!!
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. ?
Amazing!
Every time i need any CSS outstanding stuff, i simply open codrops bookmark 🙂
Bravo
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?
(Y)
Just one word.. Superb..
never thought of it can be possible …
Fantastic !!!
Thanks Francesco.
Internet Explorer 10, it works!!!
wow ! this is amazing !!!
Hi people.
Nice Job, Francesco Trillini.
This project looks like this one http://workshop.chromeexperiments.com/
Al
Awesome !!!
WOUHAOU ! very nice work Francesco / How is it possible to create a link target on each words / animation ? Thanks you
Nice job, very awesome
Simple amazing
Hi, I like it and I want to change from circle to heart-shaped?? Thank you so much!
Really nice work Francesco, love the transitions 🙂
Very nice man! How do you create new shape like “Square”, “Oval”, and So on.. I’d really like to be able to create shape like coputer monitor, car, and building…
Thanks!
Cool and creative.
Excellent stuff. We know how hard it is to create something like this and you give it away for free!
hey this is really amazing bro 🙂 B-) awesome 🙂 good work 🙂 i was wondering if could change the shape according to my desire!!! is this possible? :-O
is there any online tool to build that shapes???
inspiring
realmente muy inspirador grax
This demo actually DOES work on IE9/IE10, please make sure you are accurately portraying the browser we all love to hate! Cool demo, btw!
Hey, there’s a “?” sign on IE and not cross. I think it implies it would work on some version and may not on others.
Fantastic work. I thought you’d have used a library like paper.js or two.js
Would love to know your opinion about them.
Hi, that is looking good and i guess it was a alot of work. Thank u!
but i noticed that my cpu usage went to 100% when i was browsing the demo page.
Is it because of the old pc i have? or the bad graphic card?