jQuery Smooth Inception Effect Plugin - EnterIN

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

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.