Use this smart introduction effect to display your website content after loading has completed.
The landing page of any site is what first grabs a user's attention. But an asset-heavy page can take a few seconds to load, and as no one likes to wait, this can have a negative impact on user experience. One option is to add a loading screen – in order to keep up the anticipation you can slowly reveal the content with smart animations. Read on to find out how...
The first step is to initiate the structure of the HTML document. This consists of the document container, which in turn contains the head and body sections. While the head section is used to load the external CSS and JavaScript, the body section is used to store the content created in step 2.
The webpage content is defined as normal – in this case, a h1 title and paragraph has been placed. The loading screen is inserted as the last element to guarantee it has a z-index above all page content. This element has a 'data-loading' attribute, along with a series of inner span elements to be styled for presentation purposes in later steps.
Create a new file called 'code.js'. Having the HTML change to indicate the completion of the page loading is a handy way to trigger CSS presentation changes. JavaScript is used to apply an event listener to the page window for when loading has completed. This listener changes the value of the 'data-loading' container to 'completed' when the page has loaded.
window.addEventListener("load", function(){
var node = document.querySelector("[data-loading]");
node.setAttribute("data-loading","complete");
});
04. Data loading container
Create a new file called 'styles.css'. This first step of the CSS file initiates the 'data-loading' container. Fixed positioning is used to guarantee that the loading screen is always visible. For the same reason, the position and size is set to cover the full screen visibility to hide any page content.
The first level span elements inside the 'data-loading' container are styled to fit the full height and half width of the browser window. Absolute positioning is applied to allow these elements to be placed with pixel co-ordinates. Overflow is set to hidden so that the closing animation hides its inner content.
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
The left and right side of the loading screen require unique positioning for the effect to work. The first child span element inside the 'data-loading' container is set to be positioned to the top-left corner with a black background. The second span element is positioned from the bottom right with a red background.
The second level children of the 'data-loading' container are the span elements inside the span elements. These elements are placed for visual effect – appearing as blocks set as the reverse colours of their parent container. Absolute positioning along with the 'vh' measurement unit allow these elements to be positioned in relation to the size of the browser window.
The JavaScript 'complete' value applied to the 'data-loading' attribute indicates that the page has completed loading. CSS rules are defined to trigger the required animations when this occurs. The main 'open' animation is set to play over a one second duration and uses 'forwards' play to stop on the last animation frame.
[data-loading="complete"]{
animation: close 0s forwards;
animation-delay: 3s;
}
[data-loading="complete"] > *{
animation: open 1s forwards;
animation-delay: 2s;
}
09. Animation definition
The open and close animations are defined using keyframes. The open animation is merely defined as starting from the full window height, then ending at zero height; resulting in elements animating to disappear. The close animation is used to place the 'data-loading' container below the page content – avoiding it becoming an obstruction to user interaction with page content.
When introducing design elements and fancy effects to a page you always need to think of the user experience. And this is what award-winning freelance front-end UI developer Sara Soueidan will be revealing in her 'Using CSS (and SVG) for the Good of UX' talk at Generate London 2018.
In her talk she is going to show a wide range of possibilities that CSS offers to improve the overall user experience of your UI, using CSS (with sprinkles of SVG and JavaScript here and there).
Leon is a freelance web developer and trainer who assists web developers in creating efficient code for projects. He has worked on front-end and server-side web applications, having taught himself to code using an Amstrad computer in the 1990s. Leon has written an extensive selection of tutorials on web design for Web Designer Magazine and .Net, as well as introductions to programming concepts for beginners.
