- Taxonomic name: U-CONTENT-FADE
- Added on: v3.2.0 (16/02/18)
- Updated on: v5.0.0 (05/10/20)
Content fade
Use this utility module and class to reveal content by fading it in as a user scrolls down the page. The content fade-in can be able to be applied to any individual element or section so that it will be equally effective for desktop and mobile devices (and anything in between). This animation is a JavaScript-reliant progressive enhancement; in the event of no JavaScript, it will fall back to standard behaviour, ie. all content will be displayed by default.
Design and usage
- Can be used with any Framework organism or molecule
- Do not apply this class to any items that will be in view in the browser window on page load.
Examples
Interactive example
Code example
<body data-module="u-content-fade" data-module-load="true">
...
<div class="[ Modifier ] u-content-fade">
...
</div>
...
</body>Development and test
Notes for developers
The data-module="u-content-fade" and data-module-load="true" attributes should ideally be placed on the body tag, but if this is not possible, then add them to the highest level wrapper available.
Below that, place the u-content-fade class on each element (organism or molecule) that you wish to fade in as the user scrolls down the page. For an organism such as a call us panel, it may be that you only need to add the class to the organism's main outer div, as you will want the whole thing to fade in as a single unit; with a row of cards, you will want to apply the class to each card individually so that when stacked on a mobile device, each card fades in individually.
Notes for testers
- Ensure that when JavaScript is available, all expected content becomes visible while scrolling down the page. Be aware of elements which may not have the correct class applied, and so do not fade-in in line with the rest of the page content.
- Ensure that when JavaScript is not available, all expected content is visible on page load.
Classes overview
The following table gives you a quick overview of the CSS classes that can be applied.
| Class | Outcome | Required | Applied to | Comments |
|---|---|---|---|---|
.u-content-fade |
Base style for elements on which content fade-in is required | Yes | (any) |
Can be applied to any element |
Component releases
- Added on: v3.2.0 (16/02/18)
- Updated on: v5.0.0 (05/10/20)
Latest update:
- updated: The data attribute
data-module-load="true"must now be included alongsidedata-module="u-content-fade"to ensure the JavaScript is loaded on initial page load.