Vertical Parallax – A new trend in webdesign

Gopal Raju — Fri, 04 Mar 2011 14:18:30 +0000

Parallax based webdesign was already a trend for the past few years, but it looks like vertical parallax is going to be the next big thing. Unlike the typical horizontal parallax, the movement happens as you scroll the page. The following is a list of creative websites that has marked the beginning of this trend. I’m expecting to see more of this in 2011.

Ben the bodyguard This is almost like watching a short film

Nike better world You’d be already familiar with this.

TEDx Portland A unique use of the parallax effect.

ResolutionIM Don’t take your eyes off the rocket as you scroll.

David Beckham

Manufacturedessai

APO

Tutorial to create a vertical parallax using CSS and jQuery

And finally, an awesome detailed tutorial explaining how to create a vertical parallax using jQuery and CSS.

Announcing the launch of IndoFolio

Gopal Raju — Fri, 18 Dec 2009 12:33:47 +0000

Good News! I’ve quit my day job to get to do the things I enjoy doing very much on the internet! Yes, that means I’ll be spending more time on ProductiveDreams and taking up freelance projects at the same time. As a first step, I am launching my portfolio – Indofolio.com

In this post I would like to give you a brief overview on IndoFolio and its design.

Why IndoFolio?

I wanted to use a domain name that makes it clear that I am from India and Indo is the most popular prefix used to indicate India. My second requirement was to include “folio” which makes it obvious that this is my portfolio.

Concept behind the design

My name “Gopal” is another manifestation of Krishna who was one of the incarnations/avatars of Lord Vishnu according to Hindu mythology. This inspired me to include other avatars of Lord Vishnu as well. Nothing religious! This was just an attempt to come up with a unique design concept.

Just to let you know, I am a great fan of Russian Art! and was very concerned about achieving an Indo-Russian effect. Though it took me some time playing with Fireworks and Photoshop, I’m happy with the final output.

Softwares Used

The initial draft of IndoFolio was created using Fireworks and was purely vector. Then I took it to photoshop, to burn and dodge a few areas which helped me achieve the “painting” effect. I believe Photoshop gives more control when it comes to burning and dodging.

In the following images, you can compare the Fireworks and Photoshop version of the avatars. I’ve given a one line description about each avatar, for those who are curious

Matsya – The Fish Incarnation is the first one among all.

Kurma- Lord Vishu assumed the form of a tortoise for this avatar.

Krishna (aka Gopal) is considered to be the 8th avatar.

Varaha- The Boar, is one of the interesting incarnations which appeared in order to defeat a demon.

and finallyVamana, the dwarf brahmin.

These are just 5 of the 10 incarnations of Lord Vishnu.

Image Optimization

Optimizing the images was a challenge as I had to maintain the image quality. Transparency being a major thing to consider, I had to convert most of the images to 24bit PNGs. I used some online image optimizers like PNGCrush to reduce the file size.

HTML/CSS Development

This was really challenging as my goal was to create a single page website using these avatars. I planned to use JQuery to make the site more lively, different and user friendly. Using JQuery intensely for a single page website is no sin

After doing some research, I decided go ahead with horizontal parallax. For more details about Parallax check out my previous blog post (I created this post while working on IndoFolio).

So that’s it! I would be glad to hear your comments (good or bad) on IndoFolio.

Learn how to create web designs with HP0-J38 tutorials. These 156-215 tutorial and 642-072 guide include everything from basics to advance features for beginners.

We offer complete range of practice questions for microsoft certifications and pmi certifications. Pass your cissp exam using our up to date exam dumps.

Productivedreams.com » parallax