Css acceleration curve math

[Guest]

I can't for the life of me figure this...

 

I need to set a left position value that is at 0 when the window width is 1000px and increase that number as the window gets wider to 1280px.

I think I need to find a way to write an acceleration curve based on window side but I can't figure a way to access that. 

My algorithm should look something like 

left: calc( pow (window width, 10) );

Or something like this? Obviously that math is incorrect 

or maybe I just need a standard way to have something increase steadily and dynamically based on screen width.

 

I'm styling a cumbersome webpage that loads resources from a lot of different teams so I can't do things nicely. 

 

Basically I need to have something stick to the left side of the window and when I change the screen size, as I get to 1280 the object moves to the right. 

As I get to 1000, the object moves to the left and sometimes off the screen. 

 

Using VW hasn't worked. 

It'll only work for a specific resolution 

[Vicarian]

Try media queries?

@media screen and (max-width: 1000px) {
  .some-selector {
    left: 0px;
  }
}

@media screen and (max-width: 1280px) {
  .some-selector {
    left: 100px;
  }
}

Otherwise you'll have to do this with JS, which would be pretty slow.

[Guest]

5 minutes ago, Vicarian said:

Try media queries?

@media screen and (max-width: 1000px) {
  .some-selector {
    left: 0px;
  }
}

@media screen and (max-width: 1280px) {
  .some-selector {
    left: 100px;
  }
}

Otherwise you'll have to do this with JS, which would be pretty slow.

I am using them. 

I have them for 4 resolution ranges.

Up to 760px wide

760 to 1k

1k to 1280

1280+

 

 

Every group has a working set of css styles that work for anything in that range but the 1k to 1280 media query scales differently to how the other resolutions scale or something

[wasab]

Not really sure what you meant without seeing a screen capture. 

[hirushaadi]

On 1/14/2023 at 1:19 AM, fpo said:

I can't for the life of me figure this...

 

I need to set a left position value that is at 0 when the window width is 1000px and increase that number as the window gets wider to 1280px.

I think I need to find a way to write an acceleration curve based on window side but I can't figure a way to access that. 

My algorithm should look something like 

left: calc( pow (window width, 10) );

Or something like this? Obviously that math is incorrect 

or maybe I just need a standard way to have something increase steadily and dynamically based on screen width.

 

I'm styling a cumbersome webpage that loads resources from a lot of different teams so I can't do things nicely. 

 

Basically I need to have something stick to the left side of the window and when I change the screen size, as I get to 1280 the object moves to the right. 

As I get to 1000, the object moves to the left and sometimes off the screen. 

 

Using VW hasn't worked. 

It'll only work for a specific resolution 

 

 

maybe try this?

 

left: 0;

@media screen and (min-width: 1000px) {
  left: calc((100vw - 1000px) / 2);
}

@media screen and (min-width: 1280px) {
  left: calc((100vw - 1280px) / 2);
}

 

change the values inside the `calc()` to what you want