Jquery animation 3. Create an image corridor with a masked Effect

Copy codeThe Code is as follows: # frame
{
Position: relative;
Width: 700px;
Height: 400px;
Overflow: hidden;
Z-index: 0;
}
# Frame img
{
Width: 700px;
Height: 400px;
Position: absolute;
Top: 0;
Left: 0;
Z-index: 1;
}
# Frame img. visible
{
Z-index: 2;
}
# Frame
{
Display: block;
Width: 50%;
Height: 100%;
Position: absolute;
Top: 0;
Z-index: 10;
Color: transparent;
Background-image: url(transparent.gif );
Filter: alpha (opacity = 0 );
Text-align: center;
Text-decoration: none;
Font: 90px "Palatino Linotype", "Book Antiqua", Palatino, serif;
Line-height: 400%;
}
# Frame a: hover
{
Color: # fff;
Text-shadow: 0 0 5px #000;
Filter: alpha (opacity = 100 );
Filter: Shadow (Color = #000, Direction = 0 );
}
# Frame a: focus
{
Outline: none;
}
# Prev
{
Left: 0;
}
# Next
{
Right: 0;
}
# Overlay
{
Width: 100%;
Height: 100%;
Position: absolute;
Left: 0;
Top: 0;
Z-index: 3;
}
# Overlay div
{
Position: absolute;
}

Next, we will introduce how to create the jquery. tranzify. js plug-in. This section focuses on the detailed code and usage of the plug-in. Refer to the demo.
The first step is to build the skeleton of the plug-in:Copy codeThe Code is as follows: (function ($ ){
$. Tranzify = {
Defaults: {// Default Configuration
TransitionWidth: 40, // The width of each small segment of the Mask Layer
TransitionHeight: '000000', // specifies the height of each small segment of the mask layer.
ContainerID: 'overlay ', // mask layer id
TransitionType: 'veneffect', // specifies the animation effect of the default mask layer.
PrevID: 'prev', // the ID of the previous navigation.
NextID: 'Next', // The next navigation ID
VisibleClass: 'visible '// visibility class
},
// Plug-in Initialization
CreateUI: function (config ){
},
// Create a Mask Layer
CreateOverlay: function (config ){
},
// Run the animation effect
RunTransition: function (config ){
}
};
$. Fn. extend ({
// Create a plug-in Function
Tranzify: function (options) {return this;
}
});
}) (JQuery );

The basic skeleton is available. Let's first implement the plug-in function tranzify. The code is very simple, that is, to get the current dom object, create relevant html elements and corresponding events for it, and finally return this back to implement the chain mode. The Code is as follows:Copy codeThe Code is as follows: // create a plug-in Function
Tranzify: function (options ){
// Extended Configuration
Var config = $. extend ($. tranzify. defaults, options );
// Obtain the current dom object and pass it to config. selector
Config. selector = "#" + this. attr ('id ');
// Calculate the number of mask layer fragments to be created.
Config. multi = parseInt (this. width ()/config. transitionWidth;
// Create a plug-in
$. Tranzify. createUI (config );
// Return the object itself to achieve chained Effect
Return this;
}

Next we will introduce the createUI function. First, obtain the total number of images:Copy codeThe Code is as follows: var imgLength = $ (config. selector). find ('img '). length,

Next, define the navigation bar 'prepa' and 'Next' and add it to the selector object.Copy codeThe Code is as follows: prevA =$ ('<a> </a> ',{
Id: config. prevID,
Href :'#',
Html :'«',
Click: function (e ){
E. preventDefault ();
// Hide navigation
Optional (config.selector).find('a'hangzhou.css ('display', 'None ');
// Create a mask
$. Tranzify. createOverlay (config );
// Obtain the currently displayed Image
Var currImg = $ ('.' + config. visibleClass, $ (config. selector ));
// The current image is not the first image
If (currImg. prev (). filter ('img '). length> 0 ){
// Set the previous image to display
CurrImg. removeClass (config. visibleClass). prev (). addClass (config. visibleClass );
} Else {
// Set the last image to display
CurrImg. removeClass (config. visibleClass );
$ (Config. selector). find ('img '). eq (imgLength-1). addClass (config. visibleClass );
}
// Run the mask effect
$. Tranzify. runTransition (config );
}
}). AppendTo (config. selector ),
NextA = $ ('<a> </a> ',{
Id: config. nextID,
Href :'#',
Html :'»',
Click: function (e ){
E. preventDefault ();
// Hide navigation
Optional (config.selector).find('a'hangzhou.css ('display', 'None ');
// Create a mask
$. Tranzify. createOverlay (config );
// Obtain the currently displayed Image
Var currImg = $ ('.' + config. visibleClass, $ (config. selector ));
// The current image is not the last one
If (currImg. next (). filter ('img '). length> 0 ){
// Set the next image to display
CurrImg. removeClass (config. visibleClass). next (). addClass (config. visibleClass );
} Else {
// Set the first image to display
CurrImg. removeClass (config. visibleClass );
$ (Config. selector). find ('img '). eq (0). addClass (config. visibleClass );
}
// Run the mask effect
$. Tranzify. runTransition (config );
}
}). AppendTo (config. selector );

Do not forget to set the first image to the display status.Copy codeThe Code is as follows: $ (config. selector). find ('img '). eq (0). addClass (config. visibleClass );

The following describes the code for creating a mask layer. The main idea is to create a group of Divs. The background of the div is the currently displayed image. You can set the left value of each div css and the backgroundPosition value of the background, make this group of divs into a complete image effect. Let's look at the code at a glance.Copy codeThe Code is as follows: // div left offset
Var posLeftMarker = 0,
// Div background position offset
BgHorizMarker = 0,
// The total packaging object of the Mask Layer
Overlay = $ ('<div> </div> ',{
Id: config. containerID
});
// Cyclically determine the number of parts to be created
For (var I = 0; I <config. multi; I ++ ){
// Create a part. Each part only contains a part of the currently displayed image.
$ ('<Div> </div> ',{
// Set the width
Width: config. transitionWidth,
// Set the height
Height: config. transitionHeight,
Css :{
// Set the background image. The source is the currently displayed image.
BackgroundImage: 'url ('+ $ ('. '+ config. visibleClass, $ (config. selector). attr ('src') + ')',
// Set the background image size so that they are the same as the external container height and width.
// No matter the size of your image, it will match easily.
BackgroundSize: $ (config. selector). width () + 'px '+ $ (config. selector). height () + 'px ',
// Set the background offset.
BackgroundPosition: bgHorizMarker + 'px 0 ',
// Set the left Value
Left: posLeftMarker,
Top: 0
}
}). AppendTo (overlay); // Add it to the mask layer container
// Recalculate the offset
BgHorizMarker-= config. transitionWidth;
PosLeftMarker + = config. transitionWidth;
}
// Adds the mask layer container to the page
Overlay. insertBefore ('#' + config. prevID );

OK, only the code of the mask layer is running. This code is also very simple, that is, it is easy to obtain the various divs below the mask layer, add the animation effects to them, and change their height or width to 0 one by one. After the animation ends, remove the mask layer container.Copy codeThe Code is as follows: // obtain the mask layer container
Var transOverlay = $ ('#' + config. containerID ),
// Obtain the div under the mask layer container
TransEls = transOverlay. children (),
Len = transEls. length-1;
// Run the animation according to the configuration.
Switch (config. transitionType ){
Case 'venetiany ':
TransEls. each (function (I ){
TransEls. eq (I). animate ({
Width: 0
}, 'Low', function (){
If (I = len ){
TransOverlay. remove ();
((Config.selector).find('a'hangzhou.css ('display', 'block ');
}
});
});
Break;
Case 'strip ':
Var counter = 0;
Function strip (){
TransEls. eq (counter). animate ({
Height: 0
},150, function (){
If (counter = len ){
TransOverlay. remove ();
$ (Config. selector). find ("a" example .css ("display", "block ");
} Else {
Counter ++;
Strip ();
}
});
}
Strip ();
Break;
}

Okay. After the content is finished, you can splice the code to run the final result. I hope this article will help you.
Demo: jQuery. animation. tranzify