Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/iliyan-trifonov/blinkmejs
BlinkMeJS is a class for making blinking texts by switching between 2 colors or by using classes. With classes and callback functions one can do more than a blinking text like moving/animating objects, etc.
https://github.com/iliyan-trifonov/blinkmejs
Last synced: about 1 month ago
JSON representation
BlinkMeJS is a class for making blinking texts by switching between 2 colors or by using classes. With classes and callback functions one can do more than a blinking text like moving/animating objects, etc.
- Host: GitHub
- URL: https://github.com/iliyan-trifonov/blinkmejs
- Owner: iliyan-trifonov
- License: mit
- Created: 2012-08-05T18:12:50.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2015-03-14T23:10:03.000Z (almost 10 years ago)
- Last Synced: 2023-03-26T13:57:10.489Z (almost 2 years ago)
- Language: JavaScript
- Homepage:
- Size: 215 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
BlinkMeJS
=========
[](https://gitter.im/iliyan-trifonov/BlinkMeJS?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
Blink a text with style!
Pure JavaScript! No external libs required!
Change text colors, images, transform objects, use multiple options!
BlinkMeJS is a JavaScript library for making blinking texts by switching between 2 colors or by using css class names.
With classes and callback functions one can do more than a blinking text like moving/animating objects, etc.
Examples:
Demo Url: [BlinkMeJS Demo](http://iliyan-trifonov.com/BlinkMeJS/ "BlinkMeJS @ iliyan-trifonov.com")
# The usual way:
html:
```html
Look, Ma'! I'm blinkin'!
```
js:
```js
BlinkMe({ id: 'mahdiv', 'class': 'mahclass', interval: 500 });
```
css:
```css
.mahclass{ background-color: red; }
```
# Use 2 classes to blink a text:
html:
```html
BLINKING 1
```
js:
```js
var blink1 = new BlinkMe({
id: 'blinking_id1',
classes: {normal: 'class_normal', blinked: 'class_blink'}
});
```
css:
```css
.class_normal{
color: silver;
}
.class_blink{
color: magenta;
}
```
# Blink 3 texts with one BlinkMeJS instance:
html:
```html
Similar1 | Similar2 | Similar3
```
js:
```js
var blink4 = BlinkMe({
id: ['similar1', 'similar2', 'similar3'],
colors: {normal: 'yellow', blinked: 'blue'},
interval: 1000
});
```
# Make effects using a couple of BlinkMeJS instances + callback and helper functions:
html:
```/html
eff5 | eff6 | eff7 | eff8
```
js:
```js
var blink9 = new BlinkMe({
'id': 'eff5',
classes: {normal: 'eff2_black', blinked: 'eff2_red'},
interval: 400,
autostart: true,
callback_blinked: blinkme_callback2
});
var blink10 = new BlinkMe({
'id': 'eff6',
classes: {normal: 'eff2_black', blinked: 'eff2_red'},
interval: 400,
autostart: false,
callback_blinked: blinkme_callback2
});
var blink11 = new BlinkMe({
'id': 'eff7',
classes: {normal: 'eff2_black', blinked: 'eff2_red'},
interval: 400,
autostart: false,
callback_blinked: blinkme_callback2
});
var blink12 = new BlinkMe({
'id': 'eff8',
classes: {normal: 'eff2_black', blinked: 'eff2_red'},
interval: 400,
autostart: false,
callback_blinked: blinkme_callback2
});
//callback
function blinkme_callback2(blinker)
{
clearInterval(blinker.text_timer);
if (blinker.params.id == 'eff5')
{
blink10.start_blink();
}
else if (blinker.params.id == 'eff6')
{
blink11.start_blink();
}
else if (blinker.params.id == 'eff7')
{
blink12.start_blink();
}
else if (blinker.params.id == 'eff8')
{
stop_effs2('eff5');
}
}
//additional function for the effect
var eff2_timer = null;
function stop_effs2(id)
{
if (id == 'eff5')
{
eff2_timer = setTimeout(function() {
blink9.stop_blink();
stop_effs2('eff6');
}, 400);
}
else if (id == 'eff6')
{
eff2_timer = setTimeout(function() {
blink10.stop_blink();
stop_effs2('eff7');
}, 400);
}
else if (id == 'eff7')
{
eff2_timer = setTimeout(function() {
blink11.stop_blink();
stop_effs2('eff8');
}, 400);
}
else if (id == 'eff8')
{
eff2_timer = setTimeout(function() {
blink12.stop_blink();
blink9.start_blink();
}, 400);
}
}
```
css:
```css
.eff2_black{
color: black;
}
.eff2_red{
color: red;
}
```