Ideation

[chinnichaitanya]

Hello,
You can put all your ideas in the comments. Put the links and tell what all are good in that pages. It may be anything. Any small animation you find interesting, you can put.

[sriram169]

how about this :
http://hoverstat.es/
there before a page is loading completely we can put that umbrella spinning idea, let's say in our case a dice rolling.
another one:
http://www.jqueryrain.com/?tI2fDja6
here if the given user details are wrong we can put that shake effect idea to show that there is an error.

[chinnichaitanya]

@sriram169 Nice work.
But just figure it out how can you implement them with AngularJS because that is what we will be using.

[sriram169]

Image tilt effect:
http://www.jqueryrain.com/?1HeaF8st
here when we hover around on the image it tilts accordingly how we move on it, we can put this kind of idea to let's say a particular event box when a user hover around on the background image.

[ankan007]

I feel this effect is a bit annoying..this blurring and tilting.

[chinnichaitanya]

Yeah. So whatever you search, you can put it here.
But figure out if you can do that with AngularJS or not later.
If it is done using CSS completely (or) with a bit of written JS code instead of using a plugin, we can definitely implement it using AngularJS.

[chinnichaitanya]

So take a look at skrollrjs. You can see the demo link there.
But it is a plugin.
So, to implement that using AngularJS, we have other methods. Take a look at here and here

[ankan007]

_Background Video_

These sites use this technique of having a video running in the background:

http://transitions1020.com/
http://couleecreative.com/
http://hyperakt.com/
http://www.jurassicworld.com/?redirect=false

[ankan007]

This site also has a background effect of changing colors with a nice transition,subtle and smooth effect: http://www.designweekportland.com/

[ankan007]

_Hero image_

A big, bold, striking graphic (video or image) presented right when the
user gets to the website that pretty much explains what the website is all
about. We can have a graphic of the Shaastra dice. Check out these sites :

http://store.apple.com/us
http://www.masterdynamic.com/
https://litmus.com/
http://fitstar.com/

[ankan007]

_Drop shadows_

Adding this effect to panels to add depth to them. This site has used box-shadow in almost all panels:

http://my.xfinity.com/

[ankan007]

If we go for a very formal and professional theme for our website then we can go for either _Flat Design_ or _Google's Material Design_. Both entail simplicity and straight forward designs. But these designs are mostly for apps, android, windows and all, and might look a bit monotonous for a website. They might look nice (if not fully on the website, but in some sections) if implemented properly.

_Flat Design_
It does not involve much CSS, there are no box-shadows, so no depth and hence the design is flat. Mostly characterized by squares and rectangular panels(no rounded corners). Design is based on using colors and layouts effectively. Check out these sites:

http://www.microsoft.com/en-in/default.aspx
http://foundation.zurb.com/
http://rollcall.unitedpixelworkers.com/
http://builtbybuffalo.com/ - This site has good animations attached to scrolling.

[ankan007]

_Google's Material Design_

This is the next level of _Flat Design_. It is mostly like flat design but has some CSS effects like box-shadow, adding depth to the panels. The following site has many examples of this lately popular design:

http://www.materialup.com/

[ankan007]

_Parallax_

I found it the most interesting feature. This can definitely make the webpage more dynamic and lively for the user. Its about creating a 3D space perspective in the page by positioning elements in the background, mid-ground and foreground( basically 3 different layers) and moving them at different speeds(background - slowest, and foreground - fastest) while the user scrolls.

The sites below have a fixed background while the rest of the body moves while scrolling:

http://www.ok-studios.de/home/
http://themes.tvda.eu/demos/kutcherst...

[ankan007]

_Parallax (contd.)_

These sites have different elements moving at different speeds:

http://www.apple.com/macbook/
http://jason-kenny.com/
http://unfold.no/