冬天到了,给你的网站下个雪吧

简介: 冬天到了,给你的网站下个雪吧

前言


女朋友常逛的设计网站这两天页面上多了下雪的效果,于是问我我的网站能下雪吗,作为一个程序员我一般会说实现不了,但是作为男朋友,不能说不行。



雪我们可以使用span标签和css的径向渐变简单意思一下:


.snow {
  display: block;
  width: 100px;
  height: 100px;
  background-image: radial-gradient(#fff 0%, rgba(255, 255, 255, 0) 60%);
  border-radius: 50%;
}


效果如下:


image.png


很多雪


一片雪是不够的,成千上万才浪漫,世界上没有两片相同的雪花,所以每片雪都有自己的大小位置速度等属性,为此先创建一个雪花类:


class Snow {
  constructor (opt = {}) {
    // 元素
    this.el = null
    // 直径
    this.width = 0
    // 最大直径
    this.maxWidth = opt.maxWidth || 80
    // 最小直径
    this.minWidth = opt.minWidth || 2
    // 透明度
    this.opacity = 0
    // 水平位置
    this.x = 0
    // 重置位置
    this.y = 0
    // 速度
    this.speed = 0
    // 最大速度
    this.maxSpeed = opt.maxSpeed || 4
    // 最小速度
    this.minSpeed = opt.minSpeed || 1
    // 浏览器窗口尺寸
    this.windowWidth = window.innerWidth
    this.windowHeight = window.innerHeight
    this.init()
  }
  // 初始化各种属性
  init () {
    this.width = Math.floor(Math.random() * this.maxWidth + this.minWidth)
    this.opacity = Math.random()
    this.x = Math.floor(Math.random() * (this.windowWidth - this.width))
    this.y = Math.floor(Math.random() * (this.windowHeight - this.width))
    this.speed = Math.random() * this.maxSpeed + this.minSpeed
  }
  // 设置样式
  setStyle () {
    this.el.style.cssText = `
      position: fixed;
      left: 0;
      top: 0;
      display: block;
      width: ${this.width}px;
      height: ${this.width}px;
      opacity: ${this.opacity};
      background-image: radial-gradient(#fff 0%, rgba(255, 255, 255, 0) 60%);
      border-radius: 50%;
      z-index: 9999999999999;
      pointer-events: none;
      transform: translate(${this.x}px, ${this.y}px);
    `
  }
  // 渲染
  render () {
    this.el = document.createElement('div')
    this.setStyle()
    document.body.appendChild(this.el)
  }
}


init方法用来生成随机的初始大小、位置、速度等属性,在浏览器窗口内new100片试试:


let snowList = []
for (let i = 0; i < 100; i++) {
    let snow = new Snow()
    snow.render()
    snowList.push(snow)
}


效果如下:


image.png


动起来


雪动起来才能叫下雪,动起来很简单,不断改变xy坐标就可以了,给snow类加个运动的方法:


class snow {
    move () {
        this.x += this.speed
        this.y += this.speed
        this.el.style.left = this.x + 'px'
        this.el.style.top = this.y + 'px'
    }
}


接下来使用requestAnimationFrame不断刷新:


moveSnow () {
    window.requestAnimationFrame(() => {
        snowList.forEach((item) => {
            item.move()
        })
        moveSnow()
    })
}


效果如下,因为速度是正数,所以整体是往右斜的:


image.png


可以看到动起来了,但是出屏幕就不见了,所以雪是会消失的对吗?要让雪不停很简单,检测雪的位置,如果超出屏幕了就让它回到顶部,修改一下move方法:


move () {
    this.x += this.speed
    this.y += this.speed
    // 完全离开窗口就调一下初始化方法,另外还需要修改一下init方法,因为重新出现我们是希望它的y坐标为0或者小于0,这样就不会又凭空出现的感觉,而是从天上下来的
    if (this.x < -this.width || this.x > this.windowWidth || this.y > this.windowHeight) {
      this.init(true)
      this.setStyle()
    }
    this.el.style.left = this.x + 'px'
    this.el.style.top = this.y + 'px'
  }


init (reset) {
    // ...
    this.width = Math.floor(Math.random() * this.maxWidth + this.minWidth)
    this.y = reset ? -this.width : Math.floor(Math.random() * this.windowHeight)
    // ...
  }


这样就能源源不断的下雪了:


image.png


优化


1.水平速度


水平和垂直方向的速度是一样的,但是看起来有点太斜了,所以调整一下,把水平速度和垂直速度区分开来:


class Snow {
  constructor (opt = {}) {
    // ...
    // 水平速度
    this.sx = 0
    // 垂直速度
    this.sy = 0
    // ...
  }
  init (reset) {
    // ...
    this.sy = Math.random() * this.maxSpeed + this.minSpeed
    this.sx = this.sy * Math.random()
  }
  move () {
    this.x += this.sx
    this.y += this.sy
    // ...
  }
}


image.png


2.左下角没有雪


因为整体向右倾斜,所以左下角大概率没有雪,这可以通过让雪随机出现在左侧来解决:


init (reset) {
  // ...
  this.x = Math.floor(Math.random() * (this.windowWidth - this.width))
  this.y = Math.floor(Math.random() * (this.windowHeight - this.width))
  if (reset && Math.random() > 0.8) {// 让一小部分的雪初始化在左侧
    this.x = -this.width
  } else if (reset) {
    this.y = -this.width
  }
  // ...
}


3.眼前的雪


随机性的选择一点雪给它较大的体积、透明度和速度,然后再使用css33D透视效果,把它的z轴数值调大一点,这样的感觉就好像是在眼前划过的一样:


<body style="perspective: 500;-webkit-perspective: 500"></body>


class Snow {
  constructor (opt = {}) {
    // ...
    // z轴数值
    this.z = 0
    // 快速划过的最大速度
    this.quickMaxSpeed = opt.quickMaxSpeed || 10
    // 快速划过的最小速度
    this.quickMinSpeed = opt.quickMinSpeed || 8
    // 快速划过的宽度
    this.quickWidth = opt.quickWidth || 80
    // 快速划过的透明度
    this.quickOpacity = opt.quickOpacity || 0.2
    // ...
  }
  init (reset) {
    let isQuick = Math.random() > 0.8
    this.width = isQuick ? this.quickWidth : Math.floor(Math.random() * this.maxWidth + this.minWidth)
    this.z = isQuick ? Math.random() * 300 + 200 : 0
    this.opacity = isQuick ? this.quickOpacity : Math.random()
    // ...
    this.sy = isQuick ? Math.random() * this.quickMaxSpeed + this.quickMinSpeed : Math.random() * this.maxSpeed + this.minSpeed
    // ...
  }
  move () {
    // ...
    this.el.style.transform = `translate3d(${this.x}px, ${this.y}px, ${this.z}px)`
  }
}


image.png


4.鹅毛大雪


雪花嘛,轻如鹅毛,鹅毛是怎么飘的?是不是左右摆动的飘?那我们也可以选择一部分的雪花让它跟鹅毛一样飘,左右摇摆很简单,速度一会加一会减就可以了:


class Snow {
  constructor (opt = {}) {
    // ...
    // 是否左右摇摆
    this.isSwing = false
    // 左右摇摆的步长
    this.stepSx = 0.03
    // ...
  }
  // 随机初始化属性
  init (reset) {
    // ...
    this.isSwing = Math.random() > 0.8
    // ...
  }
  move () {
    if (this.isSwing) {
      if (this.sx >= 1 || this.sx <= -1) {
        this.stepSx = -this.stepSx
      }
      this.sx += this.stepSx
    }
    // ...
  }
}


image.png


除了上述这种方法,左右摇摆还有一种方式,就是使用正弦或余弦函数,因为它们的曲线翻转90度就是左右摇摆:


image.png


我们使用正弦函数,公式为:y=sin(x)x的值是弧度表示,只要一直增加就可以了,y的值用来修改雪花的水平方向的速度变化步长:


class Snow {
  constructor (opt = {}) {
    // ...
    // 是否左右摇摆
    this.isSwing = false
    // 左右摇摆的正弦函数x变量
    this.swingRadian = 0
    // 左右摇摆的正弦x步长
    this.swingStep = 0.01
    // ...
  }
  init (reset) {
    // ...
    this.swingStep = 0.01 * Math.random()
  }
  move () {
    if (this.isSwing) {
      this.swingRadian += this.swingStep
      this.x += this.sx * Math.sin(this.swingRadian * Math.PI) * 0.2
    } else {
      this.x += this.sx
    }
    // ...
  }
}


因为正弦函数y的值是从1变化到-1,摆动幅度太了,所以乘了个小数0.2缩小一点,想要幅度小一点,还有一个方法是不要使用整个正弦曲线,可以从中截取一个适合的区间大小,比如就让x的值在0.9π1.1π之前变化:


class Snow {
  constructor (opt = {}) {
    // ...
    // 是否左右摇摆
    this.isSwing = false
    // 左右摇摆的正弦函数x变量
    this.swingRadian = 1// 需要改成一个中间值
    // 左右摇摆的正弦x步长
    this.swingStep = 0.01
    // ...
  }
  init (reset) {
    // ...
    this.swingStep = 0.01 * Math.random()
    this.swingRadian = Math.random() * (1.1 - 0.9) + 0.9// 也让它随机一下
  }
  move () {
    if (this.isSwing) {
      if (this.swingRadian > 1.1 || this.swingRadian < 0.9) {
        this.swingStep = -this.swingStep
      }
      this.swingRadian += this.swingStep
      this.x += this.sx * Math.sin(this.swingRadian * Math.PI)
    } else {
      this.x += this.sx
    }
    // ...
  }
}


5.下的慢一点


既然给水平加了曲线,垂直方向上是不是也可以改成非匀速呢?当然可以,区别是速度得一直是正的,不然就要出现反自然现象了,改变速度曲线同样可以使用正余弦,上面我们使用了0.9π1.1π之间的正弦曲线,根据上图可以发现对应的余弦曲线都是负的,趋势是先慢后快,所以可以利用这一段来改变垂直方向的速度:


image.png


move () {
  if (this.isSwing) {
    if (this.swingRadian > 1.1 || this.swingRadian < 0.9) {
      this.swingStep = -this.swingStep
    }
    this.swingRadian += this.swingStep
    this.x += this.sx * Math.sin(this.swingRadian * Math.PI)
    this.y -= this.sy * Math.cos(this.swingRadian * Math.PI)// 因为速度都是负的,所以改成-
  } else {
    this.x += this.sx
    this.y += this.sy
  }
  // ...
}


6.在最上面


为了防止为页面上原本层级更高的元素遮挡,给雪花的样式加一个很大的层级:


render () {
    this.el = document.createElement('div')
    this.el.style.cssText = `
        // ...
        z-index: 9999999999999;
    `
    document.body.appendChild(this.el)
}


7.看不见我


修改了层级,所以雪花会在页面的最上层,那么可能会挡住其他元素的鼠标事件,需要禁止它响应鼠标事件:


render () {
    this.el = document.createElement('div')
    this.el.style.cssText = `
      // ...
      pointer-events: none;
    `
    document.body.appendChild(this.el)
  }


8.更好一点


使用性能更好的transform属性来做动画:


render () {
    this.el = document.createElement('div')
    this.el.style.cssText = `
        left: 0;
        top: 0;
        transform: translate(${this.x}px, ${this.y}px);
    `
    document.body.appendChild(this.el)
}


move () {
    // ...
    // this.el.style.left = this.x + 'px'
    // this.el.style.top = this.y + 'px'
    this.el.style.transform = `translate(${this.x}px, ${this.y}px)`
}


当然,最好的方式是用canvas来画。


最终效果:


image.png


下雨&雨夹雪


下完雪,接下来顺便下个雨,雨和雪差不多,都是从天上掉下来,但是雨的速度更快,通常也不会左右摇摆什么的,方向也基本是一致的,先来修改一下样式:


setStyle () {
  this.el.style.cssText = `
    // ...
    width: 1px;
    // ...
  `
}


很简单,只要把宽度写死为1就行了:


image.png


接下来把摇摆去掉:


move () {
  this.x += this.sx
  this.y += this.sy
  // ...
}


效果如下:


image.png


可以发现雨是竖着在水平移动,显然是不行的,需要让它倾斜一定的角度,和运动方向保持一致,这个也很简单,算一下斜率,水平速度除以垂直速度:


move () {
  // ...
  this.el.style.transform = `translate(${this.x}px, ${this.y}px) ${this.getRotate(this.sy, this.sx)}`
}
getRotate(sy, sx) {
  return `rotate(${sx === 0 ? 0 : (90 + Math.atan(sy / sx) * (180 / Math.PI))}deg)`
}


因为tan(θ)=sy/sxθ=Math.atan(sy / sx),因为雨的线段默认是从上到下垂直的,θ是代表和水平方向上的夹角,所以需要先旋转90度,再旋转夹角的度数,最后弧度转角度的公式为:角度=弧度*(180/π)。


image.png


雨和雪都实现了,让它们一起出来,就是雨夹雪了:


image.png


根据天气下雪


把上面的代码放到网站上就有下雪的效果了,另外也可以使用天气厂商的api,根据实时天气来下雪或者下雨,再实现一下太阳、乌云等效果,一个沉浸式天气就完成了,有兴趣的可自行实践。


完整代码在github.com/wanglin2/sn…。



相关文章
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
424 0
|
4月前
|
搜索推荐 定位技术 API
校园导航系统解决方案:智慧校园精准指引,提升校园服务质量
本文面向学校、相关技术人员以及对校园导航系统感兴趣的读者,提供校园导航系统的核心技术与功能的解析,包括高精度定位、三维地图构建及 AR/VR 集成等,推动智慧校园建设。如需校园导航系统解决方案欢迎私信获取,如有项目合作及技术交流欢迎私信作者哦~
219 2
校园导航系统解决方案:智慧校园精准指引,提升校园服务质量
|
5月前
|
缓存 编解码 数据安全/隐私保护
Harmony OS Next《ArkUI全组件终极指南 | 从布局到交互一站式精通》
本文全面解析HarmonyOS的ArkUI五大核心组件(布局容器、图片处理、文本、输入交互和按钮),通过零基础友好的分步讲解与实战场景覆盖,助你轻松打造美观且功能强大的应用。涵盖样式定制、性能优化及常见问题解决,适合教育科普行业学习参考。无论是初学者还是进阶开发者,都能从中掌握高效开发技巧,提升应用设计水平。
369 11
|
6月前
|
编解码 边缘计算 文字识别
SmolVLM:资源受限环境下的高效多模态模型研究
SmolVLM是一系列专为资源受限设备多模态模型,通过优化架构与训练策略,在图像和视频处理任务中表现出接近大型模型的性能。该系列包含三种变体:SmolVLM-256M、500M和2.2B,分别适用于极端边缘计算、中等资源设备及高端边缘系统。研究探索了视觉与语言组件间的参数分配、高效视觉信息传递机制、视频编码策略等关键技术,并在多个基准测试中展现出卓越性能。SmolVLM不仅在计算效率和内存占用上具有显著优势,还在设备端部署中表现出高吞吐量和广泛适用性,适用于智能手机、笔记本电脑以及专业领域如文档理解与生物医学视觉问答等场景。论文由Ritvik Rastogi发布,详细探讨了模型设计与实验结果。
255 3
SmolVLM:资源受限环境下的高效多模态模型研究
|
10月前
|
数据处理 项目管理
进度一目了然,Excel和看板的神仙联动
在项目管理中,Excel擅长结构化信息记录,但直观展示项目进度稍显不足。结合板.栗.看.板.工具,可将Excel数据同步为任务卡片,清晰显示任务状态、完成时间、负责人和优先级,实现数据与看板的双向联动,提升团队协作效率。
进度一目了然,Excel和看板的神仙联动
|
10月前
|
存储 NoSQL MongoDB
Redis在中国火爆,为何MongoDB更受欢迎国外?
本文介绍了Redis和MongoDB的基本概念及其在GitHub Star、DB-Engines Ranking和Google Trends中的数据对比。Redis是一个基于内存的键值对存储数据库,适合快速读写场景;MongoDB则是面向文档的数据库,支持大规模数据存储和复杂查询。全球范围内,MongoDB的搜索热度高于Redis,但在中国市场,Redis更受欢迎,因其高性能和低延迟特性满足了中国互联网公司对高并发的需求。总结部分分析了两者的特点及适用场景,并结合中美两国的行业背景解释了其受欢迎程度的不同原因。
298 1
|
消息中间件 Java 关系型数据库
JAVA云HIS医院管理系统源码、基于Angular+Nginx+ Java+Spring,SpringBoot+ MySQL + MyCat
JAVA云HIS医院管理系统 常规模版包括门诊管理、住院管理、药房管理、药库管理、院长查询、电子处方、物资管理、媒体管理等,为医院管理提供更有力的保障。 HIS系统以财务信息、病人信息和物资信息为主线,通过对信息的收集、存储、传递、统计、分析、综合查询、报表输出和信息共享,及时为医院领导及各部门管理人员提供全面、准确的各种数据。
290 1
|
机器学习/深度学习 人工智能 算法
黑科技上线!AI帮你一眼看穿真实面貌
本文介绍了一种利用多模态文件信息抽取技术识别图片中物品材质的方法。通过深度学习算法和大量训练数据,该技术能精确区分不同材料的纹理、颜色等特征,广泛应用于电商、设计等领域。教程详细讲解了如何使用百炼模型服务、对象存储OSS及函数计算部署应用,帮助用户轻松提取图片中的材质信息。跟随步骤实践,人人都能成为鉴宝大师。点击阅读原文,体验图片视觉理解与属性信息提取的强大功能。