About

"Taskpad"-Interactive Transparent UI Elements

I built this UI as the new interface for NOAAView (a data imagery portal). In order not to obscure the maps below, the entire menu is semi-transparent with the option of changing the opacity and color settings.

I used minimal javascript in this menu, taking advantage of CSS3 transitions for animated interactivity. Adding/removing classes or triggering CSS3 transitions with Javascript allow for an almost purely CSS driven menu that is unobtrusive to the complex javascript of the application.
*Note: This UI uses the CSS3 "Calc" rule which is not supported in older browsers-fixes for this would be done in production.

Click on one of the grey buttons to start playing with it here or view it in action »

« Back To Portfolio
-

1) The initial slide animation of the tabs happens only the first time a user clicks an item.

2) Hovering over the tabs shows the tab label cluing the user into the meaning of each icon with a smooth CSS3 transition.

3) The background has a slight noise image applied ensuring that there is a clear delimination between the Taskpad and the content below, regardless of color and lightness/darkness of content

4) The Taskpads are draggable and hide/show-able

Reposition:



hide/show:

5) Scrollable Content:

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. kiitten
Vestibulum tortor quam, feugiat vitae, ultricies eget,tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam

6) The separate Taskpad below would normally hold additional content that may be rendered on on certain user actions. I added the transparency slider here just to make it prominent.
-

Slide to Adjust Menu Transparency

Blue