Simple animation for revealing elements.
http://git.blivesta.com/doorman/
<script src="umd/doorman.min.js"></script>CDN
<script src="https://unpkg.com/doorman-effect/umd/doorman.min.js"></script>npm
$ npm install doorman-effectconst Doorman = require('doorman-effect');css
[data-doorman] { visibility: hidden; }html
<span id="doorman">...</span> <span data-doorman>...</span>const elements = document.querySelector('#doorman'); const doorman = new Doorman(elements, { /* options */ }); doorman.start();Use with multiple selectors.
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
<style> .section { height: 100vh; } [data-doorman] { visibility: hidden; } </style> <div id="section1" class="section"> <span data-doorman>section1</span> </div> <div id="section2" class="section"> <span data-doorman>section2</span> </div> <div id="section3" class="section"> <span data-doorman>section3</span> </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>{ 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) {} }<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>- Chrome
- Firefox
- IE11+
- Safari
Released under the MIT license.