Bang & Olufsen are a well-established global brand leader in some of the very best products for sound quality. They’re also just as well known for the innovative styling of their products, and are an established company when it comes to innovative product design. With such a strong design ethos, the company offers collections of products that mirror that of the fashion world.
This website alone simply shows off just their headphones and speakers in their Autumn and Winter Collection for 2016. The products here have been inspired by the nature of the Icelandic geography, with earthy colours and textures used throughout their range. With such an emphasis within the company towards quality and styling, the web design has to mirror that same aspiration that Bang & Olufsen are known for. Fortunately, this is relatively easy to achieve with some outstanding product photography and videos, but the page design also has to make that quality shine through.
Using a minimal colour palette to emulate the colour of the products, there are a range of flourishes and animations that enable the site to stand out as an excellent piece of design. The photography reacts to the user so that they can explore the natural landscapes, and animated popovers appear to give more information and round out the content of the site.
DOWNLOAD THE CODE FOR THIS TUTORIAL NOW
TECHNIQUE
1. Create an animated pop-up
In the body of your HTML document, add a couple of
tags that have the original message to be clicked and then the details that will pop up. This is emulating the pop-up in the bottom right-hand corner of the B&O site.
<div id=”bumper” class=”up” onclick=”switcher()”>Want to win a Bluetooth Speaker in Black?</div> <div id=”details” class=”down” onclick=”switcher()”>Here’s the details</div>
2. Style the content
Open style tags in the head of your document or in a separate style sheet and add the code for the body and bumper ID. This positions it absolutely and adds a transition. The position will be controlled by two classes.
body {
font-family: Helvetica, Arial, sans-serif;}
#bumper {
position: fixed;
background: #333;
color: #fff;
padding: 10px 30px;
transition: all 0.8s ease;
cursor: pointer;}
3. Style the competition
The competition details are styled now. Here, it is set to be fixed in position with a smaller transition to the first content. The cursor is set to being a ‘pointer’ when the user hovers over this.
#details {
position: fixed;
border: 5px solid #333;
padding: 10px 30px;
width: 400px;
height: 200px;
transition: all 0.5s ease;
cursor: pointer;}
4. The magic CSS
The next two classes add the magic to the page. The ‘up’ class brings content on the screen, while the ‘down’ class positions it off the screen. With the transition, we’ll swap these out using JavaScript when the user clicks.
.up {
bottom: 20px;
right: 20px;
}
.down {
bottom: -250px;
right: 20px;}
5. Cache the IDs
At the bottom of the body on the page, add an opening and closing script tag. Here, the bumper and details IDs are cached into a variable so that it can be triggered quickly when the user clicks the screen.
var bumper = document.gettElementById(“bumper”); var details = document.getElementById(“details”);
6. Switch the classes
Now the switcher function is called when the content on the screen is clicked on. All this does is toggle the ‘down’ and ‘up’ classes so if they are applied, they get removed and vice versa. Save the page and test it in the browser to see the switching of content.
function switcher() {
bumper.classList.toggle(“down”);
bumper.classList.toggle(“up”);
details.classList.toggle(“down”);
details.classList.toggle(“up”);}