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-type::after {
        	content: "\0700";
        	display: block;
        	margin-block: 30vh;
        	text-align: center;
        }
    </style>


</head>

<body>
    <h1>Mrs. Dalloway</h1>
    <h2>by Virginia Woolf</h2>

    <h3>An Excerpt from Chapter One</h3>

    <p>Mrs. Dalloway said she would buy the flowers herself.</p>

    <p>For Lucy had her work cut out for her. The doors would be taken off their hinges; Rumpelmayer's men were coming. And then, thought Clarissa Dalloway, what a morning--fresh as if issued to children on a beach.</p>

    <p>What a lark! What a plunge! For so it had always seemed to her, when, with a little squeak of the hinges, which she could hear now, she had burst open the French windows and plunged at Bourton into the open air. How fresh, how calm, stiller than this
        of course, the air was in the early morning; like the flap of a wave; the kiss of a wave; chill and sharp and yet (for a girl of eighteen as she then was) solemn, feeling as she did, standing there at the open window, that something awful was
        about to happen; looking at the flowers, at the trees with the smoke winding off them and the rooks rising, falling; standing and looking until Peter Walsh said, "Musing among the vegetables?"--was that it?--"I prefer men to cauliflowers"--was
        that it? He must have said it at breakfast .........完整代码请登录后点击上方下载按钮下载查看