50个前端实战项目之05：模糊加载效果。

前端开发博客

于 2024-05-04 13:32:23 发布

阅读量1k

点赞数 12

文章标签：前端

本文链接：https://blog.csdn.net/lgno2/article/details/138478372

版权

大家好，我是宝哥。

今天讲50个前端实战项目之05：模糊加载效果。

源码下载地址

https://github.com/bradtraversy/50projects50days/tree/master/blurry-loading

前端实战项目系列正在更新：05/50

项目介绍

本项目模拟了网页加载过程中的模糊加载效果。页面一开始会呈现一张模糊的背景图片，然后逐渐清晰，同时加载进度文本也会随之变化。

效果预览

在线预览(文末点击原文链接可直达）：

https://qdkfweb.cn/50projects50days/blurry-loading/

核心代码

HTML结构

<section class="bg"></section>: 用于模糊加载的背景图片。
<div class="loading-text"></div>: 用于显示加载进度的文本。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Blurry Loading</title>
  </head>
  <body>
    <section class="bg"></section>
    <div class="loading-text">0%</div>

    <script src="script.js"></script>
  </body>
</html>

CSS代码

.bg 的 filter: blur(0px): 定义初始的模糊效果。
.loading-text.style.opacity: 控制加载进度文本的透明度。

@import url('https://fonts.googleapis.com/css?family=Ubuntu');

* {
  box-sizing: border-box;
}

body {
  font-family: 'Ubuntu', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

.bg {
  background: url('https://images.unsplash.com/photo-1576161787924-01bb08dad4a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2104&q=80')
    no-repeat center center/cover;
  position: absolute;
  top: -30px;
  left: -30px;
  width: calc(100vw + 60px);
  height: calc(100vh + 60px);
  z-index: -1;
  filter: blur(0px);
}

.loading-text {
  font-size: 50px;
  color: #fff;
}

JavaScript代码

获取加载进度文本和背景元素的 DOM 节点引用。
定义一个变量 load 记录加载进度。
使用 setInterval 函数设置一个定时器，每隔 30 毫秒调用 blurring 函数模拟加载过程。
blurring 函数:
- 增加 load 的值，模拟加载进度。
- 判断是否加载完成，并清除定时器。
- 更新加载进度文本的内容。
- 利用 scale 函数将加载进度值转换成模糊滤镜的强度值，并更新背景的模糊效果。
- 利用 scale 函数将加载进度值转换成文本的透明度值，并更新加载进度文本的透明度 (数值越接近 100，透明度越低)。

const loadText = document.querySelector('.loading-text')
const bg = document.querySelector('.bg')

let load = 0

let int = setInterval(blurring, 30)

function blurring() {
  load++

  if (load > 99) {
    clearInterval(int)
  }

  loadText.innerText = `${load}%`
  loadText.style.opacity = scale(load, 0, 100, 1, 0)
  bg.style.filter = `blur(${scale(load, 0, 100, 30, 0)}px)`
}

// https://stackoverflow.com/questions/10756313/javascript-jquery-map-a-range-of-numbers-to-another-range-of-numbers
const scale = (num, in_min, in_max, out_min, out_max) => {
  return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min
}

总结

该项目利用 CSS 的 filter: blur(px) 属性实现模糊效果，并结合 JavaScript 定时器 (setInterval) 模拟加载过程。随着加载进度的增加，模糊滤镜的值逐渐减小，背景图片变得清晰。同时，JavaScript 代码也会更新加载进度文本的数值和透明度。

动图全过程展示：

在线预览（点底部原文链接可直达）：https://qdkfweb.cn/50projects50days/blurry-loading/

最后

如果你觉得宝哥今天的尝试对你有帮助，就给我点个赞，关注一波。分享出去，也许你的转发能给别人带来一点启发。

以后我也会多尝试共读其它项目，如果看到喜欢的项目也可以留言告诉我，今天的教程你学会了吗？学会了，就在评论区刷一个，学会了。

欢迎长按图片加好友，宝哥会第一时间和你分享前端行业趋势，面试资源，学习途径等等。

添加好友备注【加群】拉你进技术交流群

公众号：前端开发博客 专注 前端开发技术，分享 前端开发资源和 WEB前沿资讯，如果喜欢我的分享，给宝哥点一个 赞 或者 分享 都是对我的支持

关注公众号后，在首页：

回复「小抄」，领取Vue、JavaScript 和 WebComponent 小抄 PDF
回复「Vue脑图」获取 Vue 相关脑图
回复「思维图」获取 JavaScript 相关思维图
回复「简历」获取简历制作建议
回复「简历模板」获取精选的简历模板
回复「电子书」下载我整理的大量前端资源，含面试、Vue实战项目、CSS和JavaScript电子书等。
回复「知识点」下载高清JavaScript知识点图谱
回复「读书」下载成长的相关电子书

前端开发博客

关注

12
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
50个前端实战项目之05：模糊加载效果。

大家好，我是宝哥。今天讲50个前端实战项目之05：模糊加载效果。源码下载地址https://github.com/bradtraversy/50projects50days/tree/master/blurry-loading前端实战项目系列正在更新：05/5001：可展开卡片02：进度条03：旋转导航动画04：隐藏的搜索小组件05：模糊加载效果项目介绍本项目模拟了网页加载过程中的模糊加载效果。页...
复制链接

扫一扫