gsap+ScrollTrigger+MotionPathPlugin实现页面滚动插画跟随动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:gsap+ScrollTrigger+MotionPathPlugin实现页面滚动插画跟随动画效果代码
代码标签: gsap ScrollTrigger MotionPathPlugin 页面 滚动 插画 跟随 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> @import url('https://fonts.googleapis.com/css2?family=Abhaya+Libre:wght@400;500;600;700;800&display=swap'); html, body { margin:0; padding:0; width:100%; height:100%; font-family: "Abhaya Libre", serif; font-weight: 600; font-style: normal; } main { display:flex; justify-content:center; flex-direction:column; } section { display:flex; align-items:center; justify-content:center; width:100%; min-height:100vh; } #s2 { background:#1d0042; } svg { position:relative; margin-top:-9vw; } h1 { font-size:clamp(3vw, 8.5vw, 99px); text-align:center; } #s1 h1 { font-weight:800; } .pink { color:rgb(239, 208, 255); display:block; } .radial { -webkit-text-fill-color: transparent; background-image: radial-gradient(circle at -20% 0, #2b0aff, #e93abf 31%, #f658a8 48%, #febf72); -webkit-background-clip: text; background-clip: text; display: block; } .smaller { font-size:0.35em; font-weight:500; } </style> </head> <body translate="no"> <main> <section id="s1"> <h1> <span class="radial">A new medium for</span> <span class="radial">presenting ideas.</span> <span class="smaller">(scroll further)</span> </h1> </section> <svg xmlns="http://www.w3.org/2000/svg" fill="#1d0042" stroke="#1d0042" stroke-width="1.8" viewBox="10 0 970 200"> <g class="ring3"> <path d="M543.5 60.6C269.8 27.7 1 26.8 1 64.2v386h998v-278c0-27.4-181.8-78.7-455.5-111.6z"/> <image mask="url(#m1)" y="35" width="999" height="170" preserveAspectRatio="none" href="data:image/jpg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wCEAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDIBERISGBUYLxoaL2NCOEJjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY//CABEIAEUBTQMBIgACEQEDEQH/xAAaAAEBAQADAQAAAAAAAAAAAAAAAgEDBQcG/9oACAEBAAAAAOzzQAAAAACus2qva3d1oAAAAX8dV3dXd1dXVVtbu60AAF+Z7V1V3dXd3d1d1dXVVVbu7rQL8jbu1tVW3VXV1d3dXd3V1dXVVVVu8vj2a1ut3d3a2q2ququrq7uru6u6vm8xwA01rdbu7tbW1VVdVdXV8/xuAAANNa3dbW7tVtc/WYAAAABrWt1zf//EABoBAQEBAAMBAAAAAAAAAAAAAAABAgMFBgT/2gAKAgIQAxAAAADm76JZSAAAAAPRdbjWLjXHcaxcazc6zc2WJYAD2fQSyyyy5ubnWbi41i41jWLjWNZuNZeu6MACFIWWWXNlzc3Nxr7vjoAAAAgFlj//xAAeEAACAwEBAQEBAQAAAAAAAAABBBESEwMCAEAgMP/aAAgBAQABAgA+7WmZmZmZmZmZmZmZmZmZmZmZmZmfBLQZDIYDA77a6XtP7efxcDgcDgcDgcDYbDQaDIZDIYDA77a6XtP4ufxYDIZDQaDQbDYbDYcDgcDgcDgcDYbDQaDQZDIZDAYHfbXS9p/vn966aa667DsO47hgMBkMhoNBoNBsNhsNhsNhwOBsNhsNhoNBoMhkMhkMBjcdtefT2bWta97300001122HcdwwGAyGQyGg0Gg2Gw2Gw2Gw2Gw2Gw2Gw0GuTXv/GZm1rWve99NNNddh2Hcdx3DAYDIZDIaDQaDYbDfFv3+SZm1rWve9x00011HYdtx3DHBj1wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwxxxxxxyyy48v/EACgQAAMAAwAABAYCAwAAAAAAAAABYVFioQIQISIRMUBBUnESMiAwUP/aAAgBAQADPwD1fuHkeR5Y8seWPLHljyx5Y8seWPLHljyx5Y8seWPLHljyx5Y8seWPLHljyx5Y8seWPLHljyx5Y8seWPLHljyx5Y8sb+PqxfyfqLIsl8kIQhCF9d8z3P1+5SlKUpSlKUpSlEIQhCF9H8x/zfr9ylKUpSlKUpSlKUpSlKUpSiyIQhCEL/R8z3v9/wCL8qPI8lKUpSlKUpSlKUpSlKUpSl8qLIhCF6nv8X7+ipSlKUpSlKUpSlKUpSlKfP1Pf4v39bfKlKUpSlKU/t6nv8X7/wCRT+3qe9+774NuG3Dbhtw24bcNuG3Dbhtw24bcNuG3Dbhtw24bcNuG3Dbhtw24bcNuG3Dbhtw24bcNuG3Dbhtw24bcNuD/AC4P8uD/AC4eL3fDx8P/xAAeEQACAwEBAAMBAAAAAAAAAAAAAQQREhMDECAwQP/aAAgBAgEBPwDkzDMsplfwuOhxhxhxhxhxhxhx2PwZxZyZzZhmWUyvtkyZMGEc0ckcUPxQ/BDjocYcYcYcYcY.........完整代码请登录后点击上方下载按钮下载查看
网友评论0