IGitSylvia/keion-ticker

A marquee element K-On! style. Yes, marquee is still alive… or a zombie at this point.

Anyway, how to use

Include keion-ticker.js in <body>
Include keion-ticker.css in <head>
Use the API (below)

API

This code should be below .js include.

var kt = new KeionTicker({
  el: document.getElementById('kt'),
  separator: ' ― ',
  speed: '30s', // CSS time notation
  msgs: ['Message 1', 'Message 2'],
  keion: 'mio', // available: azusa, mio, mugi, yui, random or custom image URL
});

kt.start(); // .pause() or .stop();

// advanced:
KeionTicker.ImgRoot = 'https://cdn.com/keion-ticker/' // change root of image src

Done!

Note: Every property except keion is required.

Kami-sama bless all Keions around the world. 🙏

To-Do

Remove optional rules from CSS

Acknowledgements

Reset CSS animation

About

K-On! ticker (usable widget)

https://dogancelik.com/keion-ticker/

Languages

Language:JavaScript 86.3%Language:CSS 13.7%