swiper+gsap+Observer+SplitText3实现全屏上下左右滚动作品展示个人简历代码
代码语言:html
所属分类:布局界面
代码描述:swiper+gsap+Observer+SplitText3实现全屏上下左右滚动作品展示个人简历代码,往下滚动翻页后可以看到更多的作品。
代码标签: swiper gsap Observer SplitText 全屏 上下 左右 滚动 作品 展示 个
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/swiper-bundle.10.3.1.css"> <style> @import url("https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800&family=Permanent+Marker&family=Tilt+Neon&display=swap"); *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } 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; } /* HOME */ .home { position: relative; display: flex; align-items: center; min-height: 100vh; background: rgb(72, 182, 153); background-image: linear-gradient( 90deg, rgba(72, 182, 153, 0.8) 10%, rgba(56, 143, 168, 0.8) 48%, rgba(94, 73, 214, 0.8) 98% ); } .home > img { position: absolute; right: 3%; bottom: 0; width: 100%; max-width: 600px; z-index: 5; } .home-content { position: absolute; left: 7%; font-family: "Nunito", sans-serif; width: min(500px, 100%); color: #fff; z-index: 5; } .home-content > h1 { font-family: inherit; font-size: 3rem; font-weight: 700; margin-bottom: 20px; } .music-note-icon { color: #fff; font-size: 3rem; } .home-content > p { font-family: inherit; font-size: 1.2rem; font-weight: 600; line-height: 1.5; margin-bottom: 30px; } /* HOME - SCROLL */ .scroll { position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); overflow-x: hidden; scrollbar-width: none; width: 100%; } .scroll p { font-family: "Tilt Neon", sans-serif; font-size: 9rem; font-weight: 500; background: rgba(255, 255, 255, 0.3); color: transparent; background-size: contain; background-clip: text; -webkit-background-clip: text; } .scroll p:nth-child(1) { animation: scrolling-rtl 25s infinite linear; margin-bottom: 210px; } .scroll p:nth-child(2) { animation: scrolling-ltr 25s infinite linear; } @keyframes scrolling-rtl { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } @keyframes scrolling-ltr { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* HOME - LINKS */ .links { display: flex; flex-direction: row; align-items: center; gap: 10px; } .links li { list-style-type: none; text-decoration: none; } .links li a { display: flex; justify-content: center; align-items: center; background-color: #6f66c7; border-radius: 50%; padding: 15px; color: #fff; transition: background-color 0.2s linear; } .links li a .icon { color: #fff; font-size: 1.3rem; } .links li a:hover { background-color: #257381; } .links li a:hover .icon { animation: slide-icon 1s linear 1; } @keyframes slide-icon { 49% { transform: translateX(-20px); opacity: 0; } 50% { transform: translateX(20px); } 80% { transform: translateX(0); opacity: 1; } } .mouse-move { position: absolute; max-width: 70px; bottom: 25px; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); animation: mouse-move 1.5s linear infinite; } @keyframes mouse-move { 0%, 50%, 100% { transform: translateY(0); } 12.5%, 37.5% { transform: translateY(3px); } 25% { transform: translateY(8px); } } /* CONTENT */ .content { display: flex; justify-content: center; align-items: center; min-height: 100vh; width: 100%; background: #fff; background-image: radial-gradient( at 46.6% 46.9%, hsl(267, 50%, 84%) 0px, transparent 50% ), radial-gradient(at 28.5% 71%, hsl(312, 73%, 85%) 0px, transparent 50%), radial-gradient(at 65.9% 75.2%, hsl(146, 68%, 88%) 0px, transparent 50%); } .swiper { width: 100%; padding-top: 50px; padding-bottom: 50px; } .swiper-slide { display: grid; grid-template-rows: 4fr 1fr; max-width: 350px; object-fit: cover; padding: 15px; border-radius: 10px; background-color: #eaeaea; box-shadow: 0 0.5px 0 1px rgba(255, 255, 255, 0.23) inset, 0 1px 0 0 rgba(255, 255, 255, 0.66) inset, 0 4px 16px rgba(0, 0, 0, 0.12); } .swiper-slide > img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 5px; filter: saturate(0.9) contrast(0.85) brightness(1.05); margin-bottom: 15px; } .title { display: flex; flex-direction: column; justify-content: center; align-items: center; font-family: "Permanent Marker", cursive; transform: rotate(355deg); } .swiper-pagination { --swiper-pagination-color: #7f31ac; --swiper-pagination-bullet-size: 10px; --swiper-pagination-bullet-horizontal-gap: 5px; } /* INFO */ .info { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 150px; width: 100%; min-height: 100vh; font-family: "Nunito", sans-serif; background-image: linear-gradient( 45deg, #e09ad6 0%, #c3af31 30%, #efdf79 60%, #6ec99f 100% ); } .info img { width: 100%; max-width: 400px; filter: drop-shadow(0 0 0.8rem #6ec99f); transform: rotate(-25deg); } .info img:hover { animation: rotating 1s ease 1 reverse; } @keyframes rotating { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } } .info-content { display: flex; flex-direction: column; gap: 35px; padding: 40px 50px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(70px); border-radius: 20px; width: min(500px, 100%); box-shadow: 0 0.5px 0 1px rgba(255, 255, 255, 0.23) inset, 0 1px 0 0 rgba(255, 255, 255, 0.66) inset, 0 4px 16px rgba(0, 0, 0, 0.12); } .info-content h1 { font-size: 2.5rem; font-weight: 800; line-height: 1; letter-spacing: 1.4; color: #6ec99f; text-align: center; } .info-content p { font-size: 1.1rem; font-weight: 500; color: #4b5563; text-align: center; } .tag-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .tag-container span { font-size: 1rem; font-weight: 500; border-radius: 5px; background: linear-gradient( 90deg, #e09ad6 0%, #e4b49b 20%, #ede302 50%, #6ec99f 80% ); color: #4b5563; padding: 5px 8px; } @media (max-width: 1500px) { .home > img { max-width: 600px; } .scroll p { font-size: 7rem; } .scroll p:nth-child(1) { margin-bottom: 300px; } } @media (max-width: 1200px) { .home > img { right: 2%; max-width: 500px; } .home-content { width: min(400px, 100%); } .home-content > h1 { font-size: 2.7rem; } .music-note-icon { font-size: 3rem; } .home-content > p { font-size: 1.1rem; } .scroll p { font-size: 6rem; } } @media (max-width: 1000px) { .home-content { width: min(350px, 100%); } .info { gap: 100px; padding: 20px; } .info img { max-width: 300px; } .info-content h1 { font-size: 2rem; } .info-content p { font-size: 1rem; } .scroll p { font-size: 5rem; } .tag-container { gap: 10px; } } @media (max-width: 900px) { .home > img { right: 2%; max-width: 400px; } .home-content { top: 10%; } .music-note-icon { font-size: 2rem; } .home-content > p { font-size: 1.1rem; margin-bottom: 30px; } .scroll p { font-size: 4rem; } .scroll p:nth-child(1) { margin-bottom: 200px; } .info-content { gap: 15px; padding: 30px 30px; } } @media (max-width: 800px) { .home > img { max-width: 350px; } .info { flex-direction: column; padding: 50px 20px; } .info { gap: 70px; padding: 20px; } .info img { max-width: 250px; } .info-content h1 { font-size: 1.5rem; } .info-content p { font-size: 0.8rem; } .tag-container span { font-size: 0.8rem; } } @media (max-width: 660px) { .home > img { right: 3%; max-width: 300px; } .home-content { margin-right: 30px; } .home-content > h1 { font-size: 2.5rem; } .scroll p { font-size: 3rem; } } @media (max-width: 500px) { .home > img { max-width: 250px; } .home-content > h1 { font-size: 2rem; } .scroll p { font-size: 2rem; } .scroll p:nth-child(1) { margin-bottom: 90px; } .links li a { padding: 10px; } .links li a .icon { font-size: 1rem; } .info { gap: 40px; } .info img { margin-top: 50px; max-width: 190px; } .info-content { gap: 20px; padding: 30px 20px; margin-bottom: 50px; } } </style> </head> <body> <section> <div class="outer"> <div class="inner"> <div class="bg home"> <div class="scroll"> <p>Welcome to RetroBeats</p> <p>A Nostalgic Journey</p> </div> <img src="//repo.bfw.wiki/bfwrepo/image/601fc3b5721f5.png" alt="" /> <div class="home-content"> <h1> RETROBEATS <ion-icon.........完整代码请登录后点击上方下载按钮下载查看
网友评论0