Scroll progress animations in CSS.🚀

Crafting a Dynamic Scroll-Tracking Blog Post with HTML and CSS

Creating a visually engaging blog post that also provides user feedback through dynamic elements like a progress bar can significantly enhance the reading experience. Here’s a breakdown of how you can achieve this using HTML and CSS.

1. The HTML Structure

<div class="progress"></div>
<div class="container">
  <h1>Anonymous scroll timeline</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Commodo viverra maecenas
    accumsan lacus. Orci sagittis eu volutpat odio facilisis mauris. Eu nisl
    nunc mi ipsum faucibus vitae aliquet nec. Amet nisl purus in mollis nunc
    sed. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam.
    Lorem sed risus ultricies tristique nulla. Commodo sed egestas egestas
    fringilla phasellus faucibus. Semper eget duis at tellus at urna condimentum
    mattis pellentesque. Porta lorem mollis aliquam ut porttitor leo a diam. At
    lectus urna duis convallis convallis tellus id interdum velit. Placerat orci
    nulla pellentesque dignissim enim sit amet venenatis urna. Rutrum tellus
    pellentesque eu tincidunt tortor. Nulla facilisi cras fermentum odio eu
    feugiat. Aliquet risus feugiat in ante metus. Quis imperdiet massa tincidunt
    nunc pulvinar sapien et. Vel pharetra vel turpis nunc.
  </p>
  <p>
    Potenti nullam ac tortor vitae purus. Tempor orci dapibus ultrices in
    iaculis nunc sed augue. Adipiscing elit duis tristique sollicitudin nibh.
    Luctus accumsan tortor posuere ac ut consequat semper. Enim nulla aliquet
    porttitor lacus. Netus et malesuada fames ac. Aliquam ultrices sagittis orci
    a scelerisque. Fringilla phasellus faucibus scelerisque eleifend donec
    pretium vulputate sapien. Nibh praesent tristique magna sit amet purus
    gravida quis. Mi proin sed libero enim sed faucibus turpis in eu. Natoque
    penatibus et magnis dis parturient montes nascetur ridiculus. Pellentesque
    elit ullamcorper dignissim cras tincidunt lobortis. Nunc faucibus a
    pellentesque sit amet porttitor eget dolor. Luctus accumsan tortor posuere
    ac ut. Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper
    velit. Ac odio tempor orci dapibus ultrices in iaculis nunc sed.
  </p>
  <p>
    Molestie ac feugiat sed lectus vestibulum mattis. Elementum curabitur vitae
    nunc sed velit dignissim sodales ut. Netus et malesuada fames ac turpis
    egestas sed tempus. Viverra nam libero justo laoreet sit amet cursus sit
    amet. Maecenas sed enim ut sem viverra aliquet eget. Et netus et malesuada
    fames ac turpis egestas maecenas pharetra. Imperdiet proin fermentum leo vel
    orci porta. Nunc eget lorem dolor sed viverra ipsum nunc aliquet. Facilisis
    mauris sit amet massa vitae. Cras semper auctor neque vitae. Adipiscing diam
    donec adipiscing tristique risus. Scelerisque eu ultrices vitae auctor eu.
    Adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna. Egestas
    quis ipsum suspendisse ultrices gravida. Semper quis lectus nulla at
    volutpat diam. Egestas congue quisque egestas diam in arcu.
  </p>
  <p>
    Est velit egestas dui id ornare arcu odio ut sem. Tortor consequat id porta
    nibh venenatis. Proin sagittis nisl rhoncus mattis rhoncus urna neque. Porta
    non pulvinar neque laoreet suspendisse interdum. Lacus vel facilisis
    volutpat est velit egestas dui. Facilisi morbi tempus iaculis urna id
    volutpat. Venenatis urna cursus eget nunc scelerisque viverra. Ultrices
    gravida dictum fusce ut. Eu augue ut lectus arcu. Orci dapibus ultrices in
    iaculis. Rhoncus mattis rhoncus urna neque viverra justo nec ultrices. Odio
    eu feugiat pretium nibh ipsum consequat. Accumsan in nisl nisi scelerisque
    eu ultrices vitae. Nunc faucibus a pellentesque sit. Ultricies integer quis
    auctor elit sed vulputate mi. Nulla aliquet enim tortor at auctor urna nunc
    id cursus.
  </p>
  <p>
    Integer enim neque volutpat ac tincidunt vitae semper. Condimentum lacinia
    quis vel eros donec ac odio tempor orci. Imperdiet dui accumsan sit amet
    nulla facilisi morbi tempus. Suspendisse potenti nullam ac tortor vitae. Non
    sodales neque sodales ut. Elementum eu facilisis sed odio. Aliquet nec
    ullamcorper sit amet risus nullam eget felis eget. Diam phasellus vestibulum
    lorem sed risus ultricies tristique. Facilisis sed odio morbi quis. Diam
    quis enim lobortis scelerisque fermentum dui faucibus. Ullamcorper dignissim
    cras tincidunt lobortis feugiat vivamus at augue eget. Platea dictumst
    vestibulum rhoncus est pellentesque elit ullamcorper dignissim.
  </p>
</div>

HTML Explanation

1. Progress Bar Div:

   <div class="progress"></div>

• This creates a fixed position progress bar at the top of the viewport.

1. Container Div:

   <div class="container">

• This contains the main content of the blog post.

1. Heading and Paragraphs:

   <h1>Anonymous scroll timeline</h1>
   <p> ... </p>

• The heading introduces the blog post, and multiple paragraphs provide the content.

2. The CSS Styling

* {
  box-sizing: border-box;
}

body {
  font-family: "Helvetica", sans-serif;
  line-height: 1.6;
  min-height: 300vh;
  margin: 0;
  font-size: clamp(1rem, 1rem + 1vw, 1.5rem);
}

h1 {
  line-height: 1.25;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: clamp(1rem, 2vw, 5rem);
}

.progress {
  height: 1rem;
  background: blue;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  transform-origin: 0 50%;
  animation: scaleProgress auto linear;
  animation-timeline: scroll(root);
}

@keyframes scaleProgress {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

CSS Explanation

1. Global Styles:

   * {
     box-sizing: border-box;
   }

• Ensures consistent box-sizing for all elements.

1. Body Styling:

   body {
     font-family: "Helvetica", sans-serif;
     line-height: 1.6;
     min-height: 300vh;
     margin: 0;
     font-size: clamp(1rem, 1rem + 1vw, 1.5rem);
   }

• Sets the body font, line height, minimum height, and responsive font size.

1. Heading Styling:

   h1 {
     line-height: 1.25;
   }

• Adjusts the heading line height for better readability.

1. Container Styling:

   .container {
     max-width: 800px;
     margin: 0 auto;
     padding: clamp(1rem, 2vw, 5rem);
   }

• Sets a maximum width, centers the container, and adds responsive padding.

1. Progress Bar Styling:

   .progress {
     height: 1rem;
     background: blue;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     transform-origin: 0 50%;
     animation: scaleProgress auto linear;
     animation-timeline: scroll(root);
   }

• Styles the progress bar to be fixed at the top, spanning the full width of the viewport, with an animation that tracks the scroll progress.

1. Keyframes for Progress Bar Animation:

   @keyframes scaleProgress {
     0% {
       transform: scaleX(0);
     }
     100% {
       transform: scaleX(1);
     }
   }

• Defines the animation for the progress bar, scaling its width from 0% to 100% as the user scrolls.

Conclusion

This simple yet effective setup creates a dynamic blog post that visually engages readers with a scroll-tracking progress bar. By understanding each component, you can easily customize and extend this template for your specific needs.