jQuery Smooth Inception Effect Plugin - EnterIN
File Size: | 5.68 KB |
---|---|
Views Total: | 1051 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

EnterIN is a tiny jQuery plugin for creating smooth inception animation effects. Check the demo page to see how it animates.
Basic Usage:
1. Markup Html Structure.
<div id="enterin-ctrl"> <a href="javascript:;" data-enterin="1">Macbook</a> <a href="javascript:;" data-enterin="2">iPad</a> <a href="javascript:;" data-enterin="3">iPhone</a> <a href="javascript:;" data-enterin="4">EnterIN</a> </div> <div id="enterin-wrapper"> <div class="enterin-slide slide1"></div> <div class="enterin-slide slide2"></div> <div class="enterin-slide slide3"></div> <div class="enterin-slide slide4"></div> </div>
2. The sample CSS.
#enterin-wrapper, #enterin-wrapper .enterin-slide { width: 100%; height: 100%; min-height: 100%; } #enterin-wrapper .enterin-slide.slide1 { background: url('../img/mac.png') center center no-repeat transparent; background-size: 100%; } #enterin-wrapper .enterin-slide.slide2 { background: url('../img/ipad.png') center center no-repeat transparent; background-size: 100%; } #enterin-wrapper .enterin-slide.slide3 { background: url('../img/iphone.png') center center no-repeat transparent; background-size: 90%; } #enterin-wrapper .enterin-slide.slide4 { background: url('../img/enterin-slide.png') center center no-repeat transparent; background-size: 60%; } #enterin-ctrl { position: absolute; top: 14%; z-index: 99999; width: 500px; } #enterin-ctrl a { display: block; margin-bottom: 20px; margin-left: 15px; width: 100px; text-transform: uppercase; }
3. Load the jQuery library and jQuery EnterIN plugin at the bottom of your page.
<script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="jquery.enterin.min.js"></script>
4. Call the plugin with options.
<script> jQuery("#enterin-wrapper").enterin({ controllers:'#enterin-ctrl', maxScale: 20, effectTime: 3.0, ease: 'linear', endCallback:function(current_index) { } }); </script>
This awesome jQuery plugin is developed by Enterin. For more Advanced Usages, please check the demo page or visit the official website.