gsap+ScrollTrigger实现鼠标滚动全屏图文切换效果代码
代码语言:html
所属分类:加载滚动
代码描述:gsap+ScrollTrigger实现鼠标滚动全屏图文切换效果代码
代码标签: gsap ScrollTrigger 鼠标 滚动 全屏 图文 切换
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;500&display=swap'> <style> * { box-sizing: border-box; } html { font-size: 100%; } body { font: 400 1.2rem/1.6 "Comfortaa", sans-serif; background: #000010; color: #ffffff; } h1, h2, h3, h4, h5 { line-height: 1.1; font-weight: 500; margin-bottom: 0.2em; } h1 { font-size: clamp(3.75rem, 10vw, 5rem); } h2 { font-size: clamp(2.5rem, 7.5vw, 3.75rem); } h3 { font-size: clamp(1.25rem, 5vw, 2.5rem); } h4 { font-size: clamp(0rem, 2.5vw, 1.25rem); } h5 { font-size: clamp(-1.25rem, 0vw, 0rem); } .section { background: #00FF85; padding: 10vmax 2vmax; background-color: transparent; overflow: hidden; position: relative; transition: background-color 0.5s cubic-bezier(0.65, 0, 0.35, 1); min-height: 100vh; display: flex; align-items: center; opacity: 0; transform: scale(0.35); } .section--primary:has(.section__link:hover) { background-color: #00FF85; transition: background-color 0.35s cubic-bezier(0.65, 0, 0.35, 1); } .section--primary .section__content::after { background-color: #00FF85; } .section--secondary:has(.section__link:hover) { background-color: #6100FF; } .section--secondary .section__content::after { background-color: #6100FF; } .section--tertiary:has(.section__link:hover) { background-color: #F0EA3E; } .section--tertiary .section__content::after { background-color: #F0EA3E; } .section__link { position: absolute; inset: 0; z-index: 2; } .section__link span { clip: rect(0 0 0 0); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } .section__wrapper { width: 80%; max-width: 900px; min-height: 70vh; margin: 0 auto; position: relative; display: flex; } .section__content { position: relative; display: flex; align-items: flex-end; color: white; min-height: 100%; width: 100%; padding: 16vmax 6vmax 8vmax 6vmax; } .section__content::after { content: ""; display: block; position: absolute; border-radius: 40px; top: -6vmax; left: -4vmax; right: -4vmax; bottom: -4vmax; z-index: -1; transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1); } .section__link:hover + .section__content::after { transform: scale(1.5, 2); transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1); } .section__text { position: relative; z-index: 1; word-break: break-word; max-width: 50ch; text-shadow: 0 0.15em 0.35em rgba(0, 0, 16, 0.25); } .section__title { overflow: hidden; } .section__title span { display: block; transform-origin: 0 0; } .section__figure { position: absolute; inset: 0; background-color: #000010; border-radius: 20px; -webkit-clip-path: polygon(100% 0%, 100% 0%, 100% 50%, 0% 50%, 0% 100%, 0% 100%, 0% 50%, 100% 50%); clip-path: polygon(100% 0%, 100% 0%, 100% 50%, 0% 50%, 0% 100%, 0% 100%, 0% 50%, 100% 50%); overflow: hidden; } .section__figure img { -o-object-fit: cover; object-fit: cover; width: 100%; height: 100%; opacity: 0.7; } .section__figure::before { content: ""; display: block; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 16, 0) 0%, rgba(0, 0, 16, 0.75) 100%); z-index: 1; } @-webkit-keyframes clip { from { -webkit-clip-path: polygon(100% 0%, 100% 0%, 100% 50%, 0% 50%, 0% 100%, 0% 100%, 0% 50%, 100% 50%); clip-path: polygon(100% 0%, 100% 0%, 100% 50%, 0% 50%, 0% 100%, 0% 100%, 0% 50%, 100% 50%); } to { -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 100% 50%, 100% 100%, 0% 100%, 0% 50%, 0% 50%); clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 100% 50%, 100% 100%, 0% 100%, 0% 50%, 0% 50%); } } @keyframes clip { from { -webkit-clip-path: polygon(100% 0%, 100% 0%, 100% 50%, 0% 50%, 0% 100%, 0% 100%, 0% 50%, 100% 50%); clip-path: polygon(100% 0%, 100% 0%, 100% 50%, 0% 50%, 0% 100%, 0% 100%, 0% 50%, 100% 50%); } to { -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 100% 50%, 100% 100%, 0% 100%, 0% 50%, 0% 50%); clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 100% 50%, 100% 100%, 0% 100%, 0% 50%, 0% 50%); } } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity.........完整代码请登录后点击上方下载按钮下载查看
网友评论0