Gizmo1

Where Art and Technology become one

Sandbox

Menu In

Menu Out

Here we are going to test various types of applications animations and other things. Also discuss how they are built, how they work and how they might be useful.

The Menu button (above left) takes you to a series of CSS / Javascript exercises that I am building up as a reference and part of a learning tool for others. I am currently working on showing the code on the example pages, which is not as easy as you may think. In the meantime I have developed the slide in menu to the right to help get you around the various examples. These pages are going to develop, further text and examples will be added as time goes on. This section is important to me; I want to develop a repository of bits of code and really useful examples that solve real life problems in coding. Not just 'hints and maybe this will work' stuff but stuff you can lift out, paste in, edit a bit and Voila

For example this code for the tumbling cubes was originally created by Hatem Dbais and is displayed here with permission I came across this animation by Hatem Dbais on the Sololearn website/forum. I liked it so much that I asked permission to show it here on my site as an example.

I have made a lot of changes to this version to reflect the theme of the site. Reducing the number of cubes to two. and adding the picture and text backgrounds. This is all done in CSS3 which is the styling language for web pages. This makes it very efficient in terms of CPU processing giving the whole animation a very smooth appearance.

The above is a good example of how you can find little bits of code and take them apart and rebuild them to work for you. This could now be used for all sorts of logo design with one or more layers you can achieve many results. You could even play with the tumbling effect. If you have read my article on DIY web page builders, this is the sort of thing you can NOT do with them.