Experiment #1: The page itself
Experiment #2: SVG
The introduction of scalable vector graphics in HTML 5 is a important new feature, especially for scalable designs. As the images dont lose any quality if they are zoomed or resized and no additional HTTP request is made. Every element and every attribute in SVG files can be animated. SVG can be embedded directly into HTML pages or included as a seatmate image or object.
This experiment is just a tryout of different SVG embedding in the html document, drawing some basic shapes and see how it performs if they randomly move around. The experiments background is also a SVG, using the Compass SVG background option which enables multiple color gradients.
Experiment #3: border-image
The only thing on this page design that isn't pure html/css are the dotted lines that separate the experiment. Those are a image repeated as a border using the CSS3 border-image property. All is needier is an image with 8 border shapes (top left corner, top, top right corner, right, bottom right corner, bottom, bottom left corner). The linked experiment has 8 differently collared dots. More details on the border-image property at w3schools or try the border-image-generator.
Experiment #4: Icons with CSS3
With CSS3 it's final possible to give divs different shapes. This is done basicly trough the border-radius an transform properties. With a bit of imagination and accurate planing it's possible to basically draw anything, just by combining different shapes using just CSS. Here is a good list of basic shapes examples. This experiment combines them into icons that will be used in a future larger experiment.
Experiment #5: Canvas basic shapes, movement and dynamic Canvas size
Canvas is one of the most important additions to HTML in the visual graphics department. It allows it to compete with Flash and similar technologies. The experiment is a pixel reproduction of text and a square shape and than make them move in a loop. The second part is making the canvas dynamically adapt to a smaller screen (like a mobile prone). That is done trough the Susy Compass plugin just like the website in Experiment #1.
Experiment #6: Custom fonts on Canvas
Experiment #6 Raised the question on how to use a custom web font in a Canvas object. The main problem is that wen canvas starts to draw the fonts aren't loaded in the DOM as no selector is using them. Which means the text will be displayed with the correct font once the page is reloaded. A good solution is to place a hidden div styled with the wanted font and the wait the Canvas function until that div is loaded.
Experiment #7: SVS animation
This is a simple animation using 2 SVG elements. One for the bottle and one for the bubble. The goal was to determinate the usability of SVG elements in animations, focusing on their major advantage the absents of quality loss when scaled.
Experiment #8: DJ Blobo - Canvas sprite animation with KineticJS
Experiment #9: Rotating box CSS3
This experiment explores the possibilities of crating 3D objects with the CSS3 transform property. It is basically a rotating box made with 6 div elements that represent each side.
Experiment #10: Play button CSS3
Experiment #12: Drag constrained to parent with jQuery.pep.js
Experiment #13: Drag with Hammer.js
Experiment #14: Drag, rotate, scale with Hammer.js - AD6
This experiment is the evolution of the previous one. To the moving of the div elements it has been added the ability to rotate and scale it by taking advantage of the Hammer.js gesture events. Scaling and rotating is done at the same time through the transform CSS3 property. This needs the scaleX, scaleX and rotateZ parameters and the origin of the transformation. It's very important to add the previous angle to the existing if a previous rotation occurred, so it won't reset on every next action. That must be placed in the ‘transformend’ function, that gets called at the end of each transformation. Because the actual object's div expands when rotated for everything to work properly, it's very important to have a container wrapped around it.
Experiment #15: Drag from scratch
Experiment #16: Moving multiple objects at the same time
The functionality to make gestures on different div elements at the same time is the main thing that is missing in the Hammer.js jQuery plugin. The purpose of this experiment is to implement a movement ov multiple object at the same time. This is achieved by using the native HTML5 API like in the previous experiment. The code is pretty simple, a lot similar logic to the one used in the previous chapter on Hammer.js. The difference here is that when the function is called on multiple objects those can just be moved with multiple fingers on the screen at the same time The most important thing is to use document.getElementById(element) to get the object you want to move, using the jQuery $(‘#element) wont work.
Experiment #17: Rotating box - AD5
This is the first base for the series of web ads that are the final products of this experimentation. It's the evolution of the Experiment #9 a 3 time vertical rotation with a initial hint on how to interact with it.
Experiment #18: Pull div - AD3
The purpose of this experiment is to create a base for a popup ad that will represent a frogs tongue. On the page load it pops up from the side of the screen and then it goes back leavening a small visible part on the screen that can be fulled out to see the entire ad. It's implemented using jQuery.pep. The popup object is constrained to a transparent parent that expands with it. By doing so the animation is very fluid and responsive.
Experiment #19: Pul rotate div - AD2
This experiment tries to put a new spin on the classic vertical side banner by adding the possibility to rotate it. It is implemented with basic jQuery mouse events.
Experiment #20: Multiple drag puzzle - AD6
Damaging multiple object at te same time resulted in the implementation of this two peace puzzle. It's purpose is for the user to interact with the ad. The movement implementation is done with with the native HTML5 multi-touch API.
Experiment #21: Drag down, move - AD4
This experiment is the basis of a interactive ad with two stages. The first part is a pul down element tat leads to full ad that can be moved around the screen. Wen that is moved outside the screen all resets to initial state. The pulling is implemented with Hammer.js using the dragdown gesture. For the movement the jQuery plugin jQuery.pep is used with a custom reset function.
Experiment #22: Sliding doors - AD5
Hammer.js is not implemented in a way to allow an easy implementation of using multiple gestures on multiple objects at the same time, but it is possible to do so with two objects. That is implemented in this experiment in the form of two sliding doors that are meant to lead to a full ad.
Experiment #23: Frog popup with CSS3 - AD6
This is a small animated illustration of the top of a frogs head with animated eyes. It's all made of div elements manipulated with CSS3.
Experiment #24: Geotagging with Canvas
Geotagging is a new HTML5 feature that enables the usage of the users GPS data. This experiment is a implementation Googlemaps with Canvas that points on the users location by using the geotagging data from his browser.
Experiment #25: AD1
Experiment #26: AD2
The second ad is a new spin on the classic vertical 120 × 600 px side banner by adding the rotation into a horizontal position. It's base is the Experiment #19, but for better performance the Hammer.js drag gesture is used. The content of the ad is mostly text except for the Hyla G frog, so the user has to rotate it to be able to read it. The frog image is implemented so it is always leveled on a horizontal position.
Experiment #27: AD3
This ad is inspired by the extensive frog tongue, which is the main protagonist of the mobile game Hyla G. The base made in the Experiment #27 had to be completely rewritten with using Hammer.js, because it couldn't be placed over other content. The graphics are all images but the slogan which is text styled with custom font imported with the @font-face CSS3 rule. The animations ad a mix of CSS3 and jQuery animate.
Experiment #28: AD4
The last ad of the series that was designed for viewing on personal computers is of a more complex type. It's starts of as a standard 468 × 60 px banner, but when pulled down in displays a the second part, which is a big play button that can be moved around the screen and when pressed it redirects to the ads website. The base is a modified version of the Experiment #13 using Hammer.js. The first part is all a image filer, the second is all done with CSS3 properties including the button from the Experiment #10.
Experiment #29: AD5
This is first ad of the series designed for mobile devices. It has two parts based on the basses of the Experiments #17 and #22. The first part is a scavenger hunt that leads to te entrance of Hyla G's home. Once the doors are opened a short animation occurs, that tells the user that the game is just a click away. All the interactive parts are developed using Hammer.js gestures. The dimensions of the ad are a standard 728 × 90 px. The graphics are a mix of images and custom imported fonts with the @font-face CSS3 rule.
Experiment #30: AD6
The last of the series of ads is designed especially for mobile phones. It has three parts, starts with the frog head animation from the Experiment #23, once clicked a two parts of a wrapped ticked appear, which basses is the puzzle from the experiment #20. Once the ticked is put together a flayer amperes from the top of the screen, which can be moved, rotated and scaled, with the logic used in the Experiment #14. Most of the graphic is done with images for better performance. All the interactive parts are implemented with Hammer.js gestures.
Experiment #31: Mock-up platform Adventurer
Adventurer is a mock-up website created in order to test the ads in a realistic environment. It's designed to imitate a news type websites front page. It's developed the same way as the main page in a responsive way using the mobile-first method. The content of the page is all the obtainable data about the user.