gsap+lenis实现全屏自适应图文鼠标滚动上下切换效果代码
代码语言:html
所属分类:幻灯片
代码描述:gsap+lenis实现全屏自适应图文鼠标滚动上下切换效果代码
代码标签: gsap lenis 全屏 自适应 图文 鼠标 滚动 上下 切换
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *::after, *::before { box-sizing: border-box; } :root { font-size: 16px; --page-padding: 1.5rem; --color-text: #fff; --color-bg: #12100e; --color-link: rgba(255,255,255,0.6); --color-link-hover: #fff; --color-bg-1: #2f251e; --color-bg-2: #43392f; --color-bg-3: var(--color-bg-1); --color-bg-4: var(--color-bg-2); --color-bg-5: var(--color-bg-1); --color-bg-6: var(--color-bg-2); } body { margin: 0; color: #fff; background-color: #12100e; font-family: "area-variable", sans-serif; font-variation-settings: "slnt" 0, "wdth" 150, "wght" 500, "INKT" 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; width: 100%; overflow-x: hidden; } /* Page Loader */ .js .loading::before, .js .loading::after { content: ''; position: fixed; z-index: 5000; } .js .loading::before { top: 0; left: 0; width: 100%; height: 100%; background: var(--color-bg); } .js .loading::after { top: 50%; left: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; opacity: 0.4; background: var(--color-link); animation: loaderAnim 0.7s linear infinite alternate forwards; } @keyframes loaderAnim { to { opacity: 1; transform: scale3d(0.5,0.5,1); } } a { text-decoration: none; color: var(--color-link); outline: none; cursor: pointer; } a:hover { color: var(--color-link-hover); outline: none; } /* Better focus styles from https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */ a:focus { /* Provide a fallback style for browsers that don't support :focus-visible */ outline: none; background: lightgrey; } a:focus:not(:focus-visible) { /* Remove the focus indicator on mouse-focus for browsers that do support :focus-visible */ background: transparent; } a:focus-visible { /* Draw a very noticeable focus style for keyboard-focus on browsers that do support :focus-visible */ outline: 2px solid red; background: transparent; } .unbutton { background: none; border: 0; padding: 0; margin: 0; font: inherit; cursor: pointer; } .unbutton:focus { outline: none; } .frame { padding: var(--page-padding); position: relative; display: grid; z-index: 1000; width: 100%; grid-row-gap: 1rem; grid-column-gap: 2rem; justify-items: start; text-transform: uppercase; font-size: 12px; } .frame--header { height: 100%; z-index: 3000; background-size: auto 80%; background-position: 120% 50%; background-repeat: no-repeat; grid-template-areas: 'title' 'prev' 'back' 'sub' 'sponsor' 'demos' 'heading'; } .frame--footer { grid-template-areas: 'credits' 'author'; align-content: end; } .frame #cdawrap { justify-self: start; } .frame a { pointer-events: auto; } .frame__title { grid-area: title; font-size: inherit; margin: 0; } .frame__back { grid-area: back; justify-self: start; } .frame__prev { grid-area: prev; justify-self: start; } .frame__sub { grid-area: sub; } .frame__demos { grid-area: demos; display: flex; align-items: center; gap: 0.5rem; align-self: start; flex-wrap: wrap; background: var(--color-bg); border: 1px solid; padding: 1rem; border-radius: 10px; } .frame__demos > * { width: 2rem; display: block; flex: none; text-decoration: none; border-radius: 50%; aspect-ratio: 1; border: 1px solid var(--color-link-hover); display: grid; place-items: center; padding-top: 0.2em; background: var(--color-bg); } .frame__demos > span { filter: invert(100%); } .frame__demos::before { content: "Variations:"; } .frame__heading { grid-area: heading; align-self: center; justify-self: start; width: min-content; display: flex; flex-direction: column; margin-top: 10vh; } .frame__heading h2 { margin: 0; line-height: 0.9; text-transform: uppercase; margin-left: -0.065em; font-size: clamp(2.5rem,12vw,7rem); letter-spacing: -0.105em; font-variation-settings: "slnt" 0, "wdth" 400, "wght" 900, "INKT" 400; } i { font-style: normal; font-variation-settings: "slnt" 0, "wdth" 100, "wght" 400, "INKT" 400; } .frame__heading p { margin: 0; } .frame__credits { grid-area: credits; } .frame__author { display: flex; gap: 1.5rem; grid-area: author; } .content { padding: var(--page-padding); display: flex; flex-direction: column; justify-content: center; align-items: center; } .content--perspective { perspective-origin: 50% 0%; perspective: 1000px; } .text-large { font-size: clamp(1.5rem,5vw,3rem); max-width: 900px; margin: 0 0 0.85em 0; line-height: 1.2; font-variation-settings: "slnt" 0, "wdth" 100, "wght" 500, "INKT" 100; } .content--sticky { width: 100vw; position: sticky; top: 0; --offset: 0px; top: var(--offset); height: calc(100vh - var(--offset)); } .content--grid, .content--grid .content__inner { display: grid; overflow: hidden; grid-column-gap: 5vw; grid-row-gap: 2vh; align-content: center; grid-template-areas: 'content-img' 'content-title' 'content-text'; justify-items: center; } .content--grid:has(.content__inner) { display: block; padding: 0; } .content__inner { width: 100%; height: 100%; border-radius: 0 0 2rem 2rem; } .content--card { display: flex; flex-direction: column; height: 80vh; width: 95vw; max-width: 500px; aspect-ratio: 0.8; top: 10vh; margin: auto; border-radius: 14px; gap: 3vh; text-align: center; margin-bottom: 5vh; } .content--card .content__title { font-size: clamp(1.5rem,4vw,3.5rem); } .content--card .content__title i { display: block; } .content--half { display: flex; flex-direction: column; gap: 3vh; text-align: center; } .content--half:nth-child(odd) { margin-left: auto; } .content__img { grid-area: content-img; width: 50%; max-width: 300px; height: auto; } .content__img--large { width: 60%; height: auto; } .content__img--small { height: 35%; width: auto; } .spacer { margin-top: 20vh; } .content__title { grid-area: content-title; letter-spacing: -0.095em; text-transform: uppercase; line-height: 1; font-weight: normal; font-size: clamp(2rem,6vw,5rem); margin: 0; font-variation-settings: "slnt" 0, "wdth" 400, "wght" 900, "INKT" 400; } .content__text { margin: 0; max-width: 500px; grid-area: content-text; text-align: center; line-height: 1.5; padding: 0 1rem; backface-visibility: hidden; } .content__text--narrow { max-width: 300px; } .content--intro { padding-top: 25vh; padding-bottom: 25vh; z-index: 2; } .content--outro { padding-top: 50vh; padding-bottom: 30vh; } .bg-1 { background: var(--color-bg-1); } .bg-2 { background: var(--color-bg.........完整代码请登录后点击上方下载按钮下载查看
网友评论0