Experiment #1: The page itself

The first experiment is the page itself. The main goal was to create website that adapts to different devices and its graphic deign is made entirely using only HTML, CSS and JavaScript, without using bit images or other visual media. The page adapts using the SUSY plugin for the Ruby on Rails style framework Compass. Non necessarily Html5/CSS3, but responsive design is a crucial part in modern web design. The logo is made with custom fonts and a SVG image. The rest of the page is all styled with CSS with some JavaScript effects to make it more dynamic. The only image used is for the dotted lines, where different browser implementations of the dotted border property caused discrepancies in the design.

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

The purpose of this experiment was to try out the Sprite animation functionality of the KineticJS library with Canvas. KineticJS is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more. It uses a single image file with 4 different frames of the animation.

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 #11: Swipe and slide with CSS3 and JavaScript animation

Experiment #12: Drag constrained to parent with jQuery.pep.js

Dragging objects around the browser is not a new feature in web development, but with the quick rise of touch technologies it become relevant again. The jQuery plugin jQuery.pep.js does just this and it does it in the simplest and most efficient way possible. To implement the simple drag functionality all is needed is to call the pep function with JavaScript. This experiment takes advantage of some advanced features of jQuery.pep especially constrain to parent.

Experiment #13: Drag with Hammer.js

Hammer.js is a small and standalone JavaScript library for multi-touch gestures. It supports several gestures like: supports Tap, DoubleTap, Swipe, Drag, Pinch, and Rotate. Each gesture triggers useful events and eventData. The supported devices are: Android, BlackBerry, iOS and Windows touch devices. It also works on desktop browsers. Older IE versions with the jQuery plugin. The source code itself is very well commented and it can used as a learning tool for using advanced features and create custom gestures. This experiment uses the Hammer.js drag events to implement a simple touch enabled div element moving by dragging. The transition animation is done with pure CSS3. The logic behind it is very simple. Hammer.js gives the touch X and Y coordinates of the touched div. All that needs to be done is to calculate the new coordinates of the object and move it accordingly.

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

This experiment explores the possibilities of developing a touch enabled dragging algorithm without using any additional JavaScript library or jQuery plugin. The experiment itself it is a simple drag of the div element with touch. As it turns out it is not match different than using the Hammer.js plugin. This article describes all the events and how to use them.

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

The first of the series of ads is a classic animation in a standard 728 × 900 px size and it's ment to be used viewed on big screen devices with no touch capabilities. As all the subject of the ads is Hyla G a mobile video game. It's implemented using Canvas with the JavaScript framework KineticJS. The Sprite function is used for the jumping frog animation. The rest of the animations are done with the Tween function.

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.