gsap实现键盘控制或鼠标滚动控制的炫酷幻灯片切换效果代码
代码语言:html
所属分类:幻灯片
代码描述:gsap实现键盘控制或鼠标滚动控制的炫酷幻灯片切换效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Sora&display=swap"); * { box-sizing: border-box; user-select: none; } ::-webkit-scrollbar { display: none; } figure { margin: 0; overflow: hidden; } html, body { overflow: hidden; margin: 0; padding: 0; height: 100vh; height: -webkit-fill-available; } body { color: #fff; background: #4361ee; font-family: "Sora", sans-serif; } footer { position: fixed; z-index: 999; bottom: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 2rem; width: 100%; height: 7em; font-family: "Sora", sans-serif; font-size: clamp(1.2rem, 2vw, 1rem); } a { color: #fff; text-decoration: none; } .slide { height: 100%; width: 100%; top: 0; position: fixed; visibility: hidden; } .slide__outer, .slide__inner { width: 100%; height: 100%; overflow-y: hidden; } .slide__content { display: flex; align-items: center; justify-content: center; position: absolute; height: 100%; width: 100%; top: 0; } .slide__container { position: relative; max-width: 1400px; width: 100vw; margin: 0 auto; height: 90vh; margin-bottom: 10vh; display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(10, 1fr); grid-column-gap: 0px; grid-row-gap: 0px; padding: 0 1rem; } .slide__heading { --width: 200; display: block; text-align: left; font-family: "Bandeins Sans & Strange Variable"; font-size: clamp(5rem, 15vw, 15rem); font-weight: 900; font-variation-settings: "wdth" var(--width); margin: 0; padding: 0; color: #f2f1fc; z-index: 999; mix-blend-mode: difference; grid-area: 2/2/3/10; align-self: end; } .slide__img-cont { margin-top: 4rem; grid-area: 2/1/7/8; } .slide__img-cont img { width: 100%; height: 100%; object-fit: cover; } .slide:nth-of-type(1) { visibility: visible; } .slide:nth-of-type(1) .slide__content { background-color: #6d597a; } .slide:nth-of-type(2) .slide__content { background-color: #355070; } .slide:nth-of-type(3) .slide__content { background-color: #b56576; } .slide:nth-of-type(4) .slide__content { background-color: #9a8c98; } .overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 2; } .overlay__content { max-width: 1400px; width: 100vw; margin: 0 auto; padding: 0 1rem; height: 90vh; margin-bottom: 10vh; display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(10, 1fr); grid-column-gap: 0px; grid-row-gap: 0px; } .overlay__img-cont { position: relative; overflow: hidden; margin: 0; grid-area: 4/3/9/11; } .overlay__img-cont img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; } .overlay__count { grid-area: 3/10/4/10; font-size: clamp(3rem, 4vw, 15rem); margin: 0; padding: 0; text-align: right; border-bottom: 7px white solid; } @media screen and (min-width: 900px) { .overlay__content, .slide__container { padding: 0 3rem; margin-top: 10vh; height: 80vh; } .overlay__img-cont { grid-area: 5/4/10/11; } .overlay__count { grid-area: 3/10/4/11; } .slide__img-cont { margin-top: 0; grid-area: 3/2/8/7; } .slide__heading { grid-area: 1/1/4/10; } } </style> </head> <body > <section class="slide"> <div class="slide__outer"> <div class="slide__inner"> <div class="slide__content"> <div class="slide__container"> <h2 class="slide__heading">SCROLL</h2> <figure class="slide__img-cont"> <img class="slide__img" src='//repo.bfw.wiki/bfwrepo/image/61cc6fc26b620.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_200,/quality,q_90' alt=''> </figure> </div> </div> </div> </div> </section> <section class="slide"> <div class="slide__outer"> <div class="slide__inner"> <div class="slide__content"> <div class="slide__container"> <h2 class="slide__heading">SWIPE</h2> <figure class="slide__img-cont"> <img class="slide__img" src='//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_200,/quality,q_90' alt=''> </figure> </div> </div> </div> </div> </section> <section class="slide"> <div class="slide__outer"> <div class="slide__inner"> <div class="slide__content"> <div class="slide__container"> <h2 class="slide__heading">SCROLL</h2> <figure class="slide__img-cont"> <img class="slid.........完整代码请登录后点击上方下载按钮下载查看
网友评论0