Fading in a Page on Load with CSS & JavaScript

 By Impressive Webs - 2020-12-09

Description

An easy to implement technique for fading in a page with CSS & JavaScript, useful for pages that have a slight delay when loading.

Summary

  • When I visit a page, I get annoyed when I try to interact with elements while the website is still loading.
  • This means I have to set the opacity using JavaScript.
  • If I wait for this to happen in my external JavaScript, then it’s not going to happen quickly enough.
  • I’m also running some useless JavaScript (adding a bunch of classes to the HTML) just to pretend something’s happening to give the appearance of a pause before the fade-in happens.

 

Topics

  1. Frontend (0.24)
  2. UX (0.24)
  3. Machine_Learning (0.06)

Similar Articles

A Complete Guide to Flexbox

By CSS-Tricks - 2020-12-03

Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and ...

Creating a Drag and Drop System in React

By Medium - 2020-12-10

Here’s my method for creating a drag and drop system in React. It’s not too complicated and I’m excited to share my process with you in…

Considerations for Making a CSS Framework

By CSS-Tricks - 2020-11-25

Lessons learned from building a framework (Halfmoon) using CSS variables, and the future of customizability and user personalization on the web.

By Responsible Web Applications - 2021-02-16

HTML and CSS Tips and Tricks for creating applications that are both responsive and accessible out of the box

What is a Wireframe? This UX Design Tutorial Will Show You.

By freeCodeCamp.org - 2020-09-04

The first step to designing a website: wireframe it. A good wireframe can give you the vision for the entire layout and functionality of your website. It can also serve as the first stage of a design. ...