Is there a way to attach numerical values to CSS in order to generate a timeline effect?

Question

Is there a way to attach numerical values to CSS in order to generate a timeline effect?

My goal is to arrange div elements on a timeline based on an array of floats ranging from 0 to 1. The idea is to have the elements positioned along the timeline according to these float values, with 0 representing the beginning and 1 indicating the end.

 let events = [0, 0.25, 0.5, 1]

I am working with AngularCLI and thinking that using *NgFor to iterate through my list might be a good approach. However, placing CSS elements in the correct proportions using the values in my array seems to be a challenge.

Here's a visual representation of what I am aiming for:

https://i.sstatic.net/dQUBU.png

html css angular

Answer 1

Answer №1

If you're looking to get started, consider using a setup like this (check out the demonstration on Stackblitz):

https://i.sstatic.net/OGroV.png

template

<div #containerDiv class="container">
    <hr>
    <div *ngFor="let pos of [0,0.25,0.5,1]" 
        [ngStyle]="{'left.px': _getStyle(containerDiv,pos)}" 
        class="black-ball-container">
        <div>{{pos}}</div>
        <div class="black-ball">
        </div>
    </div>
</div>

typescript

_getStyle($div: HTMLDivElement, pos: number) {
  const rect: DOMRect | ClientRect = $div.getBoundingClientRect();

  return `${pos * rect.width}`;
}

scss

$height: 10px;

.container {
  position: relative;
  display: flex;
  align-items: flex-end;

  max-width: 100%;

  hr {
    position: absolute;
    left: 0;
    bottom: $height/4;
    margin: 0;
    margin-bottom: $height/2;
    border: 1px solid;

    width: 100%;
  }

  .black-ball-container {
    position: absolute;

    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .black-ball {
    height: $height;
    width: $height;
    background-color: black;
    border-radius: $height;
    border: 3px solid white;
  }
}

Additionally, there has been an update with improvements available on Stackblitz

Answer 2

If you're looking to get started, consider using a setup like this (check out the demonstration on Stackblitz):

https://i.sstatic.net/OGroV.png

template

<div #containerDiv class="container">
    <hr>
    <div *ngFor="let pos of [0,0.25,0.5,1]" 
        [ngStyle]="{'left.px': _getStyle(containerDiv,pos)}" 
        class="black-ball-container">
        <div>{{pos}}</div>
        <div class="black-ball">
        </div>
    </div>
</div>

typescript

_getStyle($div: HTMLDivElement, pos: number) {
  const rect: DOMRect | ClientRect = $div.getBoundingClientRect();

  return `${pos * rect.width}`;
}

scss

$height: 10px;

.container {
  position: relative;
  display: flex;
  align-items: flex-end;

  max-width: 100%;

  hr {
    position: absolute;
    left: 0;
    bottom: $height/4;
    margin: 0;
    margin-bottom: $height/2;
    border: 1px solid;

    width: 100%;
  }

  .black-ball-container {
    position: absolute;

    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .black-ball {
    height: $height;
    width: $height;
    background-color: black;
    border-radius: $height;
    border: 3px solid white;
  }
}

Additionally, there has been an update with improvements available on Stackblitz

Is there a way to attach numerical values to CSS in order to generate a timeline effect?

Answer №1

template

typescript

scss

Similar questions

Generating a .png image using the data received from the client [node]

Differences between HTML viewports and media queries

Dynamic stacking of buttons in response to user navigation choices

typescript code may not display a preview image

Enhance the code for updating the content within a div element

Displaying information collected from a submission form

Getting the value of the chosen option from one component and passing it to another component in Angular 8

Update the styling of buttons in CSS to feature a unique frame color other

Looking to execute a service method within an authguard service?

What steps can be taken to troubleshoot the npm start problem?

Why does Asp.net Webform load twice every time I click on the form link?

Looking to verify the functionality of the router.navigate method when employing relativeTo?

The product image does not display any other images

Is there a way to create a 100% height effect using divs instead of tables exclusively with CSS?

JavaScript refuses to connect with HTML

Showcasing diverse content with an Angular Dropdown Menu

JavaScript functions cannot be applied to input fields in jQuery

Tips for displaying the date of a JSON response in Angular HTML format?

When you zoom in or out, HTML5 elements styled with CSS will dynamically adjust

Creating visually appealing website designs with Firefox by implementing smooth background image transitions using Javascript with