【js控制页面的模糊程度】【lenis禁止页面滚动】

---

前言

在项目中，我们经常会遇到弹窗功能，当弹框弹出时，背后的页面禁止滚动，且模糊处理。

---

一、效果图

没添加模糊的效果

添加模糊后的效果

二、使用步骤

1.下载@studio-freight/lenis

下载控制页面滚动的插件@studio-freight/lenis，可以使用插件的start()方法控制页面开始滚动，stop()方法控制页面禁止滚动。

npm i @studio-freight/lenis@^1.0.27

2.使用@studio-freight/lenis

首先，初始化lenis

在main.js中

// 引入插件lenis
import Lenis from '@studio-freight/lenis'

// 初始化lenis
 const lenis = new Lenis()
 function raf(time) {
   lenis.raf(time)
   requestAnimationFrame(raf)
 }
 requestAnimationFrame(raf)
 Vue.prototype.$lenis = lenis;

在需要使用的组件中调用

// 禁止页面滚动
this.$lenis.stop();

// 允许页面滚动
this.$lenis.start();

三、下载 gsap在编写页面动画

1. 下载gsap

npm i gsap

2.引入gsap

在需要使用的组件中引入

import gsap from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);

export default {
	data() {
		return {
			appTl: gsap.timeline({
		        reversed: true, 
		        paused: true, 
		    }),
		}
	},
	methods: {
		// 定义页面模糊的方法
		initAppFilterTl() {
		  // #app为id="app"的元素，在vue中就是整个项目了，一般默认情况下，app.vue的的最外层div的id为app。
		  // filter:css属性，用来给页面增加模糊效果，blur(0)中的值越大，模糊效果越明显
		  // duration: 做动画所需要的时间
	      this.appTl.fromTo("#app", {filter: "blur(0)"}, {filter: "blur(5px)", duration: .1});
	    },
	}
}

3.调用gsap的方法，让页面模糊

调用gsap的play()方法是页面模糊，reverse()是页面还原清晰度。

// 页面模糊
this.appTl.play();
// 页面清晰度还原
this.appTl.reverse();

---

总结

这里总结了当弹框弹出时，给弹框的背景模糊处理，禁止滚动的方法，使用插件来实现，不是用纯js写的。