jQuery Plugin For Entrance Animations Of Elements - Magic Display
File Size: | 6.64 KB |
---|---|
Views Total: | 2205 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.