Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196
News

Websites We Love: Jan Ploch

German design efficiency brings imagination and jQuery power to the fore with this charming portfolio

URL: http://janploch.de
Development technologies: HTML5, CSS3, jQuery
Designer: Jan Ploch

One of the nicest things about the recent attempts to move away from the convenience and power that Flash provides is that designers have to be more imaginative. Technologies like HTML, CSS and JavaScript all bring their own limited set of capabilities that when combined in clever ways can achieve some really effective results.

This relatively simple portfolio site for Hamburg-based web and graphic designer Jan Ploch really hinges on a cute graphical idea, strategically placed <div> tags and the necessary nuggets of jQuery required to make it work. The lengthy page is styled up to resemble a bottle of soda, complete with drinking straw and bubble-shaped rollover icons, which animates the emptying of the green liquid inside as you vertically scroll. The technique also owes much to the use of transparent PNG images, with a set of three employed to handle from the top, middle and bottom sections of the bottle. A function call to the jQuery Scrolling Parallax plug-in by author Jon Raasch takes care of the mechanics of the effect with seamless aplomb, adding a genuine wow factor to a site that might otherwise fall under the radar. It all helps to bring attention to Jan’s commercial web work of course, with impressive examples from Roy Robson’s fashion and modelling firm Smuk Agency being nicely represented.

×