gsap实现滚动网页照片墙及文字旋转归整动画效果代码
代码语言:html
所属分类:画廊相册
代码描述:gsap实现滚动网页照片墙及文字旋转归整动画效果代码,滚动鼠标滚轮试试。
代码标签: gsap 滚动 网页 照片墙 文字 旋转 归整 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;900&display=swap'); * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; } :root { --font1: "Poppins"; } body { margin: 0; font-family: var(--font1); background-color: #000; color: #fff; overflow-x: hidden; } .flex, .flex__col { display: flex; justify-content: center; align-items: center; } .flex__col { flex-direction: column; } ul { margin: 0; padding: 0; list-style: none; } main.flex { width: 100%; height: 200vh; align-items: flex-start; } .items { position: relative; width: 100vw; height: 100vh; overflow: hidden; } .items__inner { position: absolute; top: 50%; left: 50%; width: 150vw; height: 150vw; gap: 2vw; transform: translate(-50%, -50%) rotate(45deg); will-change: transform; } .items__col { position: relative; gap: 2vw; will-change: transform; } .item { position: relative; width: 25vw; height: auto; aspect-ratio: 1/1; overflow: hidden; will-change: width; } .item img { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; transform: translate(-50%, -50%); will-change: transform; } .content { position: absolute; top: 50%; left: 50%; width: 60%; height: 60%; padding: 20%; align-items: flex-start; background-color: rgba(0,0,0,0.3); backdrop-filter: blur(10px); border-radius: 100%; transform: translate(-50%, -50%) scale(0); will-change: border-radius transform; } h1 { font-size: 4vw; font-weight: 700; line-height: 4vw; margin: 0; transform-origin: top left; transform: scale(0); will-change: transform; } p { font-size: 1.2vw; font-weight: 600; transform-origin: top left; transform: scale(0); will-change: transform; } .noise { position: fixed; z-index: 1001; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; background-image: url("//repo.bfw.wiki/bfwrepo/images/3d/noise.png"); } </style> </head> <body > <main class="flex"> <div class="items"> <div class="items__inner flex"> <div class="items__col flex__col"> <div class="item"> <img> </div> <div class="item"> <img> </div> <div class="item"> <img> </div> <div class="item"> <img> </div> <div class="item"> <img> </div> <div class="item"> <img> </div> <div class="item"> <img> </div> </div> <div class="items__col flex__col"> <div class="item"> <img> </div> <div class="item"> <img> </div> <div class="item"> <img> </div> <div class="item"> <img> </div> <div class="item"> <img> </div> <div class="item"> <img> </div> <div class="item"> <img> </div> </div> <div class="items__col flex__col"> <div class="item"> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0