gsap+ScrollTrigger实现滚动模糊效果代码-html代码-BFW代码库

gsap+ScrollTrigger实现滚动模糊效果代码

代码语言：html

代码描述：gsap+ScrollTrigger实现滚动模糊效果代码，滚动后文字由底部模糊变清晰显示最后变模糊离开视野。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        @import url("https://fonts.googleapis.com/css2?family=Comforter&family=Modak&display=swap");
        
        body {
        	background: linear-gradient(#eee, #fff 20%, 80%, #eee 100%) fixed;
        	counter-reset: p;
        }
        
        a {
        	color: currentcolor;
        }
        
        h1 {
        	margin: 30vh 0;
        	text-align: center;
        	font-size: 4rem;
        	filter: url(#f) drop-shadow(0 10px 1px #fff) drop-shadow(0 1px 1px #000);
        	font-family: modak, serif;
        }
        
        h2 {
        	font-size: 1rem;
        	text-align: center;
        }
        
        h3 {
        	font-size: 0.8rem;
        	font-family: monospace;
        	color: #aaa;
        	text-align: center;
        }
        
        p {
        	text-align: justify;
        	text-align-last: center;
        	margin: 27vh 20vw; /* breathing=30 scale=0.9 justenough=27 */
        	filter: blur(5px);
        	transform: scale(0.9);
        	transform-origin: top center;
        }
        
        p::before {
        	counter-increment: p;
        	content: counter(p, upper-roman);
        	display: block;
        	text-align: center;
        	margin-block: 5rem;
        	font-family: comforter, cursive;
        }
        
        p:last-of-.........完整代码请登录后点击上方下载按钮下载查看