Create an animated split screen loading intro

8 min

ThemeForest best selling themes

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…Get the project files to help follow this tutorial.
01. Initiate HTML structure
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.
02. Add HTML content
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.
03. JavaScript confirmation
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.
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. 
05. First level elements
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.
06. Unique positioning
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.
07. Second level children
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.
08. Loading complete
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.
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.
This article originally appeared in Web Designer magazine. Subscribe here.
Remember – always think of the user
Generate London 2018 – The conference for web designers
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).Make sure you don't miss out. Get your ticket now.Related articles:
Understanding the CSS display property5 tips for super-fast CSS10 great CSS animation resources

Source link

Like it? Share with your friends!


Your email address will not be published. Required fields are marked *

What's Your Reaction?

Naughty Naughty
Cry Cry
Cute Cute
Love Love
Wow Wow
Angry Angry
Damn Damn
Dislike Dislike
Like Like
Huh Huh
Choose A Format
Formatted Text with Embeds and Visuals
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Voting to make decisions or determine opinions
Ranked List
Upvote or downvote to decide the best list item
Youtube, Vimeo or Vine Embeds