【GitHub前端练手项目50天50个项目】--day06--图片模糊加载效果

秋天code

已于 2022-10-16 12:24:09 修改

阅读量490

点赞数

分类专栏： GitHub50天50项目文章标签：前端 css javascript

于 2022-10-16 10:23:15 首次发布

本文链接：https://blog.csdn.net/weixin_55697693/article/details/127344529

版权

GitHub50天50项目专栏收录该内容

8 篇文章 3 订阅

订阅专栏

GitHub热门前端练手项目，纯HTML、CSS、JS实现，50天50个项目，每日一个项目，打卡活动，解读项目中的知识点
GitHub项目官网连接
50Projects in 50 Days

项目展示

实现一个模糊加载的效果，当加载到100%时，图片清晰度正常

Blurry

源码

HTML

<!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

@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;
}

JS

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部分

CSS滤镜

CSS 中实现滤镜效果需要通过 filter 属性并配合一些函数来实现

https://www.runoob.com/cssref/css3-pr-filter.html

filter属性可以为元素添加滤镜效果，例如图像、文字等

<img src="../background-slider/IMG_20210603_191954.jpg" alt="">
<style>
        img {
            width: 50%;
            height: 50%;
            filter: blur(10px);
        }
</style>

函数还有：

blur(px)设置高斯模糊，数值越大越模糊
brightness(%)调整图片亮度，0%，图像全黑，100%图像无变化，超过100%会更亮
contrast(%)，调整图像的对比度，值是0%，图像全灰，100%图像不变，超过100%，对比度更高
saturate(%)，转换图像饱和度，0%完全不饱和，100%图像无变化，超过100%饱和度增大
grayscale(%)，转换为灰度图像，0%图像无变化，100%图像完全灰色
drop-shadow(x,y,blur,color)，给图像设置一个阴影效果，阴影是合成在图像下面，指定阴影的位置(x,y)，阴影的模糊程度blur()，阴影的扩展范围spread，阴影的颜色color
```
filter: drop-shadow(30px 10px 4px #4444dd);
```

滤镜是支持叠加的，使用多个滤镜，给图像带来不一样的效果

filter: drop-shadow(20px 10px 5px rgb(53, 153, 56)) contrast(150%) blur(10px)

补充：如果body设置了背景图片，那么对于body的filter就不会生效

秋天code

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【GitHub前端练手项目50天50个项目】--day06--图片模糊加载效果

【GitHub前端练手项目50天50个项目】，每日打卡，知识点总结，图片模糊加载效果
复制链接

扫一扫

专栏目录