GSAP+ScrollSmoother实现图片相册平滑滚动文字遮罩效果代码
代码语言:html
所属分类:加载滚动
代码描述:GSAP+ScrollSmoother实现图片相册平滑滚动文字遮罩效果代码
代码标签: GSAP ScrollSmoother 图片 相册 平滑 滚动 文字 遮罩
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://use.typekit.net/nyc6jda.css"> <style> body { margin: 0; background-color: #1a1721; color: white; overscroll-behavior: none; margin: 0; padding: 0; overflow-x: hidden; } #wrapper { overflow: hidden; position: fixed; height: 100%; width: 100%; top: 0; left: 0; right: 0; bottom: 0; } #content { overflow: visible; width: 100%; } .text { position: fixed; top: 50vh; font-family: termina, sans-serif; font-weight: 900; font-style: normal; font-size: 8vw; text-align: center; width: 100%; transform: translateY(-100%); z-index: 2; color: white; -webkit-text-stroke-width: 1.5px; -webkit-text-stroke-color: white; z-index: -2; } .outline-text { color: transparent; -webkit-text-stroke-width: 1.5px; -webkit-text-stroke-color: white; z-index: 2; } .filter-text { mix-blend-mode: screen; color: #804691; z-index: 2; } .images { padding-top: 60vh; position: relative; width: 100%; max-width: 1200px; margin: 0 auto; min-height: 150vh; height: 100%; display: grid; grid-template-columns: repeat(20, 2%); grid-template-rows: repeat(30, 3%); justify-content: center; justify-items: center; align-items: center; z-index: 1; object-fit: cover; } .content__slide-item { width: 100%; height: 100%; position: relative; } img { width: 100%; height: 100%; object-fit: cover; } img:nth-child(1) { grid-area: 1/1/6/8; } img:nth-child(2) { grid-area: 3/12/8/20; } img:nth-child(3) { grid-area: 9/5/13/15; } img:nth-child(4) { grid-area: 14/1/18/8; } img:nth-child(5) { grid-area: 16/12/20/19; } img:nth-child(6) { grid-area: 20/2/25/9; } img:nth-child(7) { grid-area: 22/11/24/20; } img:nth-child(8) { grid-area: 26/5/30/15; } </style> </head> <body translate="no"> <h1 class="text">Scrolly Images</h1> <h1 aria-hidden="true" class="text outline-text">Scrolly Images</h1> <h1 aria-hidden="true" class="text filter-text">Scrolly Images</h1> <div id="wrapper"> <section id="content"> <section class=&q.........完整代码请登录后点击上方下载按钮下载查看
网友评论0