Форум

miltorg · #1 (**permalink**) 22.01.2023, 00:44

Нужна бегущая строка.

Код:

.news {
  animation : slide 5s linear infinite reverse;
  
}

@keyframes slide {
  0% {
    transform: translatex(-170%)
  }

  100% {
    transform: translatex(100%)
  }
}

Решаю с помощью этого кода. Но строки для бегущей строки - разного размера.

Получается что если короткая строка - то всё пропадает. А если длинная - то не доходит до конца.

Проблему бы решило изменение стиля:

transform: translatex(-170%)

Но как к нему подобраться?

Спасибо большое.

рони · #2 (**permalink**) 22.01.2023, 07:23

miltorg,
как создать новостную ленту

miltorg · #3 (**permalink**) 22.01.2023, 16:07

Я ожидал ответ:

document.querySelector(".news").style.animation = "200%"; //- это не работает

рони · #4 (**permalink**) 22.01.2023, 17:59

Сообщение от miltorg

Но как к нему подобраться?

https://developer.mozilla.org/ru/docs/Web/CSS/var
https://developer.mozilla.org/en-US/...on/setProperty

miltorg · #5 (**permalink**) 22.01.2023, 18:12

Сообщение от рони

https://developer.mozilla.org/ru/docs/Web/CSS/var
https://developer.mozilla.org/en-US/...on/setProperty

Пожалуйста не пишите мне больше. Ваши ссылки - ни о чём.

рони · #6 (**permalink**) 22.01.2023, 18:15

miltorg,

@keyframes slide {
  0% {
    transform: translatex(var(--max, -170%))
  }

  100% {
    transform: translatex(100%)
  }
}

let newMax = '-100%';
document.querySelector(".news").style.setProperty('--max', newMax);

voraa · #7 (**permalink**) 22.01.2023, 18:30

Сообщение от miltorg

Пожалуйста не пишите мне больше. Ваши ссылки - ни о чём.

Ну ссылка https://developer.mozilla.org/en-US/...on/setProperty как раз очень "О ЧЕМ"
Зная устройство таблицы стилей можно добраться до любого свойства.
Например этот код

<head>
<style id=st>
.news {
  animation : slide 5s linear infinite reverse;
  
}

@keyframes slide {
  0% {
    transform: translatex(-170%)
  }

  100% {
    transform: translatex(100%)
  }
}
</style>
</head>
<body>
<script>
	const st=document.getElementById ('st')
	st.sheet.cssRules[1][0].style.transform = 'translatex(-100%)'
	console.log(st)
</script>
</body>

меняет
0% {
transform: translatex(-170%)
}
на
0% {
transform: translatex(-100%)
}

Все можно изменить, если знать внутреннее устройство

miltorg · #8 (**permalink**) 22.01.2023, 19:04

Сообщение от рони

miltorg,

@keyframes slide {
  0% {
    transform: translatex(var(--max, -170%))
  }

  100% {
    transform: translatex(100%)
  }
}

let newMax = '-100%';
document.querySelector(".news").style.setProperty('--max', newMax);

О чудо! Это работает!

Спасибо вам

Форум

Справочник

Discord чат

Курсы javascript