CSS3 Expandable-Collapsible Panel for iPhone

Many of you might have worked upon or have used a collapsible panel in one of your projects before reading this post. And the best chances were that the collapsible panel core logic was developed using traditional methods of animating HTML objects using the setTimeout() or the setInterval() methods. Here I have listed down a quick example of building a collapsible/expandable panel using the latest CSS3 technique of transitions. Of course, you have to use a little bit of java script for handling the style elements dynamically. This example is mainly focused on iPhone (iOS) and Android touch devices and targets the mobile web kit browsers. You can also use the same code for desktop web kit browsers such as Chrome and Safari, and a little generalization of the code would let you use the application for all the other browsers supporting the newer CSS3 style rules (e.g. latest version of Firefox). Check out the images below, of the application in portrait and landscape mode of my iPod. And here is the link to the demo app, check in Safari or Chrome.

http://jbk404.site50.net/html5/mobile/collapsiblepanel/

Expanded in portrait mode

Collapsed in portrait mode

Landscape mode

Fade-in/Fade-out animation using CSS3

Let us try a simple fade-in and fade-out animation in CSS3. Looks very simple, lets see how to achieve it. We will be using only CSS3 for the animations and only a little bit of java script for changing the CSS classes dynamically. First let’s check the demo,

Demo link: http://jbk404.site50.net/css3/fade/  (Check in Android/iOS mobile browser or Chrome/Safari/Firefox/Opera in your computer)

and this is is how the demo looks.

Fade in /Fade out animation

Adding events to your Adobe Edge HTML5 animations

Although HTML5 animations using Adobe Edge is very new but the things that you can do with this new tool is breathtaking though, which otherwise would have been very hard to achieve writing code to do the same. I tried some basic animated banners using Edge and it looked just like flash banners. Alright, so we know that we can create cool stuff with Edge but I wanted to add events to the animated banners. Lets say that on click of a text or an image you are taken to a new URL or may be you open a pop up.  The requirements can be different. So lets quickly discus on how to add events to your  HTML5 animation that you have created using Edge.

Adobe Edge – HTML5 animation

I have just tried out the new preview release of the Adobe Edge tool and created an animation based on HTML5. As I have posted earlier that Adobe has this thing called Edge with which you can do stuff like Flash, you can add tweening animations, effects, move the objects, ease out, ease in and do a whole lot of stuff. What you can do is that you can download the preview version, its free but only for 142 days, that sounds enough to get you going and may be complete a couple of projects within the time limit. The animation runs in all the latest version of browsers. Some cool stuff can be done. Check out the animation here

Here is a video to get you started: Edge closer look by Adobe Fellow Mark Anders