By
inspiration www.hugeinc.com
Simplicity is a goal many designers seek but with its ‘less, but better’ philosophy, Huge seems to achieve so much more than the rest. When redesigning its own website, Huge continued to realise opportunities to evolve, and has masterfully engineered an online experience that powerfully communicates its brand.
Positioning their emblematic ‘H’ front and centre provides a perfect vehicle for telling the story of the brand and how it works with clients. On arriving at the site, three full-page slides demonstrate the agency’s approach and values, and when that message has been delivered, the site flows into a magazine-style presentation of what it means to be Huge. Less, but better it certainly is.
Scroll-over effect using fullPage.js
HTML head
This technique uses the jQuery library and jQuery-UI if you want easing effects. The fullPage.js plug-in is well documented in the ‘README.md’ file. There are more than twenty configurable options and advanced settings. For this workshop the verticalCentered option has been set to false so that the titles can appear at top of the page rather than over the main graphic. The continuous scrolling and page navigation feature have been set to true.
HTML body
To simulate the effect used on the Huge site, the layout and functionality has been kept nice and simple. However, you can obviously populate each <div> with whatever content you like and also make use of the many additional options offered by the fullPage.js plug-in, including the addition of a landscape slider just by adding in some nested <div>s. There are ten examples within the plug-in package.
Style the content
This example uses only a fullscreen background for each section and a single heading. You just need to create a new class for each background you want to display and then apply the class to the relevant section. If you just want to change the background colour of each section you can do this using one of the plug-in configuration options, slidesColor.
001 @import url(http://fonts.googleapis.com/css?family=Righteous);
002 h1{
003 font-size: 70px;
004 line-height: 75px;
005 padding-top: 40px;
006 font-family: Righteous,arial,helvetica;
007 color: #eee;
008 text-shadow: 3px 3px #000;
009 }
010 .section{ text-align:center; }
011 .w1 {
012 background: url(imgs/w1.jpg)
no-repeat center center fixed;
013 background-size: cover;
014 }
Space out the pips
The jquery.fullPage.css file gives you access to the styling applied by the plug-in. In the tutorial, the navigation ‘pips’ on the right-hand side have been made much bigger and lighter and these changes were made in the .fullPage-slidesNav li and span. Increasing the height enables the ‘pips’ to be spaced out.
001 .fullPage-slidesNav li {
002 display: block;
003 width: 14px;
004 height: 40px;
005 margin: 7px;
006 position:relative;
007 }
Grow and colour the pips
The pip heights and widths have been increased to 30px each. As the border-radius was set to 50 per cent, there was no need to change that value to have it render the square as a circle. RGBa colours with 80 per cent and 30 per cent opacity were used to enable the background to show through the new white controls. There you have it, your scroll-over effect is ready to go!
