lenis+ScrollMagic实现大气带视觉差异滚动的装修设计公司官网代码
代码语言:html
所属分类:布局界面
代码描述:lenis+ScrollMagic实现大气带视觉差异滚动的装修设计公司官网代码,首页入场是视频然后自动缩小,最后与照片视觉差异滚动。
代码标签: lenis ScrollMagic 大气 视觉差异 滚动 装修 设计 公司 官网 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --primary: #212121; --secondary: #515151; --white: #ffffff; } * { margin: 0; padding: 0; } body, html { overflow-x: hidden; } body { background-color: var(--primary); height: 100%; color: var(--white); } body::-webkit-scrollbar { width: 4px; } body::-webkit-scrollbar-track { border-radius: 10px; } body::-webkit-scrollbar-thumb { background: var(--secondary); border-radius: 10px; } body::-webkit-scrollbar-thumb:hover { background: var(--secondary); } ::selection { background: var(--primary); color: var(--white); } .overflow-hidden { overflow: hidden !important; position: fixed; width: 100%; } h1, h2, h3 { margin-bottom: 30px; font-size: 24px; line-height: 1; text-transform: capitalize; -webkit-text-transform: capitalize; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); -webkit-text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); font-family: "Poppins", sans-serif; font-weight: 500; color: var(--white); letter-spacing: 1.2px; -webkit-text-transform: uppercase; text-transform: uppercase; } p { font-size: 45px; line-height: 1.4; font-family: "Titillium Web", sans-serif; font-weight: 200; } .pinWrapper { height: 100%; width: 100%; position: relative; z-index: 11; } .scrollmagic-pin-spacer { position: absolute !important; clip: rect(auto, auto, auto, auto); } .event { position: relative; overflow: hidden; height: 100svh; width: 100vw; z-index: 1; background-size: cover; background-position: center center; background-repeat: no-repeat; } .event::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } #section1.event::before { background-color: rgb(21 22 28 / 15%); } #section2.event::before { background-color: rgb(21 22 28 / 34%); } #section3.event::before { background-color: rgb(86 82 76 / 57%); } #section4.event::before { background-color: rgb(120 115 103 / 58%); } #section1 { background-image: url("//repo.bfw.wiki/bfwrepo/image/65fbd2c6f1cff.png"); } #section2 { background-image: url("//repo.bfw.wiki/bfwrepo/image/65fbd3289d69f.png"); } #section3 { background-image: url("//repo.bfw.wiki/bfwrepo/image/65fbd3923ef76.png"); } #section4 { background-image: url("//repo.bfw.wiki/bfwrepo/image/65fbd2c6f1cff.png"); } .image { height: 100%; width: 100%; top: 0%; left: 0%; position: absolute; background-size: cover; background-position: center center; transition: width 1s, height 1s; -webkit-transition: width 1s, height 1s; box-shadow: 2px 2px 10px 10px rgb(0 0 0 / 12%); -webkit-box-shadow: 2px 2px 10px 10px rgb(0 0 0 / 12%); transform-origin: center; -webkit-transform-origin: center; z-index: 8888; overflow: hidden; border-radius: 0; } .image:not(#loaderVideo) { top: -50%; width: 500px; height: 500px; left: auto; right: 100px; position: absolute; border-radius: 12px; transform: translate(0%, -50%); -webkit-transform: translate(0%, -50%); } #section1 .image video { height: 100%; width: 100%; object-fit: cover; object-position: center center; position: absolute; top: 0; left: 0; } #section2 .image { background-image: url("//repo.bfw.wiki/bfwrepo/image/65fbd3289d69f.png"); } #section3 .image { background-image: url("//repo.bfw.wiki/bfwrepo/image/65fbd3923ef76.png"); } #section4 .image { background-image: url("//repo.bfw.wiki/bfwrepo/image/65fbd2c6f1cff.png"); } /* Section Text */ .text { top: -50%; left: 0; position: absolute; transform: translate(100px, -50%); -webkit-transform: translate(100px, -50%); width: 43%; } #section1 .text { top: 50%; } /* Scroll Button */ .scrollBtn { position: absolute; bottom: 2.5%; left: 50%; transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); width: 100px; height: auto; display: flex; align-items: center; flex-direction: column; gap: 10px; z-index: 1; transition: all ease-in-out 0.35s; -webkit-transition: all ease-in-out 0.35s; } .scrollBtn.move { visibility: hidden; opacity: 0; } .scrollBtn span { width: 12px; height: 12px; display: block; border-bottom: 2px solid var(--white); border-right: 2px solid var(--white); transform: rotate(45deg); -webkit-transform: rotate(45deg); animation: animate 2s infinite; -webkit-animation: animate 2s infinite; margin: auto; } .scrollBtn h6 { font-size: 16px; line-height: 1.5; font-weight: 400; font-family: "Titillium Web", sans-serif; text-align: center; text-transform: uppercase; -webkit-text-transform: uppercase; letter-spacing: 2px; } @keyframes animate { 0% { opacity: 0; transform: rotate(45deg) translate(-10px, -10px); } 50% { opacity: 1; } 100% { opacity: 0; transform: rotate(45deg) translate(10px, 10px); } } @-webkit-keyframes animate { 0% { opacity: 0; transform: rotate(45deg) translate(-10px, -10px); } 50% { opacity: 1; } 100% { opacity: 0; transform: rotate(45deg) translate(10px, 10px); } } /* Preloader */ #preloader { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 9999; background-color: transparent; display: flex; justify-content: center; align-items: center; transition: all 1s; -webkit-transition: all 1s; } #preloader img, #preloader video { position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; } #preloader::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; z-index: 1; } .text-wrapper { text-align: center; height: 24px; overflow: hidden; transition: opacity 1s; -webkit-transition: opacity 1s; } #first-text { animation: moveUp 1s 1s forwards; -webkit-animation: moveUp 1s 1s forwards; } #second-text { opacity: 0; transform: translateY(-30px); -webkit-transform: translateY(-30px); animation: scrollup 1s 1.2s forwards, moveUpAgain 1s 2.2s forwards; -webkit-animation: scrollup 1s 1.2s forwards, moveUpAgain 1s 2.2s forwards; } @keyframes moveUp { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-100px); opacity: 0; } } @-webkit-keyframes moveUp { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-100px); opacity: 0; } } @keyframes scrollup { 100% { transform: translateY(-54px); } } @-webkit-keyframes scrollup { 100% { transform: translateY(-54px); } } @keyframes moveUpAgain { 0% { transform: translateY(-54px); opacity: 1; } 60% { transform: translateY(-54px); opacity: 1; } 100% { transform: translateY(-60px); opacity: 0; } } @-webkit-keyframes moveUpAgain { 0% { transform: translateY(-54px); opacity: 1; } 60% { transform: translateY(-54px); opacity: 1; } 100% { transform: translateY(-60px); opacity: 0; } } /* Media Query */ @media screen and (max-width: 1399px) { h2 { font-size: 22px; } p { font-size: 38px; } .text { transform: translate(60px, -50%); -webkit-transform: translate(60px, -50%); } .image:not(#loaderVideo) { height: 450px; width: 450px; right: 80px; transform: translate(0%, -50%); -webkit-transform: translate(0%, -50%); } } @media screen and (max-width: 1199px) { h2 { font-size: 20px; } p { font-size: 34px; } .text { transform: translate(40px, -50%); -webkit-transform: translate(40px, -50%); width: 44%; } .image:not(#loaderVideo) { height: 400px; width: 400px; right: 60px; transform: translate(0%, -50%); -webkit-transform: translate(0%, -50%); } } @media screen and (max-width: 991px) { h2 { font-size: 18px; } p { font-size: 26px; } .text { transform: translate(24px, -50%); -webkit-transform: translate(24px, -50%); width: 44%; } .image:not(#loaderVideo) { height: 310px; width: 310px; right: 40px; transform: translate(0%, -50%); -webkit-transform: translate(0%, -50%); } } @media screen and (max-width: 767px) { h2 { font-size: 16px; } p { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0