Javascript

【Javascript】要素を表示する際のシンプルなアニメーションDoorman

April 6, 2017
Doorman

Doormanは要素を明らかにするシンプルなアニメーション。

Usage

Install

<script src="umd/doorman.min.js"></script>
<!-- OR CDN -->
<script src="https://unpkg.com/doorman-effect/umd/doorman.min.js"></script>

CSS

[data-doorman] {
  visibility: hidden;
}

HTML

<div data-doorman>Welcome</div>

Call the Doorman

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

Example

<style>
.section {
  height: 100vh;
}
[data-doorman] {
  display: inline-block;
  visibility: hidden;
}
</style>

<div id="section1" class="section">
  <div data-doorman>section1</div>
</div>
<div id="section2" class="section">
  <div data-doorman>section2</div>
</div>
<div id="section3" class="section">
  <div data-doorman>section3</div>
</div>

<script src="https://unpkg.com/scrollmonitor@1.2.2"></script>
<script src="https://unpkg.com/doorman-effect/umd/doorman.min.js"></script>
<script>
  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()
    })
  })
</script>

Options

{
  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にオプションを設定

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

Browsers

  1. Chrome
  2. Firefox
  3. IE11+
  4. Safari

MIT