Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.01.2023, 00:44
Кандидат Javascript-наук
Отправить личное сообщение для miltorg Посмотреть профиль Найти все сообщения от miltorg
 
Регистрация: 19.09.2019
Сообщений: 135

Как изменить стиль анимации?
Нужна бегущая строка.

Код:
.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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

miltorg,
как создать новостную ленту
Ответить с цитированием
  #3 (permalink)  
Старый 22.01.2023, 16:07
Кандидат Javascript-наук
Отправить личное сообщение для miltorg Посмотреть профиль Найти все сообщения от miltorg
 
Регистрация: 19.09.2019
Сообщений: 135

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

document.querySelector(".news").style.animation = "200%"; //- это не работает
Ответить с цитированием
  #4 (permalink)  
Старый 22.01.2023, 17:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от miltorg
Но как к нему подобраться?
https://developer.mozilla.org/ru/docs/Web/CSS/var
https://developer.mozilla.org/en-US/...on/setProperty
Ответить с цитированием
  #5 (permalink)  
Старый 22.01.2023, 18:12
Кандидат Javascript-наук
Отправить личное сообщение для miltorg Посмотреть профиль Найти все сообщения от miltorg
 
Регистрация: 19.09.2019
Сообщений: 135

Сообщение от рони Посмотреть сообщение
https://developer.mozilla.org/ru/docs/Web/CSS/var
https://developer.mozilla.org/en-US/...on/setProperty
Пожалуйста не пишите мне больше. Ваши ссылки - ни о чём.
Ответить с цитированием
  #6 (permalink)  
Старый 22.01.2023, 18:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064


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

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


let newMax = '-100%';
document.querySelector(".news").style.setProperty('--max', newMax);
Ответить с цитированием
  #7 (permalink)  
Старый 22.01.2023, 18:30
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,692

Сообщение от 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%)
}

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

Последний раз редактировалось voraa, 22.01.2023 в 19:02.
Ответить с цитированием
  #8 (permalink)  
Старый 22.01.2023, 19:04
Кандидат Javascript-наук
Отправить личное сообщение для miltorg Посмотреть профиль Найти все сообщения от miltorg
 
Регистрация: 19.09.2019
Сообщений: 135

Сообщение от рони Посмотреть сообщение

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

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


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

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

Спасибо вам
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как можно изменить параметр объявленной константы, не перезаписывая её? accountnujen Общие вопросы Javascript 0 26.01.2022 02:13
как отследить данные, из поля ввода Блондинка Общие вопросы Javascript 41 30.04.2021 16:55
как убрать кнопку, чтобы скрипт срабатывал при потере фокуса поля ввода? Блондинка Общие вопросы Javascript 24 26.04.2021 16:57
Как избежать полосы прокрутки при анимации Bizon4ik Общие вопросы Javascript 4 21.06.2014 13:51
ActionScript - как изменить значение soundbuftime? Маэстро Flash 6 14.01.2012 15:08