Part two of this tutorial takes an augmented menu that uses the mobile’s device orientation controls and adds interaction to create a fully working site experience
GET THE CODE FOR THIS TUTORIAL
In part one of this tutorial, a unique mobile augmented website menu was created. The site was created with the help of the three.js library and was rendered using the CSS3 renderer rather than the WebGL renderer to give maximum compatibility with devices. The 3D was an integrated part of the design as the user had to rotate their phone around them to display the interface, augmenting the site around them. This placed the user in the centre of the interface.
The movement of the phone was created using the ‘Device Orientation Controls’ that come bundled with three.js and this sort of turned our phone into something similar to an Oculus Rift.
Now, in this final part of the tutorial, the interface will be given some content so that it actually becomes useful. This content will be hidden from the user until they click on the appropriate icon in 3D space, at which point a 2D panel will slide in over the top of the existing 3D menu system. The animation in the panels,will be powered by the Animate.CSS library, which will slide on the new content. This gives us access to a quick way to create animated elements.
Each panel will be colour-coordinated to match the icon that has been clicked and then the panel can be removed again by clicking a burger menu icon in the top left to take the user back to the experimental menu.
1. Pick up from part one
This tutorial picks up directly where it was left off at the end of part one. First link up the animate.css library, available from daneden.github.io/animate.css, which we’ve already downloaded and put in the CSS folder. This will power the sliding on of popover content later on.
2. Content panels
There are going to be four content panels in the project – these will appear when the user clicks on one of the icons in the menu inside the 3D scene. Add the code as we’ve below to the body of the page just above the script tags. This creates a top bar section and an area for text.
3. Panel details
You can fill the text with your own content or even images. You may notice that there is a strange code in the link tag, this is actually the code to create the three lines of the burger icon for the menu button. This will take the users back to the 3D menu screen.
4. Panel power
The panels are constructed from regular HTML elements and will be hidden from the site using CSS. Then linking up the CSS Animate code when the user selects the appropriate icon the panel will slide in from the left. Clicking the burger icon will make it slide back to the left.
5. Five into four
Each panel will be styled up to match the colour of the icon using CSS code – the colour will be used to reinforce the selection made by the user. There are five icons and but only four panels. One icon is the logo of the website so that will not link anywhere, but it will orientate the user.
6. Responsive srcset behaviour
Save the HTML document for now and open the ‘project.css’ file from the CSS folder. Add on the code in the next few steps to style the content in the panels appropriately. The first content merely creates the generic style for all of the panels that place this above the other content on the page.
7. Hide and seek
When the App starts up the menu should be visible and nothing else. The hidden class is used to hide all the panels when the App first launches and then only as the user taps the device screen should it be visible to the user. The visible class was actually used during testing but is not used in the final site.
8. Break down the parts
After the panel is styled up, each panel will have a head section that has a burger menu button to take users back to the menu and a heading so that they know they are seeing the right content on the screen. This CSS just allows for the head section to have the right height for both of those elements.
9. Position the menu
The link in the head section of the panels is the burger menu icon and here the code is floating that icon to the left of the screen. It’s given a slight padding around the top and left so it isn’t too close to the sides. The text decoration is set to none and ensures that the underline doesn’t appear below this.
10. Lay out the heading
Now, turn your attention to the h2 heading tag, which is made to float to the right of the menu icon. The padding on this reflects the slightly different shape of the text and the icon, with there being less top padding on the text. The text is also aligned to the right so that the menu and heading are on opposite sides of the screen.
11. Paragraph settings
Below the heading there is just a couple of paragraphs, but if this was your own design this could contain a variety of content, from images, video’s or anything else you wish to display on a HTML page. As there is only text in the example there is just a 5 pixel padding for the top and bottom and 10 pixels for left and right.
12. Individual style
Each panel shares the same generic styling that has been applied in the previous six steps. Now you need to concentrate on giving each panel a colour scheme that fits with the initial icon that it represents. Here the panel is given a light green background with dark green text and header.
13. Blue section
As in the previous step, the styling is now looking at the individual panels. The second panel will be styled up with a light blue background, giving a darker blue colour for the text. The header panel of this is the reverse of that styling with a dark blue background and lighter text.
14. Third panel
The third panel takes on purple characteristics for the colour scheme with lighter styling for the background and a darker header section on this panel. The colours help to reinforce to the user the icon that they’ve just clicked on to give them a way to orientate themselves in the mobile web site.
15. Final panel colours
The final panel that is being styled up again reflects the colours of the icon used to access it from the original 3D menu created in part one of this project. This time the colour scheme is given an orange theme with light tints and dark shades used to create the panel. Save the CSS file and close it.
16. Start the JavaScript
All of the requisite elements are now in place for the design and content of the panels. It’s just a case of adding the desired functionality to make these panels work. In the JavaScript code locate the global variables on lines 56 and 57, then add this function below it. This is called into effect when the menu burger icon is pressed on the first panel.
17. Bounce around
The next code is for the second panel and these series of functions take the ID of the relevant info panel then remove the class that has made them bounce onto the screen from the left. Once this is removed the code to make them leave is added and the elements bounce back out to the left.
function fade2(){
var change = document.getElementById( ‘info2’ );
change.classList.remove(‘bounceInLeft’);
change.classList.add(‘bounceOutLeft’);
}
18. Use Animate CSS
The CSS styles that are being added and removed for these sections have not been created here – instead they are from the Animate.CSS library that was hooked up to our page in the first step of this tutorial. You can visit daneden.github.io/animate.css to see more styles.
19. Customise the animation
If you visit Dan Eden’s Animate.CSS site you can try out different animation styles before applying them to your content. Find styles that work together and make sense with your functionality rather than choosing the most attention grabbing animation that you see.
20. Grab the link
Following this you’ll need to scroll down through the code until you find the code that has the click function event listener on the pic variable. Inside this function, add the two lines of code in bold shown below. These lines check that the icon that has been clicked on is not the first icon, and if so it stores the current icon’s ID in the change variable.
21. Finish the code
Now continue with the following code that turns off the hidden property, and if it has been clicked on previously it removes the bounce out CSS. The bounce in animation is added to bring the panel onto the screen. Save this, upload it to a server and connect using your phone’s browser to see it all working.
GET THE LATEST ISSUE OF WEB DESIGNER NOW