News

Create a fixed image scroll-over effect

Recreate the fixed image effect found on digital agency Huge home page

huge608

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!

×