PARALLAX SCROLLING GUTTERS (BETA)

This is a Digital Innovation execution.

Key specifications

DimensionsOverall dimensions: 1800¹ x 100% of page length (end frame of animation triggers at 60% of page length)File size400 KB + 800 KB on-demand²File TypesHTML, CSS, JS³, web-standard image formats (JPG, PNG, GIF)TrackingReporting levels vary, depending on Fairfax internal builds and external builds. Fairfax buillt creative will be served from the Fairfax adserving system. Externally built creative must also be hosted in an approved third party adserver.

• Fairfax build:
  • Impression tracking: overall impressions (adserver response)
  • Keyframe enterviewport event (max number of keyframes: 5)
  • Click tracking
  • HTML files are not accepted
  • Javascript to inject html elements, external assets such as css stylesheets, javascript libraries, images, fonts etc into the site body (window.parent.document.body). The javascript can be supplied in the form of a block of javascript code or in an external javascript file (hosted in 3rd party server)
• External build:
  • Impression tracking: check with your preferred and Fairfax approved third party ad serving vendor
  • Click tracking: check with your preferred and Fairfax approved third party ad serving vendor
  • All Assets, inc js/css files, to be hosted externally by 3rd party
  • Fairfax will provide guidance (e.g. anchorage / attachment points on the targeted page, etc) you need to be aware of to ensure trouble-free implementation
  • HTML files are not accepted
  • Javascript to inject html elements, external assets such as css stylesheets, javascript libraries, images, fonts etc into the site body (window.parent.document.body). The javascript can be supplied in the form of a block of javascript code or in an external javascript file (hosted in 3rd party server)

Notes:
1 gradient fade on edges & key branding should be within 120px edges of the 1240px standard gutter layout
2 further 800 KB may be downloaded politely past 50% page scroll
3 jQuery – must use existing instance. To check installed version, call $().jquery or jQuery.fn.jquery
4 creative cannot cover the top masthead area, this band is reserved to full browser width

Guidelines & Resources

Parallax scrolling gutters are – by nature – highly customised executions and most aspects of the creative will be determined on an ad-hoc basis.

Every instance of the parallax gutter execution requires approval by the Digital Innovation Services (DIS) team prior to an Insertion Order (IO) being signed. DIS will advise of asset delivery lead times on a case by case basis.

Our creative team found the following resources highly valuable for building parallax gutter executions.

• Use CSS transitions to smooth animated sequences. Use vendor prefixes if needed and adjust transition time (.5s) as appropriate.

#left-gutter-wrapper div, #right-gutter-wrapper div {

    transition: all .5s ease;

    -webkit-transition: all .5s ease; /* Safari */

}

• Use 3D transforms where applicable and available.
• Increase executional performance by employing hardware accelerated CSS
• Use requestAnimationFrame to smooth animation and keep things in sync. You might find the following vendor specific resources particularly useful:
  • requestAnimationFrame on developer.mozilla.org
  • requestAnimationFrame implementation on dev.chromium.org
  • requestAnimationFrame API implementation on msdn.microsoft.com and a demo on ie.microsoft.com
  • Further reading on this topic, which we’ve found useful: requestAnimationFrame for Smart Animating as well as this browser compatibility chart on caniuse.com

Demo

See the demo here.

Where can this run?

View the “Fairfax Ad Product Site Matrix” to see what sites this product can run.