View doorman-options.html
<div
data-doorman-direction="lr"
data-doorman-bgColor="rgb(000, 000, 000)"
data-doorman-duration="300"
data-doorman-delay="150"
data-doorman-easing="cubic-bezier(0.860, 0.000, 0.070, 1.000)"
data-doorman-reverse="flase"
>
Content...
</div>
View doorman-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) { }
View doorman-with-scrollmonitor.html
<style>
.section {
height: 100vh;
}
[data-doorman] {
display: inline-block;
visibility: hidden;
}
</style>
View doorman-multiple.js
const elements = document.querySelectorAll('[data-doorman]');
Array.prototype.forEach.call(elements, function (el) {
const doorman = new Doorman(el, { /* options */ });
doorman.start();
});
View doorman-id.js
const element = document.querySelector('#doorman');
const doorman = new Doorman(element, { /* options */ });
doorman.start();
View doorman.html
<div data-doorman>Welcome</div>
View doorman.css
[data-doorman] {
visibility: hidden;
}
View doorman-Install-global.html
<script src="umd/doorman.min.js"></script>
<!-- OR CDN -->
<script src="https://unpkg.com/@blivesta/doorman/umd/doorman.min.js"></script>
View svgIcon.js
import React from 'react'
class SvgIcon extends React.Component {
static get propTypes () {
return {
className: React.PropTypes.string,
iconName: React.PropTypes.string,
viewBox: React.PropTypes.string
}
View simple-drawer.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
* {
margin: 0;
position: 0;