页面滚动进度和页面翻译

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>页面滚动进度</title> <style> @import url("https://fonts.googleapis.com/css?family=Inter:400|Jura:400"); * { box-sizing: border-box; scroll-behavior: smooth; } :root { --c: 238, 199, 99; --t: 204, 204, 204; } body { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; background-color: #000; margin: 0; font-family: "Jura"; color: rgb(var(--t)); position: relative; } h1, h2, h3, p { font-weight: normal; } h1 { font-size: 5rem; margin: 0 0 3rem 0; text-align: center; } p { line-height: 200%; margin-bottom: 3rem; } .scroll { display: flex; flex-direction: column; align-items: center; font-size: 1.2rem; gap: 1rem; position: fixed; bottom: 3rem; right: 3rem; cursor: pointer; transition: all ease 0.3s; } .text { text-shadow: 0 0 20px 1px rgb(var(--c), 1); color: rgb(var(--c)); font-family: "Jura"; } .container { display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 0.5rem; } .rectangle { opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; transform: translateY(20px); box-shadow: 0 0 200px 5px rgb(var(--c), 1), 0 0 20px 1px rgb(var(--c), 0.3); } .rectangle:first-child { opacity: 1; transform: translateY(0); background-color: rgba(var(--c), 1); } .scroll:hover .rectangle:not(:first-child) { opacity: 1; transform: translateY(0); } .rectangle:nth-child(1) { width: 100px; height: 15px; } .rectangle:nth-child(2) { width: 70px; height: 12px; transition-delay: 0.05s; background-color: rgba(var(--c), 0.9); } .rectangle:nth-child(3) { width: 50px; height: 9px; transition-delay: 0.1s; background-color: rgba(var(--c), 0.8); } .rectangle:nth-child(4) { width: 40px; height: 7px; transition-delay: 0.15s; background-color: rgba(var(--c), 0.7); } .rectangle:nth-child(5) { width: 32px; height: 6px; transition-delay: 0.2s; background-color: rgba(var(--c), 0.6); } .rectangle:nth-child(6) { width: 28px; height: 5px; transition-delay: 0.25s; background-color: rgba(var(--c), 0.5); } .rectangle:nth-child(7) { width: 25px; height: 4px; transition-delay: 0.3s; background-color: rgba(var(--c), 0.4); } .rectangle:nth-child(8) { width: 22px; height: 3px; transition-delay: 0.35s; background-color: rgba(var(--c), 0.3); } .scroll:not(:hover) .rectangle:nth-child(2) { transition-delay: 0.35s; } .scroll:not(:hover) .rectangle:nth-child(3) { transition-delay: 0.3s; } .scroll:not(:hover) .rectangle:nth-child(4) { transition-delay: 0.25s; } .scroll:not(:hover) .rectangle:nth-child(5) { transition-delay: 0.2s; } .scroll:not(:hover) .rectangle:nth-child(6) { transition-delay: 0.15s; } .scroll:not(:hover) .rectangle:nth-child(7) { transition-delay: 0.05s; } .scroll:not(:hover) .rectangle:nth-child(8) { transition-delay: 0s; } /* extra */ main { border-style: solid; border-color: rgb(var(--t), 0.2); border-width: 0 1px 0 1px; width: 60%; height: auto; margin: 0 15rem; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; } .line { width: 100%; height: 1px; position: relative; background-color: rgb(var(--t), 0.2); } .top { top: 5rem; } .bottom { bottom: 5rem; } article { position: relative; margin: 10rem 4rem; } a { color: rgb(var(--c)); text-decoration: none; } @media screen and (max-width: 850px) { main { width: 100%; margin: 0 5rem; } .ruler { left: 0rem !important; } } .ruler { width: 2rem; height: 100%; position: absolute; left: 4rem; display: flex; flex-direction: column; align-items: center; } .lines { width: 1px; height: 100%; background-color: rgb(var(--c), 0.2); display: flex; flex-direction: column; align-items: center; position: absolute; } .lines span { width: 1rem; background-color: rgb(var(--c), 0.4); height: 1px; position: absolute; } .mask { position: fixed; height: 10%; width: 1rem; background-color: #000; z-index: 500; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 1rem; color: rgb(var(--c)); } .one { top: 0; border-width: 0 0 1px 0; border-color: rgb(var(--c)); border-style: solid; } .two { bottom: 0; border-width: 1px 0 0px 0; border-color: rgb(var(--c)); border-style: solid; } .lines span:nth-child(1) { top: 4%; } .lines span:nth-child(2) { top: 8%; } .lines span:nth-child(3) { top: 12%; } .lines span:nth-child(4) { top: 16%; } .lines span:nth-child(5) { top: 20%; } .lines span:nth-child(6) { top: 24%; } .lines span:nth-child(7) { top: 28%; } .lines span:nth-child(8) { top: 32%; } .lines span:nth-child(9) { top: 36%; } .lines span:nth-child(10) { top: 40%; } .lines span:nth-child(11) { top: 44%; } .lines span:nth-child(12) { top: 48%; } .lines span:nth-child(13) { top: 52%; } .lines span:nth-child(14) { top: 56%; } .lines span:nth-child(15) { top: 60%; } .lines span:nth-child(16) { top: 64%; } .lines span:nth-child(17) { top: 68%; } .lines span:nth-child(18) { top: 72%; } .lines span:nth-child(19) { top: 76%; } .lines span:nth-child(20) { top: 80%; } .lines span:nth-child(21) { top: 84%; } .lines span:nth-child(22) { top: 88%; } .lines span:nth-child(23) { top: 92%; } .lines span:nth-child(24) { top: 96%; } .lines span:nth-child(25) { top: 100%; } </style> </head> <body> <div class="ruler"> <div class="mask one">0%</div> <div class="mask two">0%</div> <div class="lines"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </div> </div> <main id="main"> <div class="line top"></div> <article> <h1>Dune</h1> <p>A beginning is the time for taking the most delicate care that the balances are correct. This every sister of the Bene Gesserit knows. To begin your study of the life of Muad'Dib, then, take care that you first place him in his time: born in the 57th year of the Padishah Emperor, Shaddam IV. And take the most special care that you locate Muad'Dib in his place: the planet Arrakis. Do not be deceived by the fact that he was born on Caladan and lived his first fifteen years there. Arrakis, the planet known as Dune, is forever his place.</p> <p>—from "Manual of Muad'Dib" by the Princess Irulan</p> <p>In the week before their departure to Arrakis, when all the final scurrying about had reached a nearly unbearable frenzy, an old crone came to visit the mother of the boy, Paul.</p> <p>It was a warm night at Castle Caladan, and the ancient pile of stone that had served the Atreides family as home for twenty-six generations bore that cooled-sweat feeling it acquired before a change in the weather.</p> <p>The old woman was let in by the side door down the vaulted passage by Paul's room and she was allowed a moment to peer in at him where he lay in his bed.</p> <p>By the half-light of a suspensor lamp, dimmed and hanging near the floor, the awakened boy could see a bulky female shape at his door, standing one step ahead of his mother. The old woman was a witch shadow—hair like matted spiderwebs, hooded 'round darkness of features, eyes like glittering jewels.</p> <p>“Is he not small for his age, Jessica?” the old woman asked. Her voice wheezed and twanged like an untuned baliset.</p> <p>Paul’s mother answered in her soft contralto: “The Atreides are known to start late getting their growth, Your Reverence.”</p> <p>“So I’ve heard, so I’ve heard,” wheezed the old woman. “Yet he’s already fifteen.”</p> <p>“Yes, Your Reverence.”</p> <p>“He’s awake and listening to us,” said the old woman. “Sly little rascal.” She chuckled. “But royalty has need of slyness. And if he’s really the Kwisatz Haderach … well….”</p> <p>Within the shadows of his bed, Paul held his eyes open to mere slits. Two bird-bright ovals—the eyes of the old woman—seemed to expand and glow as they stared into his.</p> <p>“Sleep well, you sly little rascal,” said the old woman. “Tomorrow you’ll need all your faculties to meet my gom jabbar.”</p> <p>And she was gone, pushing his mother out, closing the door with a solid thump.</p> <p>Paul lay awake wondering: What’s a gom jabbar?</p> <p>In all the upset during this time of change, the old woman was the strangest thing he had seen.</p> <p><i>Your Reverence.</i></p> <p>And the way she called his mother Jessica like a common serving wench instead of what she was—a Bene Gesserit Lady, a duke’s concubine and mother of the ducal heir.</p> <p>Is a gom jabbar something of Arrakis I must know before we go there? he wondered.</p> <p>He mouthed her strange words: Gom jabbar … Kwisatz Haderach.</p> <p>There had been so many things to learn. Arrakis would be a place so different from Caladan that Paul’s mind whirled with the new knowledge. Arrakis—Dune—Desert Planet.</p> <a href="https://www.penguinrandomhouse.ca/books/352036/dune-by-frank-herbert/9780441013593/excerpt" target="_blank" rel="noopener">Excerpt from Dune by Frank Herbert</a> </article> <div class="line bottom"></div> </main> <a class="scroll" href="#main"> <div class="container"> <div class="rectangle"></div> <div class="rectangle"></div> <div class="rectangle"></div> <div class="rectangle"></div> <div class="rectangle"></div> <div class="rectangle"></div> <div class="rectangle"></div> <div class="rectangle"></div> </div> <span class="text">Throttle up</span> </a> <script> window.onload = function(){ function updateScroller() { const scrollY = window.scrollY; const viewportHeight = window.innerHeight; const documentHeight = document.documentElement.scrollHeight; const top = Math.round((scrollY / (documentHeight - viewportHeight)) * 100); const bottom = Math.round( ((scrollY + viewportHeight - documentHeight) / (documentHeight - viewportHeight)) * 100 ); document.querySelector(".one").textContent = <code>${top}%</code>; document.querySelector(".two").textContent = <code>${bottom}%</code>; if (viewportHeight + window.pageYOffset > 1.2 * viewportHeight) { document.querySelector(".scroll").style.opacity = "1"; } else { document.querySelector(".scroll").style.opacity = "0"; } } window.addEventListener("scroll", updateScroller); window.addEventListener("resize", updateScroller); updateScroller(); } </script>  <script src="https://cdn.staticfile.net/translate.js/3.2.1/translate.js"></script> <script> translate.language.setLocal('ukrainian'); //设置本地语种（当前网页的语种）。如果不设置，默认自动识别当前网页显示文字的语种。可填写如 'english'、'chinese_simplified' 等，具体参见文档下方关于此的说明。 translate.service.use('client.edge'); //设置机器翻译服务通道，直接客户端本身，不依赖服务端。相关说明参考 http://translate.zvo.cn/43086.html translate.execute();//进行翻译 </script> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 页面滚动进度和页面翻译