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