gsap+Observer实现大气全屏鼠标滚动图文幻灯片切换效果代码
代码语言:html
所属分类:幻灯片
代码描述:gsap+Observer实现大气全屏鼠标滚动图文幻灯片切换效果代码
代码标签: gsap Observer大气 全屏 鼠标 滚动 图文 幻灯片 切换
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap" rel="stylesheet"> <style> @import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond&display=swap"); * { box-sizing: border-box; user-select: none; } a { color: #fff; text-decoration: none; } body { margin: 0; padding: 0; height: 100vh; color: white; background: black; font-family: "Cormorant Garamond", serif; text-transform: uppercase; } h2 { font-size: clamp(1rem, 5vw, 5rem); font-weight: 400; text-align: center; letter-spacing: 0.5em; margin-right: -0.5em; color: #cccccc; width: 90vw; max-width: 1200px; } header { position: fixed; display: flex; align-items: center; justify-content: space-between; padding: 0 5%; width: 100%; z-index: 3; height: 7em; font-family: "Bebas Neue", sans-serif; font-size: clamp(0.66rem, 2vw, 1rem); letter-spacing: 0.5em; } section { height: 100%; width: 100%; top: 0; position: fixed; visibility: hidden; } section .outer, section .inner { width: 100%; height: 100%; overflow-y: hidden; } section .bg { display: flex; align-items: center; justify-content: center; position: absolute; height: 100%; width: 100%; top: 0; background-size: cover; background-position: center; } section .bg h2 { z-index: 2; } section .bg .clip-text { overflow: hidden; } .first .bg { background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 100%), url(//repo.bfw.wiki/bfwrepo/image/5fc8aa82a7330.png); } .second .bg { background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 100%), url("//repo.bfw.wiki/bfwrepo/icon/6056bf753c238.jpg"); } .third .bg { background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 100%), url(//repo.bfw.wiki/bfwrepo/image/609636b3b27fe.png); } .fourth .bg { background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 100%), url(//repo.bfw.wiki/bfwrepo/image/61ac60be5ec44.png); } .fifth .bg { background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 100%), url("//repo.bfw.wiki/bfwrepo/image/61ac6310a18c5.png"); background-position: 50% 45%; } </style> </head> <body> <!-- Sections animate in and out on scroll. Scroll up or down and the sections will wrap around after hitting the start or end. Uses GSAP for the animations. --> <header> <div>Animated Sections</div> <div><a href="">Original By Brian</a></div> </header> <section class="first"> <div class="outer"> <div class="inner"> <div class="bg one"> <h2 class="section-heading">Scroll down</h2> </div> </div> </div> </section> <section class="second"> <div class="outer"> <div cl.........完整代码请登录后点击上方下载按钮下载查看
网友评论0