https://github.com/blivesta/doorman

Simple animation for revealing elements.
https://github.com/blivesta/doorman

animation effect es6 javascript umd

Last synced: about 2 months ago
JSON representation

Simple animation for revealing elements.

• Host: GitHub
• URL: https://github.com/blivesta/doorman
• Owner: blivesta
• Created: 2017-01-29T11:55:10.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-04-05T15:46:45.000Z (over 7 years ago)
• Last Synced: 2024-10-13T15:51:13.772Z (2 months ago)
• Topics: animation, effect, es6, javascript, umd
• Language: JavaScript
• Homepage: http://git.blivesta.com/doorman/
• Size: 46.9 KB
• Stars: 37
• Watchers: 3
• Forks: 5
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Doorman

[![npm version](https://img.shields.io/npm/v/doorman-effect.svg?style=flat-square)](https://www.npmjs.com/package/doorman-effect)

[![Build Status](https://img.shields.io/travis/blivesta/doorman/master.svg?style=flat-square)](https://travis-ci.org/blivesta/doorman)

> Simple animation for revealing elements.

## Demo

http://git.blivesta.com/doorman/

## Install

```html

```

CDN

```html

```

npm

```html

$ npm install doorman-effect

```

```js

const Doorman = require('doorman-effect');

```

## Usage

css

```css

[data-doorman] {

	visibility: hidden;

}

```

html

```html

...

...

```

### Call the Doorman

```js

const elements = document.querySelector('#doorman');

const doorman = new Doorman(elements, { /* options */ });

doorman.start();

```

Use with multiple selectors.

```js

const elements = document.querySelectorAll('[data-doorman]');

Array.prototype.forEach.call(elements, function (el) {

  const doorman = new Doorman(el, { /* options */ });

  doorman.start();

});

```

Example to use with [scrollmonitor](https://github.com/stutrek/scrollMonitor)

```html

.section {

  height: 100vh;

}

[data-doorman] {

	visibility: hidden;

}



  section1





  section2





  section3



  const sections = [

    document.getElementById('section1'),

    document.getElementById('section2'),

    document.getElementById('section3')

  ]

  Array.prototype.forEach.call(sections, (section) => {

    const elementWatcher = scrollMonitor.create(section, -200)

    elementWatcher.enterViewport(() => {

      const elements = section.querySelectorAll('[data-doorman]')

      Array.prototype.forEach.call(elements, (el) => {

        const doorman = new Doorman(el)

        doorman.start()

      })

      elementWatcher.destroy()

    })

  })

```

## Options

```js

{

  direction: 'lr',

	// lr (left to right) || rl (right to left) || tb (top to bottom) || bt (bottom to top).

  bgColor: 'rgb(000, 000, 000)',

  duration: '300', // ms

  delay: '0', // ms

  easing: 'cubic-bezier(0.860, 0.000, 0.070, 1.000)', // easeInOutQuint

  reverse: false,

  begin: function (element) {},

  complete: function (element) {}

}

```

```html



  Content...



```


## Browsers

- Chrome

- Firefox

- IE11+

- Safari

## License

Released under the MIT license.