jquery+bootstrap实现网页滚动模拟海底潜水深度压力与生命体效果代码
代码语言:html
所属分类:加载滚动
代码描述:jquery+bootstrap实现网页滚动模拟海底潜水深度压力与生命体效果代码,滚动鼠标滚轮就能看到海底不同深度的压力和生存的生命体。
代码标签: jquery bootstrap 网页 滚动 模拟 海底 潜水 深度 压力 生命体
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap'> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.5.3.0.css"> <style> body { background: #f5f5f5; font-family: "Plus Jakarta Sans", sans-serif; background: black; } h1, h2, h3, h4, h5 { font-weight: 700; color: #fff; } #navbarNav { background: transparent; margin-left: 2em; } .border-bottom { border-bottom: 1px solid #191919 !important; } .gallery { display: flex; justify-content: center; margin-bottom: 20px; } .container { max-width: 100vw; position: relative; margin-bottom: 500px; } .filter-range { display: flex; flex-direction: column; align-items: center; } #svg-filters { position: absolute; } .card { margin-top: 24px; margin-bottom: 24px; border-radius: 24px; padding: 24px; box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px; border: none; } #search { border-radius: 24px; border: none; padding: 12px; float: right; box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px; } #image { position: absolute; top: 0; width: 100%; height: 11000px; object-position: center bottom; margin-bottom: 2000px; z-index: -1; } .deep { cursor: url(//repo.bfw.wiki/bfwrepo/images/huajuan/14ZwyOC0zZQLJwVVwNjAo-m4F7E44-bV5=w96.png) 48 48, auto; } .species img { cursor: url(//repo.bfw.wiki/bfwrepo/images/huajuan/1w138J4r1-wCAGFIGBkOo9Ap7ObaO0t4f=w96.png) 48 48, auto; } .card h5 { margin-bottom: 24px; } .buttons { margin-bottom: 24px; } .btn { border-radius: 24px; box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px; } .measures { position: fixed; top: 80px; right: 48px; text-align: right; font-size: 2em; font-weight: 800; color: #ccc; mix-blend-mode: hard-light; } .active { opacity: 100%; transition: all 1s; } .sky { width: 100vw; height: 800px; background: url("//repo.bfw.wiki/bfwrepo/images/huajuan/1ZLMVeoB0fG5KXgN4Q-rqIt9kAVxqrWcT=w1000.png"); background-size: cover; margin-bottom: -56px; } .sky h1 { font-size: 5rem; color: black; mix-blend-mode: multiply; text-align: center; } .end { width: 100vw; height: 100vh; margin-bottom: -56px; position: absolute; top: 12800px; } .end h1 { font-size: 5rem; color: white; text-align: center; } .species, .titles { opacity: 0; transition: all 2s; } .visible { opacity: 1; } .species:hover { opacity: 1; transition: all 2s; } .species { position: absolute; z-index: 1; padding-top: 56px; } .titles { position: absolute; z-index: 2; left: 0; padding-top: 56px; } .species.active, .titles.active { opacity: 1; } .species img { display: block; margin: 0 auto; border-radius: 50%; width: 200px; /* Adjust size as needed */ height: 200px; /* Adjust size as needed */ transition: transform 0.5s ease-in-out; transition: all 1s; object-fit: cover; border: 10px solid rgba(255, 255, 255, 0.1); } .species.active img { transform: scale(1); } .species .description { text-align: center; } .species.active .description.active { opacity: 1; } .species .description h2 { font-size: 1.5em; margin-top: 10px; color: #fff; } .species .description p { font-size: 1em; color: #ccc; } .sunlight { top: 0; } .twilight { top: 200px; } .midnight { top: 1000px; } .abyss { top: 4000px; } .trench { top: 6000px; } .main-title { height: 100%; flex-direction: column; } .titles h1 { font-size: 3em; font-weight: 900; margin-top: 0px; text-align: left; color: white; border-top: 1px solid white; } .titles span { font-size: 1em; font-weight: 400; margin-top: 0px; text-align: left; color: #ccc; } .coelacanth { top: 200px; left: 50%; margin-left: -200px; } .japanese-spider-crab { top: 300px; left: 50%; margin-left: 100px; } .cuttlefish { top: 600px; left: 50%; margin-left: -100px; } .sea-angel { top: 600px; left: 50%; margin-left: 250px; } .nautilus { top: 700px; left: 50%; margin-left: -400px; } .cockatoo-squid { top: 1300px; left: 50%; margin-left: 100px; } .headless-chicken-fish { top: 1000px; left: 50%; margin-left: 200px; } .vampire-squid { top: 1200px; left: 50%; margin-left: -400px; } .goblin-shark { top: 1300px; left: 50%; margin-left: -150px; } .firework-jellyfish { top: 1500px; left: 50%; margin-left: -400px; } .dragonfish { top: 1500px; left: 50%; margin-left: 300px; } .barreleye-fish { top: 2500px; left: 50%; margin-left: -400px; } .anglerfish { top: 2500px; left: 50%; margin-left: -100px; } .chimaera { top: 2600px; left: 50%; margin-left: 200px; } .pelican-eel { top: 3000px; left: 50%; margin-left: -400px; } .deepsea-lizardfish { top: 3500px; left: 50%; margin-left: -100px; } .titanic { top: 3800px; left: 50%; margin-left: 200px; } .atolla-jellyfish { top: 4000px; left: 50%; margin-left: -400px; } .fangtooth { top: 5000px; left: 50%; margin-left: -400px; } .faceless-fish { top: 5100px; left: 50%; margin-left: 200px; } .grenadier { top: 7000px; left: 50%; margin-left: 200px; } .dumbo-octopus { top: 7000px; left: 50%; margin-left: -400px; } .comb-jelly { top: 7210px; left: 50%; margin-left: -100px; } .hadal-snailfish { top: 8100px; left: 50%; margin-left: 200px; } .sea-pig { top: 10000px; left: 50%; margin-left: -300px; } .alicella { top: 10300px; left: 50%; margin-left: 100px; } .deepsea { top: 10898px; left: 50%; margin-left: -200px; } .fangtooth img, .faceless-fish img { object-position: left; } .barreleye-fish img { object-position: right; } /* Existing styles for the custom cursors */ #custom-pointer-cursor, #custom-cursor { position: absolute; top: 0; left: 0; pointer-events: none; transform: translate(-50%, -50%); transition: transform 0.1s ease-in-out; z-index: 9999; display: none; } #pointer, #submarine { width: 96px; height: auto; margin-top: -48px; margin-left: -48px; transition: rotate 0s ease-in-out; } .mouse-scroll { display: flex; flex-direction: column; align-items: center; gap: 10px; } .mouse { width: 48px; height: 80px; border: 4px solid #000; border-radius: 24px; display: flex; justify-content: center; align-items: start; } .wheel { width: 8px; height: 16px; background-color: #000; border-radius: 4px; animation: scroll 1s infinite; margin-top: 8px; } /* Scroll animation */ @keyframes scroll { 0% { transform: translateY(0); } 50% { transform: translateY(8px); } 100% { transform: translateY(0); } } .arrow { width: 10px; height: 10px; border-right: 2px solid #000; border-bottom: 2px solid #000; transform: rotate(45deg); } @media only screen and (max-width: 600px) { .deep { transform: scale(0.5); margin-top: -125px; } .measures { display: none; } } @media only screen and (min-width: 600px) { .deep { transform: scale(0.5); margin-top: -125px; } .measures { display: none; } } @media only screen and (min-width: 768px) { .deep { transform: scale(0.6); margin-top: -100px; } .measures { display: none; } } @media only screen and (max-width: 992px) { .deep { transform: scale(0.6); margin-top: -100px; } .measures { display: none; } } @media only screen and (min-width: 1200px) { .deep { transform: scale(1); margin-top: 56px; } .measures { display: block; } } .hideAll { display: none; } a { color: #1f2226; } </style> </head> <body> <nav class="navbar navbar-expand-sm navbar-dark fixed-top bg-dark"> <div class="container-fluid"> <ul class="navbar-nav me-auto mb-2 mb-md-0"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#sunlight">Sunlight</a> </li> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#twilight">Twilight</a> </li> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#midnight">Midnight</a> </li> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#abyss">Abyss</a> </li> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#trench">Trench</a> </li> <li class="nav-item elements"> <div class="nav-link active">Items discovered : <span id="elementsNumber">0</span>/27</div> </li> <li class="showAll nav-item"> <div id="showAll" class="btn btn-primary nav-link active">Show All</div> </li> <li class="hideAll nav-item"> <div id="hideAll" class="btn btn-primary nav-link active">Hide All</div> </li> </ul> </div> </nav> <div class="sky"> <div class="main-title row d-flex justify-content-center align-items-center"> <div class="col-12"> <div class="d-flex justify-content-center"> <h1>Scroll to the Abyss</h1> </div> </div> <div class="col-12"> <div class="d-flex justify-content-center"> <span>Uncover Hidden Treasures and Marine Wonders</span> </div> </div> <div class="col-12 mt-5"> <div class="d-flex justify-content-center"> <div class="mouse-scroll"> <div class="mouse"> <div class="wheel"></div> </div> <div class="arrow"></div> </div> </div> </div> </div> </div> <div class="container deep"> <div class="row"> <div class="col"> <div class="d-flex justify-content-center"> <div class="container"> <img id="image" src="//repo.bfw.wiki/bfwrepo/images/huajuan/1w7Jx-qQ1lvv5IGht1FNd7Zbudo6tnlKB=w1000.png"> <div class="deep"></div> <div class="titles sunlight" id="sunlight"> <div class="title"> <h1 class="no-span">Sunlight Zone</h1> <span>0-200m</span> </div> </div> <div class="titles twilight" id="twilight"> <div class="title"> <h1 class="no-span">Twilight Zone</h1> <span>200-1000m</span> </div> </div> <div class="titles midnight" id="midnight"> <div class="title"> <h1 class="no-span">Midnight Zone</h1> <span>1000-4000m</span> </div> </div> <div class="titles abyss" id="abyss"> <div class="title"> <h1 class="no-span">The Abyss</h1> <span>4000-6000m</span> </div> </div> <div class="titles trench" id="trench"> <div class="title"> <h1 class="no-span">The Trench</h1> <span>6000-11000m</span> </div> </div> <div class="species coelacanth"> <img src="//repo.bfw.wiki/bfwrepo/images/huajuan/1G5YadSz_wl_CDe-1kUHqU_q5BF53DKPe=w1000.png"> <div class="description"> <h2>Coelacanth</h2> <p>200m</p> </div> </div> <div class="species japanese-spider-crab"> <img src="//repo.bfw.wiki/bfwrepo/images/huajuan/1F7RFIoCdd4Q5tsGnYbXZaeOG2tbo2uG6=w1000.png"> <div class="description"> <h2>Japanese Spider Crab</h2> <p>610m</p> </div> </div> <div class="species cuttlefish"> <img src="//repo.bfw.wiki/bfwrepo/images/huajuan/1qqBHqYdVvmWdhmnpWSjeszmUoEGvFB3U=w1000.png"> <div class="description"> <h2>Cuttlefish</h2> <p>600m</p> </div> </div> <div class="species sea-angel"> <img src="//repo.bfw.wiki/bfwrepo/images/huajuan/1CeU-0N9PBCCK9AhvkArvrOEesvkItvPL=w1000.png"> <div class="description"> <h2>Sea Angel</h2> <p>600m</p> </div> </div> <div class="species nautilus"> <img src="//repo.bfw.wiki/bfwrepo/images/huajuan/13fkdRcgc0sWUsoJquKRxHazEOnxEjQVo=w1000.png"> <div class="description"> <h2>Nautilus</h2> <p>700m</p> </div> </div> <div class="species cockatoo-squid"> <img src="//repo.bfw.wiki/bfwrepo/images/huajuan/12vUDJnST5M03vCnexc3rCPOC9OXJG40k=w1000.png"> <div class="description"> <h2>.........完整代码请登录后点击上方下载按钮下载查看
网友评论0