https://github.com/luisvinicius167/gliojs
Exit popup easely. Detects if the mouse of a user leaves the viewport borders of your website
https://github.com/luisvinicius167/gliojs
Last synced: about 2 months ago
JSON representation
Exit popup easely. Detects if the mouse of a user leaves the viewport borders of your website
- Host: GitHub
- URL: https://github.com/luisvinicius167/gliojs
- Owner: luisvinicius167
- Created: 2015-12-29T01:26:28.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-05-02T14:08:45.000Z (about 9 years ago)
- Last Synced: 2025-03-29T22:08:54.903Z (2 months ago)
- Language: JavaScript
- Homepage: http://luisvinicius167.github.io/gliojs/
- Size: 90.8 KB
- Stars: 436
- Watchers: 18
- Forks: 29
- Open Issues: 5
-
Metadata Files:
- Readme: README-PT.md
Awesome Lists containing this project
README
# glio
Detecte se o mouse do usuário for para as bordas do viewport/documento de seu site ou sair dele, e quando isso acontecer, dispare um callback.
Ver Demo.
17+ ✔
14+ ✔
9+ ✔
17+ ✔
5+ ✔
#### Razões para uso:
* Aumentar suas taxas de conversão!
* Dar aos visitantes razões para ficar!
* Atrair a atenção de seus usuários!
#### Cases:
* Se você estiver usando o gliojs em seu projeto, divulgue aqui.
#### Artigos sobre Exit-Popups:
* 7 Best Practices for Using Exit-Intent Popovers, Popups
* 5 Scientific Reasons Exit Popups Are So Freaking Effective
### Como instalar:
* Npm: ``` npm install gliojs ```
* Bower ``` bower install gliojs ```
Importe a biblioteca `glio.min.js` que está na pasta `dist` dentro do seu site ``````
#### Uso:
Os argumentos são passados como um Array, onde o primeiro argumento dentro do array é a direção e o segundo é o callback. Você pode colocar até 5 arrays com cada posição dentro do método init.
```glio( [ direction, callback ] )```.
#### Direções:
* top
* top-left
* top-right
* bottom-left
* bottom-right
#### Exemplos:
* Direção top-left e top-right
```
glio.init(
[ 'top-left', function () {
alert('this is top-left');
}
],
[ 'top-right', function () {
alert('this is top-right');
}
]
);
```
* Todas as direções
```
glio.init(
[ 'top', function () {
alert('this is top.');
}
],
[ 'top-left', function () {
alert('this is top-left');
}
],
[ 'top-right', function () {
alert('this is top-right');
}
],
[ 'bottom-left', function () {
alert('this is bottom-left');
}
],
[ 'bottom-right', function () {
alert('this is bottom-right');
}
]
);
```
#### Configurações:
```glio.config.key = value;``` Registre as configurações antes do método init.
* screenWidthFragment: a quantidade de partes que a largura da tela será dividida. Valor padrão: 12.
* centerTopHeight: altura da direção 'top'. Quando o mouse do usuário tiver a altura menor ou igual a esse valor, o callback será disparado. Padrão: 10.
* heightTopLeft: altura da direção 'top-left'. Quando o mouse do usuário tiver a altura menor ou igual a esse valor, o callback será disparado. Padrão: 30.
* heightTopRight: altura da direção 'top-right'. Quando o mouse do usuário tiver a altura menor ou igual a esse valor, o callback será disparado. Padrão: 30.
MIT license.