The Bearded Brew Project

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