How is a website such as this created?

haz_pro · 20 Mar 2013 at 13:28

Hello All,

I used to really enjoy making websites and have decided to try it out again by making myself a personal website (not for any particular reason, just for fun).

I have come across some websites such as this: http://www.prism-digital.com/, http://www.steakgroup.com/uk/, and I quite like the design.

To me it looks like flash but as far as I am aware no one uses flash for websites any more.

Can someone shed some light on what I should be looking for to create a website with similar flow.

Thanks,
Harry

Tripnologist · 20 Mar 2013 at 13:56

The effect is called Parallax Scrolling and it's done with HTML, CSS and JavaScript (jQuery).

GravyMonster · 20 Mar 2013 at 15:13

It's quite straightforward to do, I think there's several plugins around to do it for you.

The depth is created by moving the relevant divs by a factor of the distance which the window was scrolled. >1n for close objects, <1n for distant objects.

Ewaf · 20 Mar 2013 at 15:54

Please don't make a parallax website, they are awful.

haz_pro · 20 Mar 2013 at 16:46

Thanks for all your posts.

I have some experience with jquery, didn't realise it could do things like this though.

Ewaf: I understand it won't be the most functional website using this, but I am just creating it for fun (I am not bothered if it never gets a hit.

Dark_Injection · 28 Mar 2013 at 15:03

Why is a parallax website awful Ewaf?

I read a very comprehensive guide the other day indicating that one page designs (so not entirely parallax) score significantly better for SEO than deeplink websites.

I am currently having my website changed into a one pager, have a great designer from Berlin working on it.

fez · 28 Mar 2013 at 16:51

The big issue with single pages sites usually is that they haven't been very well considered. I don't want to be linked to the middle of a 4000px tall site which screws with your eyes with a parallax effect. The only sites I have seen where it is good is where there is very visual info or not much info at all. You say "oooh, that looks nice" and move on without actually using the site.