При маштабировании некоректно отображается анимация?

Question

При маштабировании некоректно отображается анимация белого овала, сползает вниз на текст или наоборот не доходит до конца линии. Подскажите что делаю не так? Спасибо

https://jsfiddle.net/koeyqasf/41/

.main-block__scroll {
  position: relative;
  background-color: #161616;
  height: 100vh;
  margin: 0 auto;
}

.main-block__image {
  position: absolute;
  top: 0;
  left: 0;
  height: 24px;
  width: 16px;
  border-radius: 50%;
  background-color: #ffffff;
  z-index: 2;
  animation: line 4s linear infinite alternate;
}

.main-block__line {
  display: flex;
  border: 1px solid #3e3e3e;
  background: #3e3e3e;
  height: 75px;
  position: absolute;
  top: 50%;
  left: 7px;
  z-index: 1;
}

.main-block__line span {
  position: absolute;
  top: 100%;
  left: -8px;
  writing-mode: vertical-lr;
  transform: rotate(-180deg);
  font-weight: 400;
  font-size: 12px;
  line-height: 15px;
  color: #ffffff;
  height: 25px;
  margin: 8px 0px 0px 0px;
  z-index: 2;
}

@keyframes line {
  0% {
    top: 50%;
  }

  50% {
    top: 65%;
  }

  100% {
    top: 50%;
  }
}

<div class="main-block__scroll">
  <div class="main-block__image"></div>
  <div class="main-block__line"><span>scroll</span></div>
</div>

Answer 1

Вы пытаетесь перемещать объект на относительную высоту в процентах. Так как контейнер имеет высоту 100vh (высота экрана), то при изменении высоты этого экрана, Вы также заставляете меняться высоту (через свойство top), на которую нужно переместить объект.

Ваша линия имеет высоту 75px, позиция линии = 50% от высоты контейнера, размер объекта = 24px. Соответственно, необходимо переместить объект на 50% + 75px + 24px и вернуть обратно. Делается это через функцию calc: top: calc(50% + 75px + 24px).

.main-block__scroll {
  position: relative;
  background-color: #161616;
  height: 100vh;
  margin: 0 auto;
}

.main-block__image {
  position: absolute;
  top: 0;
  left: 0;
  height: 24px;
  width: 16px;
  border-radius: 50%;
  background-color: #ffffff;
  z-index: 2;
  animation: line 4s linear infinite alternate;
}

.main-block__line {
  display: flex;
  border: 1px solid #3e3e3e;
  background: #3e3e3e;
  height: 75px;
  position: absolute;
  top: 50%;
  left: 7px;
  z-index: 1;
}

.main-block__line span {
  position: absolute;
  top: 100%;
  left: -8px;
  writing-mode: vertical-lr;
  transform: rotate(-180deg);
  font-weight: 400;
  font-size: 12px;
  line-height: 15px;
  color: #ffffff;
  height: 25px;
  margin: 8px 0px 0px 0px;
  z-index: 2;
}

@keyframes line {
  0% {
    top: 50%;
  }
  50% {
    top: calc(50% + 75px - 24px);
  }
  100% {
    top: 50%;
  }
}

<div class="main-block__scroll">
  <div class="main-block__image"></div>
  <div class="main-block__line"><span>scroll</span></div>
</div>

БЛОГ НА HUSL

При маштабировании некоректно отображается анимация?

Ответы (1 шт):