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.











