1

Это анимация маятника, довольно кривая, но всё же. Надо, чтобы можно было регулировать длину нити маятника, и следовательно, его период колебания. Но пока ничего не получается. Или, если у вас на чердаке завалялся код маятника, который можно подстроить под условие-прошу.

:root {
  --num-primary: 3s;
  /*обявление переменной, т.к. в строчку ЭТУ тоже не получалось передать параметр, из-за количества параметров.*/
}

.test {
  height: 400px;
  width: 10px;
  background-color: lightgreen;
  display: inline-block;
  margin: 100px 400px;
  transform-origin: center top;
}

.anim2 {
  animation: oscil2 var(--num-primary) infinite; //ЭТА строчка, где регулируется период колебания
}

@keyframes oscil2 {
  from {
    transform: rotate(0deg);
    animation-timing-function: ease-out;
  }
  25% {
    transform: rotate(50deg);
    animation-timing-function: ease-in;
  }
  50% {
    transform: rotate(0deg);
    animation-timing-function: ease-out;
  }
  75% {
    transform: rotate(-50deg);
    animation-timing-function: ease-in;
  }
  to {
    transform: rotate(0deg);
  }
}
<div class="test anim2"></div>

<input type='number' id='number' value="50" oninput=" --num-primary.style.root = ${this.value}s;">
<!-- А эта строчка вводимое значение передаёт в css, в переменную, с помощью неё я уже изменял длину. -->

1
  • Вы же на js можете изменять параметры класса в том числе и длину вашего маятника.
    – KordDEM
    4 фев 2022 в 21:02

2 ответа 2

3

Устроит?

Я вам кстати оказывается уже помогал с решением подобного вопроса. Не осилили? Можете спросить, что именно не понятно, мне помочь не сложно.

.test {
  height: 400px;
  width: 10px;
  background-color: lightgreen;
  display: inline-block;
  margin: 100px 400px;
  transform-origin: center top;
}

.anim2 {
  animation-duration: 3s;
  animation-name: oscil2;
  animation-iteration-count: infinite;
}

@keyframes oscil2 {
  from {
    transform: rotate(0deg);
    animation-timing-function: ease-out;
  }
  25% {
    transform: rotate(50deg);
    animation-timing-function: ease-in;
  }
  50% {
    transform: rotate(0deg);
    animation-timing-function: ease-out;
  }
  75% {
    transform: rotate(-50deg);
    animation-timing-function: ease-in;
  }
  to {
    transform: rotate(0deg);
  }
}
<div>
  <label>Высота</label>
  <input type='number' value="400" oninput="anim.style.height = `${this.value}px`;"> px
</div>
<br>
<div>
  <label>Время</label>
  <input type='number' value="3" oninput="anim.style.animationDuration = `${this.value}s`;"> сек
</div>

<div class="test anim2" id="anim"></div>

1
  • О, спасибо! Мы тебя скоро в список участников школьного проекта добавим) И Твой первый ответ мы поняли и воспользовались, но второй раз он не работал. Сейчас будем смотреть почему. 6 фев 2022 в 14:29
1

"Передать" переменную можно изменив элемент стиля например:

function line(lengthLine){
    $('.test').css('height',lengthLine+'px');
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.