Category: Web Development

Today Alex and I had our first tutorial with James Field and we were therefore able to talk through some of ideas, allowing us to gain some sort of clarity over what the next stage in this process would be.  I personally left this meeting with more encouragement about the overall project, and how much potential it has, if we follow certain procedures.

 

At this stage, we are uncertain of the procedures that need to be taken and have therefore decided to mock up some prototypes of a parallax scrolling animation, one using HTML & CSS and the other using JAVASCRIPT & JQUERY.  This has been left in my hands for the week, whilst Alex works on building more design assets. We believe this to be of ultimate importance because it will define the route we decide to take and determine what particular style the website inherits.

 

We left the tutorial and headed straight for the library, to make a start while ideas were still fresh.  We could have gone and discussed things more thoroughly over a few beers but came to the conclusion that we couldn’t risk making an alcohol infused decision with something this important.

 

After a couple of hours playing around with different CSS styles and re-introducing myself to dreamweaver, I came up with a quick parallax mock-up, using the really basic assets we already had and only using CSS : https://www.dropbox.com/s/mxnucwtue87w5lo/CSS%20Prototypes.zip?dl=0.  This has allowed us to gain insight into exactly how the animation could potentially work if we continued down this route, however, I am also going to spend some time playing around with Javascript, as this will provide us with more clarity.

 

Had a few troubles trying to upload the CSS & HTML zip file and therefore had to share it through dropbox. More prototypes to come this week.

 

– Alice

Beer.

 

More research has happened, but this time on how to actually build the parallax scrolling website.  We firstly looked into using Javascript for this,  as we thought it seemed more appropriate and found it was a common theme with web designers. However, after understanding how easy it is to implement Javascript parallax badly, we thought it might be best to consider other options.

 

Using Javascript would potentially force browsers rendering pipeline to be out of sync, meaning dropped frames and stuttering. Therefore, in order for our animation to be effective, working purely with CSS may be beneficial, as it would result in consistent frame rates and smooth scrolling.

 

 

 

“The parallax class is where the parallax magic happens. Defining the height andperspective style properties of an element will lock the perspective to its centre, creating a fixed origin 3D viewport. Setting overflow-y: auto will allow the content inside the element to scroll in the usual way, but now descendant elements will be rendered relative to the fixed perspective. This is the key to creating the parallax effect.

Next is the parallax__layer class. As the name suggests, it defines a layer of content to which the parallax effect will be applied; the element is pulled out of content flow and configured to fill the space of the container.

Finally we have the modifier classes parallax__layer--base andparallax__layer--back. These are used to determine the scrolling speed of a parallax element by translating it along the Z axis (moving it farther away, or closer to the viewport).” – Keith Clark.

 

The above research shows how to create the initial scrolling parallax with CSS, now just time to test it for ourselves. Javascript, we haven’t written you off completely just yet.

 

There has been minimal beer talk in this post – apologies.

 

– Alice

 

After some research into the potential design behind this website, we have so far decided to go down the parallax scrolling route.  This style involves the background moving at a slower rate to the foreground, creating a 3D effect as you scroll down the page, thus providing a subtle element of depth.

 

We have both worked with flat, 2D design before and decided that this time, it just won’t do by itself. We want bigger and better… also really want to be able to use ‘Agisoft Photoscan’, because wow!

 

Our aim is to make scrolling down our webpage, an experience in itself. There will be animations, graphics, music, narratives, even reptiles! But for now, I thought I would share a couple of awesome websites that I think have taken the oh so popular parallax and made it even better than it was ever intended.

• http://www.dangersoffracking.com
• http://poppyspend.britishlegion.org.uk
• http://www.flatvsrealism.com – THIS ONE IS LITERALLY MIND-BLOWING!!
• http://boy-coy.com

I should probably also mention that there will be beer. There will always be beer.

 

– Alice