Category: HTML & CSS

The website http://www.boy-coy.com/#home is one Alex and I found at the very beginning of our research, and have continued to appreciate since then.  The website has earned a place in the top 20 parallax websites of 2015, which is quite the success considering parallax scrolling has quite recently become a popular design tool. Even though the style of this website differs in many ways to the one we want to create, the overall experience it provides is fantastic. Therefore, I decided to find out how it was made, and whether we could benefit from using similar techniques in our own work. Again, following on from the Javascript vs CSS discussion.

 

From first glance, I thought the website had very cleverly used purely CSS in their build, due to the smoothness of the scrolling and how well it works in a variety of browsers. The animated movements are all very basic, yet work well with the theme, and the main attraction to the design is how layers blend by moving over on another at different speeds. However, after more research and spending some time inspecting the style elements behind this website, I found that they have in fact, used both Javascript and CSS to create this style of parallax.  This wasn’t something I considered to be an option before, I thought it would be better to stick with one over the other, although now I think working with both could benefit the stylistic approaches we want to consider for our website.

 

The previous post showed how I played around with CSS to create a quick, basic parallax site. Here is an example of the code I used, using both CSS and Javascript to create a similar styled site.
#home {
background: url(Javascript%20Proto/desert.png) 10% 0 repeat fixed; min-height: 100px;
}

#about {
background: url(Javascript%20Proto/legend-of-the-bearded-brew.jpg) 50% 0 no-repeat min-height: 1000px;
}

#home {
background: url(Javascript%20Proto/desert.png) 50% 0 repeat fixed; min-height: 1000px;
height: 1000px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
}

#home article {
height: 458px;
position: absolute;
text-align: center;
top: 150px;
width: 100%;
}

#about {
background: url(Javascript%20Proto/legend-of-the-bearded-brew.jpg) 50% fixed; min-height: 1000px;
height: 1000px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
-webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8);
box-shadow: 0 0 50px rgba(0,0,0,0.8);
}

#about article {
height: 458px;
position: absolute;
text-align: center;
top: 150px;
width: 100%;
}

$(document).ready(function(){
$(‘section[data-type=”background”]’).each(function(){
var $bgobj = $(this); // assigning the object

$(window).scroll(function() {
var yPos = -($window.scrollTop() / $bgobj.data(‘speed’));

// Put together our final background position
var coords = ‘50% ‘+ yPos + ‘px’;

// Move the background
$bgobj.css({ backgroundPosition: coords });
});
});
});

 

Overall, I found that using CSS alone creates a site I particularly think would better suit the style of website we want to create. However, there are ways of using Javascript that will allow particular animated movements to happen, that CSS couldn’t do.  We have a lot to think about.

 

Beer and stuff.

 

– Alice

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