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

2023-12-27 22:13:46


前言

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


一、效果图

没添加模糊的效果

在这里插入图片描述

添加模糊后的效果

在这里插入图片描述

二、使用步骤

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写的。

文章来源:https://blog.csdn.net/Min_Fox/article/details/135247227
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。