BandeiraJS

Bandeira is a lightweight JavaScript library for rotating text banners.

---

Contributing

Compile via npm run build.

Installation

Installation is super easy! First make sure, your HTML contains a container to place the banner like this:

<div class="bandeira-container"></div>

If you use Webpack ...

import Bandeira from 'bandeira';
new Bandeira();

... or simply add it to your HTML

<script src="bandeira.min.js"></script>
<script>
    new Bandeira();
</script>

How to use Bandeira

To change the behaviour of your bandeira, you have two options.

1. Pass settings via data-attributes in the HTML
2. Pass settings as an object in the JavaScript

Available options

text | data-bandeira-text (string)
The text to be shown in your Bandeira. Default is "You did not set any text".

separator | data-bandeira-separator (string)
The separator between each text instance of your Bandeira. Default is one space.

selector (string)
The selector of your Bandeira instance. Default is ".bandeira-container".

speed | data-bandeira-speed (number)
The amount of time, one text instance needs to translate by 100% in milliseconds. Default is 5000.

uppercase | data-bandeira-uppercase (boolean)
Boolean if the text should display as capitals or not. Default is true.

ltr | data-bandeira-ltr (boolean)
Boolean if the animation should go from left to right or not. Default is true.

Change options via data-attributes

If you want to change the behaviour directly in the HTML, pass the arguments as data-attributes. Example:

<div class="bandeira-container"
     data-text="This is your rotating text"
     data-speed="5000"></div>

Change options via JavaScript object

To change the behaviour in the JavaScript, pass a settings object like this

const bandeira = new Bandeira({
    text: 'This is your rotating text',
    selector: 'bandeira-container',
    speed: 5000,
});

Methods

pause()
Pause the animation. Bandeira.pause();

play()
Play the animation after pausing it. Bandeira.play();

update()
Destroy your Bandeira and reload it. Bandeira.update();