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

代码语言：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 one morning when she had gone out on to the terrace--Peter Walsh. He would be back from India one of these days, June or July, she forgot which, for his letters were awfully dull; it was his sayings one
        remembered; his eyes, his pocket-knife, his smile, his grumpiness and, when millions of things had utterly vanished--how strange it was!--a few sayings like this about cabbages.</p>

    <p>She stiffened a little on the kerb, waiting for Durtnall's van to pass. A charming woman, Scrope Purvis thought her (knowing her as one does know people who live next door to one in Westminster); a touch of the bird about her, of the jay, blue-green,
        light, vivacious, though she was over fifty, and grown very white since her illness. There she perched, never seeing him, waiting to cross, very upright.</p>

    <p>For having lived in Westminster--how many years now? over twenty,--one feels even in the midst of the traffic, or waking at night, Clarissa was positive, a particular hush, or solemnity; an indescribable pause; a suspense (but that might be her heart,
        affected, they said, by influenza) before Big Ben strikes. There! Out it boomed. First a warning, musical; then the hour, irrevocable. The leaden circles dissolved in the air. Such fools we are, she thought, crossing Victoria Street. For Heaven
        only knows why one loves it so, how one sees it so, making it up, building it round one, tumbling it, creating it every moment afres.........完整代码请登录后点击上方下载按钮下载查看