{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Привет друг ! В этой статье попробуем разобраться каким образом мы можем создать элемент, который будет показывать прогресс (скролл) прочтения станицы \uD83E\uDD14.","type":"unstyled","key":"483sl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"И так - поехали !\uD83D\uDEFC","type":"unstyled","key":"14b9t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":0,"style":"BOLD"}],"text":"1. Создадим болванку:","type":"header-three","key":"k8ef"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"export const App = () => {\n return (\n

bla-bla

\n )\n};","type":"blockquote","key":"8m093"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":33,"style":"ITALIC"}],"text":"Не гоже в ручную копипастить тег

, доверимся всецело JS.","type":"unstyled","key":"6h7j7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const paragraphs = Array.from({ length: 50 }, (_, index) => (\n

bla - bla {index + 1}

\n));","type":"blockquote","key":"74a4n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":28,"style":"ITALIC"},{"length":2,"offset":58,"style":"ITALIC"},{"length":11,"offset":75,"style":"ITALIC"}],"text":"В разметке добавим еще один div (в будущем наша полосочка), над переменной paragraphs.","type":"unstyled","key":"e3rq5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"return (\n

\n {paragraphs}\n

\n)","type":"blockquote","key":"2v0qb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":2,"offset":0,"style":"BOLD"}],"text":"2. Накидаем стилей:","type":"header-three","key":"5h945"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"App.module.css:\n.appContainer {\n text-align: center;\n padding-top: 20px;\n\n .progressBar {\n position: fixed;\n top: 0;\n left: 0;\n height: 4vh;\n background-color: #4caf50;\n width: 100%;\n transform-origin: 0 50%;\n }\n}","type":"blockquote","key":"ama0e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подключаем стили, и видим, что полоска есть - но анимации нет. ","type":"unstyled","key":"4r1di"},{"data":{"image":{"id":"6766e526c24e643b26adc366"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ну ты понял)","type":"atomic:image","key":"eovih"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":89,"offset":128}],"inlineStyleRanges":[{"length":2,"offset":16,"style":"ITALIC"},{"length":7,"offset":40,"style":"ITALIC"},{"length":11,"offset":49,"style":"ITALIC"},{"length":20,"offset":108,"style":"ITALIC"}],"text":"Можно подкинуть JS, и не забыть сделать return в useEffect. Но мы попробуем иначе, на помощь к нам приходит animation-timeline: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline#browser_compatibility","type":"unstyled","key":"jnec"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":0,"style":"BOLD"},{"length":10,"offset":11,"style":"ITALIC"},{"length":29,"offset":44,"style":"ITALIC"}],"text":"3. Создаём keyframes и подкидываем свойство animation-timeline: scroll():","type":"header-three","key":"5e52e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".appContainer {\n text-align: center;\n padding-top: 20px;\n\n .progressBar {\n position: fixed;\n top: 0;\n left: 0;\n height: 4vh;\n background-color: goldenrod;\n width: 100%;\n transform-origin: 0 50%;\n animation: line-progress linear;\n animation-timeline: scroll();\n }\n}\n\n@keyframes line-progress {\n from {\n transform: scaleX(0);\n }\n to {\n transform: scaleX(1);\n }\n}","type":"blockquote","key":"e7u32"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":52,"offset":11}],"inlineStyleRanges":[],"text":"И вуаля \uD83E\uDE84: https://dzen.ru/video/watch/6766e6b885b2cb7bf707e1ba","type":"unstyled","key":"85r8s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4. Итоговый код:","type":"header-three","key":"b5pbi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import s from './App.module.css'\n\nexport const App = () => {\n const paragraphs = Array.from({ length: 50 }, (_, index) => (\n

bla - bla {index + 1}

\n ));\n\n return (\n

\n {paragraphs}\n

\n )\n};","type":"blockquote","key":"49f4e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".appContainer {\n text-align: center;\n padding-top: 20px;\n\n .progressBar {\n position: fixed;\n top: 0;\n left: 0;\n height: 4vh;\n background-color: goldenrod;\n width: 100%;\n transform-origin: 0 50%;\n animation: line-progress linear;\n animation-timeline: scroll();\n }\n}\n\n@keyframes line-progress {\n from {\n transform: scaleX(0);\n }\n to {\n transform: scaleX(1);\n }\n}","type":"blockquote","key":"8k02g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"},{"length":3,"offset":5,"style":"ITALIC"},{"length":48,"offset":27,"style":"ITALIC"}],"text":"P.S. IDE что там ругается: Experimental: This is an experimental technology, а вот и причина:","type":"unstyled","key":"ffm6m"},{"data":{"image":{"id":"6766e86b33e6ea36ad4d2b8f"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Так, что ждём лисичку. И пока яблочко разродиться )","type":"atomic:image","key":"192ou"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ну вот собственно и всё \uD83D\uDE80\uD83D\uDE80\uD83D\uDE80.","type":"unstyled","key":"b9i2d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Спасибо за внимание! До Новых Встреч!\uD83E\uDD17\uD83E\uDD17\uD83E\uDD17","type":"unstyled","key":"fagd4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"c8zduYh6zQVJmn1rd2IK"}],"entityMap":{"0":{"data":{"url":"https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline#browser_compatibility"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"badSeoLink":"true","url":"https://dzen.ru/video/watch/6766e6b885b2cb7bf707e1ba"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}