Jquery animation 3. Create an image corridor with a mask effect _ jquery

What we want to accomplish today is a jquery plug-in for the image corridor with a masked effect (with a complementary animation): jquery. tranzify. js? 1.1.23 The 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 p
{
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:

The 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:

The 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:

The 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.

The Code is as follows:

PrevA = $ ('',{
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 = $ ('',{
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.

The 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 p. The p background is the currently displayed image. By setting the left value of each p css and the backgroundPosition value of the background, make this set of p to form a complete picture effect. Let's look at the code at a glance.

The Code is as follows:

// Offset of p left
Var posLeftMarker = 0,
// Offset of the p background position
BgHorizMarker = 0,
// The total packaging object of the Mask Layer
Overlay = $ ('

',{
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.
$ ('

',{
// 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 get the p below the mask layer, add the animation effect to them, and change their height or width to 0 one by one. After the animation ends, remove the mask layer container.

The Code is as follows:

// Obtain the mask layer container
Var transOverlay = $ ('#' + config. containerID ),
// Obtain p values 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