动态文章时间线 – 有爱前端

<!doctype html> <html> <head> <meta charset="utf-8"> <title>动态文章时间线 (ES6)-sbkko.com</title> <script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <style> body { background-color: #FFFFFF; margin: 0; width: 100vw; height: 400vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; overflow-x: hidden; font-family: "Lato"; } * { box-sizing: border-box; } img { width: 300px; } h1 { font-family: "Montserrat"; text-transform: uppercase; position: relative; } h1::before { content: ""; position: absolute; left: -86px; top: 3px; width: 15px; height: 15px; border: 6px solid #ccc; border-radius: 50%; z-index: 11; background-color: #fff; } h1.active::before { border-color: #2c3e50; -webkit-animation-name: pulse; animation-name: pulse; -webkit-animation-duration: 250ms; animation-duration: 250ms; -webkit-animation-delay: 0ms; animation-delay: 0ms; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } main { position: relative; width: 100%; height: 100%; } header { width: 100%; height: 100vh; position: relative; z-index: 10; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: #2c3e50; color: #fff; font-family: "Montserrat"; font-size: 30px; text-transform: uppercase; letter-spacing: 10px; } article { padding: 50px 150px; } article::before, article::after { position: fixed; left: 75px; top: 0; width: 5px; content: ""; z-index: 9; } article::before { height: 100vh; background-color: #ccc; } article::after { height: 50vh; background-color: #2c3e50; } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } 50% { -webkit-transform: scale(1.5, 1.5); transform: scale(1.5, 1.5); } 100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } } @keyframes pulse { 0% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } 50% { -webkit-transform: scale(1.5, 1.5); transform: scale(1.5, 1.5); } 100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } } </style> </head> <body> <main> <header>向下滚动</header> <article> <section> <h1>Title</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu volutpat odio facilisis mauris sit. Cursus sit amet dictum sit amet justo donec. Sed ullamcorper morbi tincidunt ornare massa. Dolor sit amet consectetur adipiscing elit. Lacus sed turpis tincidunt id aliquet. Vivamus arcu felis bibendum ut tristique et egestas quis. Quis lectus nulla at volutpat diam ut venenatis tellus. Dolor sed viverra ipsum nunc aliquet bibendum enim. Sed euismod nisi porta lorem mollis aliquam. Ultricies lacus sed turpis tincidunt. Hac habitasse platea dictumst vestibulum. Maecenas accumsan lacus vel facilisis. Ullamcorper sit amet risus nullam eget felis eget nunc lobortis. Sed sed risus pretium quam vulputate. Aenean et tortor at risus viverra adipiscing at in. A cras semper auctor neque.</p> <p>Cras adipiscing enim eu turpis egestas pretium aenean. Nulla facilisi etiam dignissim diam quis enim. Nec ultrices dui sapien eget mi proin sed. Sed ullamcorper morbi tincidunt ornare massa eget egestas. Nec dui nunc mattis enim ut tellus. Pellentesque nec nam aliquam sem et. Ac turpis egestas sed tempus urna et. Ipsum nunc aliquet bibendum enim facilisis gravida neque convallis a. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Maecenas ultricies mi eget mauris.</p> <p>Purus in mollis nunc sed. Turpis egestas sed tempus urna et. Sit amet risus nullam eget felis eget. At tellus at urna condimentum mattis pellentesque id nibh tortor. Id diam vel quam elementum pulvinar etiam non quam lacus. Nec sagittis aliquam malesuada bibendum arcu. Enim diam vulputate ut pharetra sit amet. Lacus sed turpis tincidunt id aliquet risus feugiat in ante. Pellentesque massa placerat duis ultricies. Quisque id diam vel quam elementum pulvinar etiam non quam. Cras tincidunt lobortis feugiat vivamus at augue eget. Nisl nisi scelerisque eu ultrices vitae auctor eu augue ut. Condimentum lacinia quis vel eros donec ac odio tempor. Proin nibh nisl condimentum id venenatis a condimentum. Proin sed libero enim sed. Cras tincidunt lobortis feugiat vivamus at augue eget arcu.</p> <p>Ullamcorper dignissim cras tincidunt lobortis. Diam phasellus vestibulum lorem sed. Pharetra pharetra massa massa ultricies mi quis hendrerit dolor magna. In nibh mauris cursus mattis. Risus viverra adipiscing at in tellus integer feugiat scelerisque varius. Tempor nec feugiat nisl pretium fusce id velit ut. Odio eu feugiat pretium nibh ipsum consequat. Scelerisque varius morbi enim nunc faucibus a pellentesque sit amet. Ultricies mi eget mauris pharetra et ultrices. Non pulvinar neque laoreet suspendisse interdum. Sed elementum tempus egestas sed sed risus pretium quam. Condimentum id venenatis a condimentum vitae. Neque convallis a cras semper auctor neque.</p> <p>Lacus vel facilisis volutpat est. Quam quisque id diam vel quam elementum pulvinar. Ullamcorper eget nulla facilisi etiam dignissim diam quis enim. Lectus vestibulum mattis ullamcorper velit sed. Faucibus pulvinar elementum integer enim neque. Quam quisque id diam vel quam elementum pulvinar. Donec adipiscing tristique risus nec. Tincidunt praesent semper feugiat nibh. Volutpat odio facilisis mauris sit amet massa. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim. Euismod nisi porta lorem mollis aliquam ut porttitor leo. Ut tortor pretium viverra suspendisse potenti.</p> </section> <section> <h1>Title</h1> <p>Ultricies mi quis hendrerit dolor magna eget est lorem ipsum. Elementum curabitur vitae nunc sed velit. Dis parturient montes nascetur ridiculus mus. Sit amet nisl purus in. Dictumst quisque sagittis purus sit amet volutpat. Justo nec ultrices dui sapien eget mi proin sed. Magna sit amet purus gravida. Rhoncus urna neque viverra justo nec ultrices dui sapien. Nam aliquam sem et tortor consequat id. Tortor consequat id porta nibh venenatis. Eget felis eget nunc lobortis mattis aliquam faucibus purus in. Rutrum quisque non tellus orci. Nibh tellus molestie nunc non blandit massa enim nec. Et netus et malesuada fames ac turpis egestas integer. Arcu vitae elementum curabitur vitae nunc sed velit dignissim. Aliquet nec ullamcorper sit amet risus nullam eget felis. Quam viverra orci sagittis eu.</p> <p>Sagittis purus sit amet volutpat consequat. Sapien nec sagittis aliquam malesuada bibendum arcu vitae. Orci eu lobortis elementum nibh tellus molestie nunc non blandit. Lectus mauris ultrices eros in cursus. Mattis aliquam faucibus purus in massa tempor. Viverra orci sagittis eu volutpat odio facilisis mauris sit amet. Fermentum odio eu feugiat pretium nibh ipsum consequat nisl. Mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan tortor. Amet facilisis magna etiam tempor orci eu lobortis. In fermentum et sollicitudin ac orci phasellus egestas tellus rutrum. Elit duis tristique sollicitudin nibh sit amet commodo nulla. Malesuada pellentesque elit eget gravida cum sociis. Faucibus purus in massa tempor nec. Quam viverra orci sagittis eu. </p> </section> <section> <h1>Title</h1> <p>Facilisi morbi tempus iaculis urna id volutpat lacus laoreet non. Lacus vestibulum sed arcu non odio euismod lacinia. Eget gravida cum sociis natoque. Dolor sed viverra ipsum nunc aliquet bibendum enim. Quam pellentesque nec nam aliquam. Ac turpis egestas maecenas pharetra convallis posuere morbi leo. Facilisi nullam vehicula ipsum a arcu cursus vitae. Urna neque viverra justo nec ultrices dui. Imperdiet proin fermentum leo vel orci. At lectus urna duis convallis convallis tellus id interdum velit. Aliquet sagittis id consectetur purus ut.</p> <p>In hac habitasse platea dictumst quisque. Neque viverra justo nec ultrices dui sapien eget mi proin. Risus sed vulputate odio ut enim blandit volutpat maecenas. Arcu dictum varius duis at consectetur lorem. In nibh mauris cursus mattis molestie a iaculis at. Lacus viverra vitae congue eu consequat ac felis donec et. Non odio euismod lacinia at quis risus sed vulputate odio. Consectetur adipiscing elit ut aliquam purus sit amet luctus venenatis. A scelerisque purus semper eget duis at. Scelerisque varius morbi enim nunc faucibus a pellentesque. Risus viverra adipiscing at in tellus. Erat imperdiet sed euismod nisi porta lorem mollis aliquam. Ornare lectus sit amet est. Interdum velit laoreet id donec ultrices tincidunt arcu non sodales. Placerat vestibulum lectus mauris ultrices eros in cursus turpis. Amet commodo nulla facilisi nullam vehicula ipsum a arcu. Accumsan tortor posuere ac ut consequat semper viverra nam libero. Placerat in egestas erat imperdiet sed euismod.</p> <p>Non quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor. In nulla posuere sollicitudin aliquam. Nibh praesent tristique magna sit amet purus gravida quis. Elementum integer enim neque volutpat ac. Arcu ac tortor dignissim convallis aenean. Ullamcorper eget nulla facilisi etiam. Aliquet risus feugiat in ante metus. Interdum velit euismod in pellentesque massa placerat duis ultricies lacus. Lacus vestibulum sed arcu non. Dui faucibus in ornare quam viverra orci sagittis. Donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu. Facilisis volutpat est velit egestas dui id ornare. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend.</p> <p>Senectus et netus et malesuada. Id interdum velit laoreet id donec ultrices tincidunt. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus aenean. Quam lacus suspendisse faucibus interdum. Nulla facilisi etiam dignissim diam quis. Gravida in fermentum et sollicitudin ac orci phasellus egestas tellus. Amet nulla facilisi morbi tempus iaculis urna id volutpat lacus. Odio pellentesque diam volutpat commodo sed egestas egestas. Sit amet risus nullam eget felis eget nunc. Nulla pellentesque dignissim enim sit amet. Enim eu turpis egestas pretium. Sit amet cursus sit amet dictum sit amet justo. Arcu vitae elementum curabitur vitae nunc sed velit dignissim. Neque laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt. Metus dictum at tempor commodo ullamcorper.</p> </section> <section> <h1>Title</h1> <p>Aenean euismod elementum nisi quis eleifend quam adipiscing vitae proin. Amet porttitor eget dolor morbi non arcu risus. Magna fermentum iaculis eu non diam phasellus. Senectus et netus et malesuada fames ac. Magna fermentum iaculis eu non diam. Id semper risus in hendrerit gravida rutrum quisque. Eget mauris pharetra et ultrices neque. Urna condimentum mattis pellentesque id. Aenean sed adipiscing diam donec adipiscing. Amet consectetur adipiscing elit duis. Eu lobortis elementum nibh tellus molestie nunc. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus. Ut sem viverra aliquet eget sit amet tellus cras. Magna ac placerat vestibulum lectus mauris ultrices eros. Sed libero enim sed faucibus turpis in. Donec enim diam vulputate ut pharetra sit. Purus in massa tempor nec feugiat nisl. At erat pellentesque adipiscing commodo elit at.</p> <p>Fermentum posuere urna nec tincidunt praesent semper feugiat. Bibendum arcu vitae elementum curabitur vitae nunc. Est ante in nibh mauris cursus mattis. Non quam lacus suspendisse faucibus. Imperdiet dui accumsan sit amet nulla facilisi. Neque gravida in fermentum et sollicitudin ac orci phasellus egestas. Sed egestas egestas fringilla phasellus faucibus scelerisque. Aliquam purus sit amet luctus venenatis lectus magna fringilla urna. Amet luctus venenatis lectus magna fringilla urna. Urna id volutpat lacus laoreet non curabitur gravida arcu ac. Sagittis purus sit amet volutpat consequat mauris nunc. Sapien faucibus et molestie ac feugiat sed lectus vestibulum. Eu facilisis sed odio morbi. Neque ornare aenean euismod elementum nisi quis eleifend. Dolor sit amet consectetur adipiscing. Odio ut sem nulla pharetra. Consectetur adipiscing elit duis tristique sollicitudin nibh. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. Eget mauris pharetra et ultrices neque. Nisi lacus sed viverra tellus in.</p> <p>Integer feugiat scelerisque varius morbi enim nunc faucibus a. Nulla aliquet enim tortor at auctor urna. Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra. Hac habitasse platea dictumst quisque sagittis purus sit amet. Quis viverra nibh cras pulvinar mattis nunc sed blandit. Enim nunc faucibus a pellentesque sit amet porttitor eget dolor. Magna etiam tempor orci eu lobortis. Facilisi etiam dignissim diam quis enim. Lorem dolor sed viverra ipsum nunc aliquet bibendum. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. Adipiscing vitae proin sagittis nisl rhoncus mattis. Nisl vel pretium lectus quam. Leo duis ut diam quam nulla porttitor massa id neque. Accumsan lacus vel facilisis volutpat est velit egestas dui id. In est ante in nibh mauris cursus mattis molestie. Sollicitudin tempor id eu nisl nunc. Pellentesque id nibh tortor id aliquet lectus. Volutpat maecenas volutpat blandit aliquam.</p> </section> <section> <h1>Title</h1> <p>Sit amet consectetur adipiscing elit ut aliquam. Tempor commodo ullamcorper a lacus vestibulum sed arcu non. Quisque egestas diam in arcu. In hendrerit gravida rutrum quisque non. Diam maecenas sed enim ut sem. Magna fringilla urna porttitor rhoncus dolor purus non. Ut consequat semper viverra nam libero. Amet purus gravida quis blandit turpis cursus in hac. Rhoncus mattis rhoncus urna neque viverra. Sit amet tellus cras adipiscing enim eu. Donec ultrices tincidunt arcu non sodales neque sodales ut. Imperdiet massa tincidunt nunc pulvinar sapien. Mauris nunc congue nisi vitae suscipit tellus mauris a diam. Morbi tristique senectus et netus et malesuada fames. Turpis egestas maecenas pharetra convallis posuere. Diam volutpat commodo sed egestas egestas fringilla phasellus. Egestas pretium aenean pharetra magna ac placerat vestibulum lectus mauris. Tempor commodo ullamcorper a lacus vestibulum sed arcu non.</p> <p>Cursus vitae congue mauris rhoncus aenean vel. Cum sociis natoque penatibus et magnis dis. Nec sagittis aliquam malesuada bibendum arcu vitae elementum. Urna molestie at elementum eu facilisis sed odio morbi. Senectus et netus et malesuada fames ac. Turpis tincidunt id aliquet risus feugiat. Elementum nisi quis eleifend quam adipiscing vitae proin sagittis. Libero volutpat sed cras ornare arcu. Mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien. Ac turpis egestas integer eget aliquet nibh praesent tristique. Scelerisque felis imperdiet proin fermentum leo vel orci. Convallis convallis tellus id interdum velit laoreet id.</p> <p>Amet porttitor eget dolor morbi non arcu risus quis varius. Mattis enim ut tellus elementum sagittis vitae et. Non diam phasellus vestibulum lorem sed risus ultricies. Convallis posuere morbi leo urna molestie at elementum eu facilisis. Dolor sit amet consectetur adipiscing elit duis tristique sollicitudin nibh. Diam maecenas ultricies mi eget. Gravida cum sociis natoque penatibus et magnis. Et ultrices neque ornare aenean euismod elementum nisi quis eleifend. Eu mi bibendum neque egestas congue quisque egestas. Viverra ipsum nunc aliquet bibendum enim facilisis. Phasellus vestibulum lorem sed risus.</p> <p>Metus vulputate eu scelerisque felis imperdiet proin. Elementum pulvinar etiam non quam lacus suspendisse faucibus interdum posuere. Dui accumsan sit amet nulla. Egestas maecenas pharetra convallis posuere morbi leo urna molestie. Nunc eget lorem dolor sed viverra ipsum nunc. Dignissim suspendisse in est ante in nibh mauris cursus. Facilisis gravida neque convallis a cras semper auctor. Sagittis vitae et leo duis ut. Ornare lectus sit amet est. Dui ut ornare lectus sit amet est placerat in. Habitant morbi tristique senectus et netus. Libero nunc consequat interdum varius sit amet mattis vulputate. Quam vulputate dignissim suspendisse in est ante in. Sed lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. Mi proin sed libero enim sed faucibus turpis in. Sit amet luctus venenatis lectus magna. Dui accumsan sit amet nulla facilisi. Sit amet aliquam id diam maecenas ultricies mi eget mauris.</p> </section> <section> <h1>Title</h1> <p>Feugiat vivamus at augue eget arcu dictum varius duis at. Blandit aliquam etiam erat velit scelerisque in dictum non consectetur. Semper quis lectus nulla at volutpat diam ut. Condimentum lacinia quis vel eros donec ac. Pretium viverra suspendisse potenti nullam ac tortor vitae purus. Auctor augue mauris augue neque gravida in fermentum et. Sagittis aliquam malesuada bibendum arcu. Netus et malesuada fames ac turpis egestas integer eget. Morbi tincidunt ornare massa eget egestas purus. Egestas diam in arcu cursus euismod quis viverra nibh cras. Cursus sit amet dictum sit amet. Amet commodo nulla facilisi nullam vehicula ipsum a arcu. Aliquet lectus proin nibh nisl condimentum id. Id semper risus in hendrerit gravida rutrum quisque non tellus.</p> <p>Metus aliquam eleifend mi in nulla posuere sollicitudin. Est velit egestas dui id ornare arcu. Nisl rhoncus mattis rhoncus urna neque viverra justo. Dui faucibus in ornare quam viverra orci. Fringilla urna porttitor rhoncus dolor purus non. Tempus quam pellentesque nec nam aliquam sem et tortor. Tempus imperdiet nulla malesuada pellentesque elit eget gravida. Ultrices vitae auctor eu augue ut lectus arcu. Mattis rhoncus urna neque viverra justo nec ultrices dui. Vitae congue mauris rhoncus aenean vel. Pulvinar sapien et ligula ullamcorper malesuada proin libero. Rutrum tellus pellentesque eu tincidunt tortor.</p> </section> </article> </main> <script> const nodes = Array.from(document.getElementsByTagName("h1")); const cache = { viewport: {}, rects: [] }; // init document.addEventListener("DOMContentLoaded", init); function init() { // update the cache and check scroll position recache(); // throttle the scroll callback for performance document.addEventListener("scroll", throttle(scrollCheck, 10)); // debounce the resize callback for performance window.addEventListener("resize", debounce(recache, 50)); }; // update the cache and check scroll position function recache() { // cache the viewport dimensions cache.viewport = { width: window.innerWidth, height: window.innerHeight }; // cache node dimensions because we don't really want to // call getBoundingClientRect() during scroll - even when throttled nodes.forEach((node, i) => { cache.rects[i] = rect(node); }); scrollCheck(); } // check whether a node is at or above the horizointal halfway mark function scrollCheck() { // instead of relying on calling getBoundingClientRect() everytime, // let's just take the cached value and subtract the pageYOffset value // and see if the result is at or above the horizontal midline of the window const offset = getScrollOffset(); const midline = cache.viewport.height * 0.5; cache.rects.forEach((rect, i) => { nodes[i].classList.toggle("active", rect.y - offset.y < midline); }); }; // get the scroll offsets function getScrollOffset() { return { x: window.pageXOffset, y: window.pageYOffset }; }; // throttler function throttle(fn, limit, context) { let wait; return function() { context = context || this; if (!wait) { fn.apply(context, arguments); wait = true; return setTimeout(function() { wait = false; }, limit); } }; }; // debouncer function debounce(fn, limit, u) { let e; return function() { const i = this; const o = arguments; const a = u && !e; clearTimeout(e), (e = setTimeout(function() { (e = null), u || fn.apply(i, o); }, limit)), a && fn.apply(i, o); }; } // getBoundingClientRect with offsets function rect(e) { const o = getScrollOffset(); const r = e.getBoundingClientRect(); return { x: r.left + o.x, y: r.top + o.y }; };</script> </body> </html>

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

转载请注明：有爱前端 » 动态文章时间线