Как объединить draggable с анимацией бегущей строчки?
Сначала на сайте одно из меню должно было быть бегущей строчкой с паузой при наведении.
Выглядело это приблизительно вот так
Для чего сбоку настройки слик, которые не действуют - через 2 абзаца ниже.
Но клиенты хотят чтобы строчка еще и таскалась, как draggable в slick slider, и на мобильных девайсах на таче оно в виде первой анимации не останавливалось.
Я решил сделать сликом, на кодпене оно должно было быть с ним.,но там что-то не подключается jQuery
at t (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js:2:27330)" undefined |
at t (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js:2:27330)" undefined
Когда я выбираю подключить jQuery - что через настройки на кодпене, что ссылкой вот такое сообщение.
Как сейчас - вот на самом сайте
А сами настройки слика на кодпене, хоть они там и не действуют.
Да и slidesToShow там по сути для галочки, нужные стили все-таки берут верх, можно не обращать внимание на этот показатель, я не буду его исправлять, пусть так и будет.
Оно сейчас на сайте таскается, но анимация на аутоплее нам с клиентами не очень нравится. Первая была плавная, а на слике аутоплей дергается. Хотелось бы старую анимацию бегущей строчки как на кодпене, но чтобы таскалось как на слике.
Я закомментировал свойства сейчас на сайте
.track { /* position: absolute!important; animation: marquee 45s linear infinite; */ } .track:hover{ -moz-animation-play-state: paused; -webkit-animation-play-state: paused; animation-play-state: paused; } |
.track { /* position: absolute!important; animation: marquee 45s linear infinite; */ } .track:hover{ -moz-animation-play-state: paused; -webkit-animation-play-state: paused; animation-play-state: paused; }
Потому что если раскомментировать, то работает не корректно.
Пробовал сделать так, чтобы animation: marquee 45s linear infinite была не закомментирована, но на ховере чтобы
.track:hover{ animation: unset; } |
.track:hover{ animation: unset; }
Тоже не то, что надо - оно останавливается и резко становится на начальную точку, а не на ту, на которую навели на паузе.
Как можно чтобы были свойства слика, но с первоначальной анимацией бегущей строчки?
Дополнительно:
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для объединения функциональности draggable и анимации бегущей строки вам потребуется использовать JavaScript и CSS.
Прежде всего, создайте HTML элемент, который будет содержать ваш текст, который будет бегать. Например:
<div class="running-text" id="draggable">Your running text goes here</div>
Затем добавьте стили для этого элемента:
.running-text { position: absolute; white-space: nowrap; overflow: hidden; animation: run-text 5s linear infinite; } @keyframes run-text { from { transform: translateX(100%); } to { transform: translateX(-100%); } }
Теперь добавьте возможность перетаскивания элемента с помощью jQuery UI:
$(function() { $("#draggable").draggable(); });$(function() { $("#draggable").draggable(); });
Теперь у вас должен быть элемент, который можно перетаскивать и который будет анимироваться как бегущая строка. Поместите этот код в ваш проект и настройте стили и параметры анимации по вашему усмотрению.
Надеюсь, это поможет вам объединить draggable и анимацию бегущей строки на вашем веб-сайте!