jQuery Plugin For Entrance Animations Of Elements - Magic Display

Magic Display is a jQuery plugin that keeps track of scroll events and add the slide / fade in effects to desired elements when they enter into view.

How to use it:

1. Add the latest version of jQuery and the jQuery Magic display's script to the html page.

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="jquery.magic.display.min.js"></script>

2. Add the CSS class 'magic-display' to the target elements and specify the staring position from which the elements should slide.

<div class="box-A magic-display magic-top"></div>
<div class="box-B magic-display magic-bottom"></div>
<div class="box-C magic-display magic-left"></div>
<div class="box-D magic-display magic-right"></div>

3. Set the initial opacity of your elements.

.magic-display {
  opacity: 0;
}

4. Active the plugin with default options.

$('.magic-display').magicDisplay();

5. Set the animation duration in milliseconds.

$('.magic-display').magicDisplay({
  duration: 1000
});

6. Apply the scroll animations to the elements when they're completely scrolled into view.

$('.magic-display').magicDisplay({
  duration: 1000,
  displayFullVisible: true
});

7. Enable / disable the plugin at a specific breakpoint.

$('.magic-display').magicDisplay({
  minWidth: 960, // default is null
});

---

This awesome jQuery plugin is developed by stezante7. For more Advanced Usages, please check the demo page or visit the official website.