Online Tips for Web Developer/Designer

With the flexibility of CSS3 / html5 / JavaScript, we see new approach to web design. With more power css3 / html5 / javascript, designer and developer can now do things in a more fancy way (design fashion). While scrolling the page down, you can see the interaction that the designer or brand that showcase there product in a way few years ago only Flash can handle. But now with the power of CSS3 and HTML5, we can put in details into the whole structure and flow of the web in a simple way. Now you are viewing not just an website, you are now viewing a webshow! Now, let’s the show begin.

http://www.360langstrasse.sf.tv/

http://www.beetle.com

http://www.hyundai-veloster.eu

Tutorials on scrolling animation:

Parallax Scrolling Background

In this tutorial, we’ll be using JQuery to take a horizontally scrolling website and add a parallax scrolling background effect reminiscent of old-school 2D platform games like Sonic the Hedgehog.

Demo: http://themeforest.s3.amazonaws.com/116_parallax/tutorial-source-files/tut-index.html
Tutorial: http://blog.themeforest.net/tutorials/create-a-funky-parallax-background-effect-using-jquery/

Make Your Header Responses to Mouse Movements

In this jQuery animation technique, you will learn how to animate a set of images that reacts to the user’s mouse movements. When the user hovers over a set of images, the set begins to follow the mouse cursor. This technique can be adapted to many user interface related functions, or you can just use it to impart a memorable experience to your users.

http://oopit.wordpress.com/2009/10/27/make-your-header-responses-to-mouse-movements-with-jparallax/

Animate Curtains Opening with jQuery

Demo: http://buildinternet.com/live/curtains/
Tutorials: http://buildinternet.com/2009/07/animate-curtains-opening-with-jquery/

Resource jQuery

Scrolling Parallax: A jQuery Plugin

Scrolling Parallax is a new jQuery plugin that binds a parallax effect to the scrollbars and mouse wheel. This allows a background image or anything else to scroll at a different pace than the web page when a user scrolls around. The parallax effect that results is an easy way to create an illusion of depth on your website.
http://jonraasch.com/blog/scrolling-parallax-jquery-plugin

I hope you have enjoyed this post, be sure to subscribe to my rss feed by click the subscribe button at the top.

Good Luck!