Как сделать эффект прокрутки значений из массива?

Question

organica @organica

Как сделать эффект прокрутки значений из массива?

Господа, направьте на путь истинный:
Имеется два Массива

massive1:['A','B'],
massive2:['1','2'],

Далее имеется условная строка, из 4 символов, каждый из которых принимает случайное значение одного из элементов массива.
Каким образом сделать так, чтобы при появлении этой самой строки, каждый из символов прокручивался по типу барабана, перебирая значения из массива, с которого он принимает значение? Про Odometer знаю, но он воспринимает только числа, а буквы нет.

Вопрос задан более трёх лет назад
73 просмотра

3 комментария

Подписаться 1 Простой 3 комментария

Kovalsky @lazalu68

https://github.com/lambda2/text-roller

Написано более трёх лет назад

organica @organica Автор вопроса

Никита Полевой, К живому проекту из дома доступа нет, пробую на голой болванке, не работает. Не подскажешь куда копать?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <link rel="stylesheet" href="https://raw.github.com/HubSpot/odometer/master/themes/odometer-theme-default.css" />
    <script src="./textroller.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="roller" class="textroller">Banana</div>

    <script>
        var elt         = document.getElementById("roller");
        var texts       = ["muffin", "cookie","pancake"];
        elt.textroller  = new TextRoller({
            el: elt,
            values: texts,    // an array of texts.     default : [el.innerHtml]
            align: "left",    // right, left or middle. default : middle
            delay: 5000,      // in milliseconds,       default : 5000
            loop: true       // at the end, restart.   default : true
        });
      </script>
</body>
</html>

Написано более трёх лет назад

Kovalsky @lazalu68

organica, не, ты чо, я вообще не представляю что это такое и как работает. Я просто погуглил odometer for letters, увидел этот форк, и послал. Если нужен живой пример, то можно глянуть на офе, или гуглить что-то типа "text-roller jsfiddle"

Написано более трёх лет назад

Помогут разобраться в теме Все курсы

Яндекс Практикум

Фронтенд-разработчик

10 месяцев

Далее
Skillbox

JavaScript

3 месяца

Далее
Нетология

Fullstack-разработчик на Python + нейросети

20 месяцев

Далее

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

+1 ещё

Простой
Как сделать сложную виртуализацию?
- 1 подписчик
- час назад
- 33 просмотра
0

ответов
HTML

+1 ещё

Средний
В какую сторону копать решение чтобы решить проблему с наложением?
- 1 подписчик
- 2 часа назад
- 25 просмотров
0

ответов
HTML

+1 ещё

Простой
Как растянуть вложенный блок внутри других блоков на максимальную длину, но не более чем на ширину страницы?
- 1 подписчик
- вчера
- 61 просмотр
0

ответов
CSS

Простой
Как сверстать кастомную пунктирную обводку у блока?
- 1 подписчик
- 17 нояб.
- 176 просмотров
2

ответа
JavaScript

Простой
В цикле for много кнопок как сделать .addEventListener('click', к каждой кнопке?
- 1 подписчик
- 16 нояб.
- 250 просмотров
3

ответа
CSS

Простой
Можно ли использовать функцию calc() в медиазапросах?
- 1 подписчик
- 13 нояб.
- 199 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как получить события VK.VideoPlayer используя JS?
- 1 подписчик
- 11 нояб.
- 142 просмотра
1

ответ
CSS

+1 ещё

Простой
Как оптимизировать svg картинку?
- 1 подписчик
- 11 нояб.
- 170 просмотров
1

ответ
JavaScript

+1 ещё

Сложный
Почему зависает виджет в OBS?
- 1 подписчик
- 10 нояб.
- 189 просмотров
0

ответов
JavaScript

Простой
Смещение группы в fabric.js?
- 1 подписчик
- 06 нояб.
- 135 просмотров
0

ответов
Показать ещё Загружается…

Fullstack Разработчик (Next.js / JavaScript / TypeScript)

App Company

от 200 000 до 300 000 ₽

React разработчик

ITK academy • Нижний Новгород

от 50 000 до 90 000 ₽

Frontend Developer (React + Node.js)

Alfabet Service

от 1 000 до 2 000 $

Никита Полевой, К живому проекту из дома доступа нет, пробую на голой болванке, не работает. Не подскажешь куда копать?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="https://raw.github.com/HubSpot/odometer/master/themes/odometer-theme-default.css" /> <script src="./textroller.js"></script> <title>Document</title> </head> <body> <div id="roller" class="textroller">Banana</div> <script> var elt = document.getElementById("roller"); var texts = ["muffin", "cookie","pancake"]; elt.textroller = new TextRoller({ el: elt, values: texts, // an array of texts. default : [el.innerHtml] align: "left", // right, left or middle. default : middle delay: 5000, // in milliseconds, default : 5000 loop: true // at the end, restart. default : true }); </script> </body> </html>
organica, не, ты чо, я вообще не представляю что это такое и как работает. Я просто погуглил odometer for letters, увидел этот форк, и послал. Если нужен живой пример, то можно глянуть на офе, или гуглить что-то типа "text-roller jsfiddle"

Как сделать эффект прокрутки значений из массива?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт