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

Question

organica @organica

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

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

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

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

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

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"

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

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

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

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

Войти через центр авторизации

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

HTML

+2 ещё

Простой
Django не могу правильно настроить шаблон?
- 1 подписчик
- 2 часа назад
- 42 просмотра
1

ответ
HTML

+1 ещё

Простой
Как кодировать кириллицу в поле data?
- 1 подписчик
- 2 часа назад
- 31 просмотр
1

ответ
JavaScript

Простой
Как получить metadata аудио на IOS?
- 1 подписчик
- 3 часа назад
- 20 просмотров
0

ответов
HTML

+1 ещё

Простой
Как в теге select один символ сделать другого цвета?
- 1 подписчик
- 8 часов назад
- 79 просмотров
1

ответ
CSS

Простой
Как уместить кроссбраузерную поддержку в одну строку?
- 1 подписчик
- 8 часов назад
- 91 просмотр
1

ответ
HTML

+1 ещё

Простой
Как поставить элементы в одну строку и выровнять их?
- 1 подписчик
- 23 часа назад
- 76 просмотров
1

ответ
CSS

+1 ещё

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

ответ
JavaScript

+2 ещё

Простой
Как отобразить массив из элементов?
- 1 подписчик
- вчера
- 96 просмотров
0

ответов
HTML

+2 ещё

Простой
Как подкрасить 2 блока в разные цвета по всей ширине в дочернем Blade-шаблоне?
- 1 подписчик
- вчера
- 57 просмотров
2

ответа
HTML

+2 ещё

Средний
Неправильное отображение верстки во всех браузерах локально на компьютере, в чем может быть проблема?
- 1 подписчик
- вчера
- 76 просмотров
1

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

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

summer • Ярославль

от 100 000 до 140 000 ₽

Junior JavaScript Developer

КРАФТТЕК • Санкт-Петербург

от 60 000 до 80 000 ₽

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

вАйТи

от 5 000 до 25 000 ₽

Скопировать сайт

19 апр. 2024, в 17:06

15000 руб./за проект

Поправить пхп скрипт

19 апр. 2024, в 16:53

1000 руб./за проект

Требуется настройка Яндекс Директа

19 апр. 2024, в 16:45

5000 руб./за проект

Никита Полевой, К живому проекту из дома доступа нет, пробую на голой болванке, не работает. Не подскажешь куда копать?
<!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"

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

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

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

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