HTML/CSS KALEIDOSCOPE

Again, I was just having a little fun with HTML/CSS, this time I decided to make a kaleidoscope.

It was initially all created with just HTML/CSS using four image tags to make the end result but I’ve since decided to leverage Javascript to enhance it and to make the source HTML a little cleaner.

I now use one image tag and am using Javascript to create the four versions of it programmatically. I also decided to add a little animation to it and have set it up to cycle through images as a slideshow.

There are four different CSS3 driven animations which are selected randomly using a simple function:

var animationType = function() {
	var animation_types = new Array('zoom-in', 'zoom-out', 'zoom-in-twist', 'x-slide', 'y-slide');
	return animation_types[Math.floor(Math.random()*animation_types.length)];
};

Kaleidoscope

View The Working Version 樂威壯
oscope” href=”http://mraffaele.com/labs/html-css-play/2013-07/24-kaleidoscope/2013-07-24-kaleidoscope.zip” target=”_blank” rel=”noopener”>Download The Source

COMMENTS (2)

  1. Linda says:

    wow, compliments, I used your pure css accordions because they were the only ones that also toggle closed – so smart – so I checked what else you had on the site and saw… THIS!… :-D ooh, aah, gosh & wow.
    It’s BEAUTIFUL! Its not only smart and well done and well programmed etc – it’s really aesthetic, and that makes a whole lot of difference.
    :-))