仿苹果鼠标滚轮控制 文字渐入 淡出效果
废话不多说，上代码，纯js+css3
DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle>
head><body><div id="iphone"><div id="ui"><ul><li>哔哩哔哩 (゜-゜)つロ 干杯~-bilibilili><li>哔哩哔哩 (゜-゜)つロ 干杯~-bilibilili><li>哔哩哔哩 (゜-゜)つロ 干杯~-bilibilili><li>哔哩哔哩 (゜-゜)つロ 干杯~-bilibilili><li>哔哩哔哩 (゜-゜)つロ 干杯~-bilibilili><li>哔哩哔哩 (゜-゜)つロ 干杯~-bilibilili><li>哔哩哔哩 (゜-゜)つロ 干杯~-bilibilili>ul>div>div><style>:root {--device-width: 770px;--device-height: 300vh;--ui-width: 640px;font-size: 15px;}#iphone {height: 800vh}#ui {position: sticky;top: 30%;left: 50%;}#ui ul li {display: block;width: var(--ui-width);height: 30px;margin: 10px auto;padding-bottom: 10px;border-bottom: 1px solid #222;transform: ranslateY(calc(-60px * (1 - var(--progress))));opacity: var(--progress);}style><script>const rows = document.querySelectorAll('#ui ul li')const html = document.documentElementdocument.addEventListener('scroll', (e) => {let scrolled = html.scrollTop / (html.scrollHeight - html.clientHeight)let total = 1 / rows.lengthfor (let [index, row] of rows.entries()) {let start = total * indexlet end = total * (index + 1)let progress = (scrolled - start) / (end - start)if (progress >= 1) progress = 1if (progress <= 0) progress = 0row.style.setProperty('--progress', progress)}})script>
body>html>
效果图
对你有帮助，给个星星被
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！