Fill a circle on scroll in CSS

1 thought on “Fill a circle on scroll in CSS”

1. It should be possible to get the required ‘filling’ effect using just CSS.

   We add a pseudo before and a pseudo after element to each of the li elements. These have a radial-gradient background which has a transparent ‘bite’ out at the position of the circles containing the a (anchor) element. Behind the whole thing we put a fixed element which has the ‘fill’ color in the top half and the darker (non-filled) color in the bottom half. This is done by giving it a background image which is a linear gradient.

   The inner divs (inside the anchor elements) are not now needed.

   Here is a snippet to show the idea. CSS variables have been introduced to make it easier to change dimensions if required. (Note: there is redundant CSS in here which could do with tidying up.)

   * {
     margin: 0;
     padding: 0;
     
     --stemw: 5px; /* the width of the stem */
     --circled: 40px; /* the diameter of the circles */
     --lih: 300px; /* the height of each list item */
     --nolis: 5; /* the number of items in the list */
     
     --halfstemw: calc(var(--stemw) / 2);
     --circler: calc(var(--circled) / 2); /* the circle radius */
     --halflih: calc(var(--lih) / 2);
   }
   
   div.bg {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     background-image: linear-gradient(to top, #1f2933 0%, #1f2933 50%, #bed0f7 50%, #bed0f7 100%);
     overflow: hidden;
   }
   
   #my-awesome-nav li {
     position: relative;
   }
   
   #my-awesome-nav li::before, #my-awesome-nav li::after {
     position: absolute;
     transform: translateX(calc(-100% + var(--circler)));
     width: calc(50vw - var(--halfstemw));
     height: var(--lih);
     top: calc(var(--halflih) * -1);
     content: '';
     z-index: -1;
   }
   
   #my-awesome-nav li::before {
     left: 0;
     background: radial-gradient(circle at calc(100% + var(--halfstemw)) calc(50% + var(--circler)), transparent 0%, transparent 3%,  #4c63b6 3%, #4c63b6 100%);
   }
   
   #my-awesome-nav li::after{
     left: calc(50vw + var(--halfstemw));
     background: radial-gradient(circle at calc(var(--halfstemw) * -1) calc(50% + var(--circler)), transparent 0%, transparent 3%,  #4c63b6 3%, #4c63b6 100%);
   }
   
   .header {
     position: relative;
     height: 800px;
     background: blueviolet;
     z-index: 3;
   }
   
   html,
   body {
     margin: 0;
     padding: 0;
   }
   
   body {
     background: #4c63b6;
   }
   
   .container {
     margin: 0px auto;
     position: relative;
   }
   
   /* stem */
   .filling-stem {
     position: sticky;
     z-index: 1;
     float: left;
     top: 0;
     left: 50%;
     transform: translate(-50%, 0);
     height: 50vh;
     width: 5px;
     background-color: #bed0f7;
   }
   
   .stem-background {
     position: absolute;
     z-index: 0;
     left: 50%;
     transform: translate(-50%, 0);
     height: 100%;
     width: 5px;
     background-color: #1f2933;
   }
   
   .stem-nav {
     position: absolute;
     z-index: 2;
     left: 50%;
     transform: translate(-50%, 0);
     height: 100%;
   }
   
   #my-awesome-nav {
     display: flex;
     height: 100%;
     justify-content: space-around;
     flex-direction: column;
     list-style: none;
     margin-left: 0;
     padding-left: 0;
   }
   
   #my-awesome-nav li a {
     width: 40px;
     height: 40px;
     border: solid 3px black;
     border-style: none;
     border-radius: 50%;
     display: inline-block;
     background-color: #1f2933;
     background-color: transparent;
   }
   /*
   #my-awesome-nav li a .color-change {
     height: 40px;
     width: 40px;
     background-color: #1f2933;
     border-radius: 50%;
     background-color: transparent;
   }
   */
   /* timeline */
   .timeline-container {
     position: relative;
   }
   
   .step-container {
     margin: 0 25% 0 25%;
     display: flex;
     align-items: center;
     height: 1500px;
   }
   
   /* footer */
   footer {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 1000px;
     width: 100%;
     background-color: black;
     color: white;
   }

   <div class="bg"></div>
   
   <div class="container">
     <div class="container-inner">
   
       <div class="filling-stem"></div>
       <div class="header"></div>
   
       <div class="timeline-container">
         <div class="timeline-container-inner">
           <div class="stem-background"></div>
           <div class="stem-nav">
             <ul id="my-awesome-nav">
               <li data-index="0"><a href="#step-one">
                 </a></li>
               <li data-index="1"><a href="#step-two">
                 </a></li>
               <li data-index="2"><a href="#step-three">
                 </a></li>
               <li data-index="3"><a href="#step-four">
                 </a></li>
               <li data-index="4"><a href="#step-five">
                 </a></li>
             </ul>
           </div>
           <div class="step-container">
             <div class="step-container-inner">
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
   <footer>
     <p>End of the page</p>
   </footer>

   Footnote: on retina screens I’ve occasionally seen a faint line between the pseudo elements – I think it’s where the positioning calculations come at part of a CSS pixel (which on a high res screen may mean a screen pixel is ‘left behind’). It’s probably necessary to make the pseudo elements 1 CSS pixel higher to overlap the next one to give a continuous effect to the background.

   Reply