用简单的屏幕预加载动画效果惊艳你的观众

前端

2023-04-06 17:21:31

屏幕预加载动画：改善用户体验的秘密武器

在瞬息万变的网络世界中，网站加载速度至关重要。当用户访问你的网站时，他们期望页面能迅速载入，而屏幕预加载动画效果能有效缩短他们的等待时间，同时提供出色的视觉体验。

屏幕预加载动画效果的魅力

屏幕预加载动画通常采用动态进度条和背景色切换来实现。加载期间，进度条会随着加载进度增长，背景色也会随之变化。加载完成后，进度条消失，背景色变为最终颜色。

这种简单的动画效果显著提升了用户体验，消除等待过程中的枯燥感。同时，它还能让你的网站显得更加专业精致。

如何创建屏幕预加载动画效果

掌握一些基本的JavaScript知识，即可创建出既简单又优雅的屏幕预加载效果。

1. HTML 代码

首先，在页面中添加一个HTML元素来显示动画，比如一个div元素：

<div id="loading-screen">
  <div id="loading-bar"></div>
</div>

2. CSS 样式

接下来，在CSS中设置该元素的样式：

#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  z-index: 9999;
}

#loading-bar {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: #000000;
}

3. JavaScript

最后，使用JavaScript来设置动态宽度、显示/隐藏以及背景色：

var loadingScreen = document.getElementById("loading-screen");
var loadingBar = document.getElementById("loading-bar");

window.addEventListener("load", function() {
  loadingScreen.style.display = "none";
});

var progress = 0;

var timer = setInterval(function() {
  progress += 1;
  loadingBar.style.width = progress + "%";

  if (progress >= 100) {
    clearInterval(timer);
    loadingScreen.style.backgroundColor = "#00ff00";
  }
}, 10);