Yasuyuki Enomoto blivesta

## 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) { }

## doorman-multiple.js
const elements = document.querySelectorAll('[data-doorman]');
Array.prototype.forEach.call(elements, function (el) {
  const doorman = new Doorman(el, { /* options */ });
  doorman.start();
});

## doorman-id.js
const element = document.querySelector('#doorman');
const doorman = new Doorman(element, { /* options */ });
doorman.start();

## doorman.css
[data-doorman] {
  visibility: hidden;
}

## syntax-monokai.css
.highlight {
  padding: 9px 14px;
  margin-bottom: 14px;
  background-color: #f7f7f9;
  border: 1px solid #e1e1e8;
  border-radius: 4px;
}
.highlight pre {
  padding: 0;
  margin-top: 0;

## 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
    }

## 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;

## chaffle-options.js
var chaffle  = new Chaffle(el, {
  lang: 'en', // default: 'en'
  // 'en' || 'ja' || 'ja-hiragana' || 'ja-katakana' || 'ua'
  speed: 20, // default: 20
  delay: 100, // default: 100
});

## chaffle-mouseover.js
// Example: mouseover

import Chaffle from 'chaffle'

const elements = document.querySelectorAll('[data-chaffle]');
Array.prototype.forEach.call(elements, function (el) {
  const chaffle = new Chaffle(el, { /* options */ });
  el.addEventListener('mouseover', function () {
    chaffle.init();
  });

## chaffle.js
var elements = document.querySelectorAll('[data-chaffle]');
Array.prototype.forEach.call(elements, function (el) {
  var chaffle = new Chaffle(el, { /* options */ });
  chaffle.init();
});
	{
	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) { }
	const elements = document.querySelectorAll('[data-doorman]');
	Array.prototype.forEach.call(elements, function (el) {
	const doorman = new Doorman(el, { /* options */ });
	doorman.start();
	});
	const element = document.querySelector('#doorman');
	const doorman = new Doorman(element, { /* options */ });
	doorman.start();
	.highlight {
	padding: 9px 14px;
	margin-bottom: 14px;
	background-color: #f7f7f9;
	border: 1px solid #e1e1e8;
	border-radius: 4px;
	}
	.highlight pre {
	padding: 0;
	margin-top: 0;
	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
	}
	<!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;
	var chaffle = new Chaffle(el, {
	lang: 'en', // default: 'en'
	// 'en' \|\| 'ja' \|\| 'ja-hiragana' \|\| 'ja-katakana' \|\| 'ua'
	speed: 20, // default: 20
	delay: 100, // default: 100
	});
	// Example: mouseover

	import Chaffle from 'chaffle'

	const elements = document.querySelectorAll('[data-chaffle]');
	Array.prototype.forEach.call(elements, function (el) {
	const chaffle = new Chaffle(el, { /* options */ });
	el.addEventListener('mouseover', function () {
	chaffle.init();
	});
	var elements = document.querySelectorAll('[data-chaffle]');
	Array.prototype.forEach.call(elements, function (el) {
	var chaffle = new Chaffle(el, { /* options */ });
	chaffle.init();
	});