CSS3 and JS Web page Production Example: Web page avatar Display effect

Article Introduction: today for you to share a very creative CSS3 avatar display effect, interactive strong, is a based on CSS3 and JS to achieve, the code is not much, but the final effect is very impressive, so particularly recommended to everyone. Some of the CSS styles for this example are rendered, and the individual thinks there is a lot more room to play, such as when the mouse passes instead of switching to a background color

Today for you to share a very creative CSS3 avatar display effect, interactive strong, is a based on CSS3 and JS to achieve, the code is not much, but the final effect is very impressive, so particularly recommended to everyone. Some of these CSS styles for this example are rendered, and it is interesting to think that there is still a lot of room to play, such as when the mouse passes instead of switching to a background color and text, instead of replacing it with other related pictures (for example, the other expression of the character).

Download attachment: Http://www.webjx.com/files/soft/1_130711103319.rar

OK, let's take a look at the way the results are made.

HTML code structure

<ul class= "Grid" >
<li>
<a href= "Http://www.jiawin.com/creative-css3-avatar-display" >

<div class= "Info" >
<p>1</p>
</div>
</a>
</li>
</ul>

Looking at the above code is extremely simple, just a list element, you need to put how many pictures to write how much <li>. The structure of the <li> inside is as above.

CSS style sheet

The next step is our CSS stylesheet, here is just an example where you can play the part and define your personality.

Body {
Font-family:helvetica, Arial, Sans-serif;
font-size:16px;
-webkit-font-smoothing:antialiased;
-moz-font-smoothing:antialiased;
font-smoothing:antialiased;
margin:0;
padding:0;
Background-color: #E6E6E6;
}
. grid {
margin:100px Auto 80px Auto;
padding:0px;
width:100%;
Height:auto;
Overflow:hidden;
max-width:1000px;
-webkit-box-shadow:0px 40px 50px rgba (0, 0, 0, 0.3);
-moz-box-shadow:0px 40px 50px rgba (0, 0, 0, 0.3);
box-shadow:0px 40px 50px rgba (0, 0, 0, 0.3);
}
. grid Li {
width:10%;
Background: #000000;
Float:left;
position:relative;
Overflow:hidden;
}
. grid img {
Float:left;
width:100%;
Height:auto;
position:relative;
-webkit-transform-style:preserve-3d;
-webkit-backface-visibility:hidden;
-webkit-transform:translate3d (0, 0, 0);
-moz-transform-style:preserve-3d;
-moz-backface-visibility:hidden;
-moz-transform:translate3d (0, 0, 0);
transform-style:preserve-3d;
Backface-visibility:hidden;
Transform:translate3d (0, 0, 0);
}
. grid. Info {
Position:absolute;
width:100%;
height:100%;
padding:15px;
Background: #DC584C;
Display:none;
Z-index:2;
-webkit-transform-style:preserve-3d;
-webkit-backface-visibility:hidden;
-webkit-transform:translate3d (0, 0, 0);
-moz-transform-style:preserve-3d;
-moz-backface-visibility:hidden;
-moz-transform:translate3d (0, 0, 0);
transform-style:preserve-3d;
Backface-visibility:hidden;
Transform:translate3d (0, 0, 0);
}
. grid P {
font-size:22px;
Font-weight:bolder;
Color: #FFF;
}

JavaScript code

Finally, we need to use JavaScript to do some special interaction (animation effect).

(function () {
$ (function () {
var columns, current, easing, grid, Hideitem, ShowItem, Time,
_this = this;
Grid = $ (". Grid");
Current = {
Index:-1,
column:0,
line:0
};
columns = 10;
easing = "Cubic-bezier (0.165, 0.840, 0.440, 1.000)";
Time = 400;
Grid.on ("MouseEnter", "a", function (e) {
var column, El, image, index, info, item, line;
El = $ (e.currenttarget);
info = El.find (". Info");
Image = El.find ("img");
index = El.parent (). index ();
Column = index% columns;
line = Math.floor (index/columns);
Console.log (index, column, line);
Item = {
El:el,
Index:index,
Column:column,
Line:line,
Info:info,
Image:image
};
if (current.el && current.index = = index) return;
if (line = = current.line && column > Current.column) {
ShowItem (item, "100%", 0, "25%", 0);
Hideitem (Current, "100%", 0, "-25%", 0);
else if (line = = current.line && column < Current.column) {ShowItem (item, "100%", 0, "-25%", 0);       Hideitem (Current, "-100%", 0, "25%", 0); else if (line > current.line && column = = current.column) {
ShowItem (item, 0, "100%", 0, "25%");
Hideitem (current, 0, "100%", 0, "-25%");
} else {
ShowItem (item, 0, "100%", 0, "-25%");
Hideitem (current, 0, "-100%", 0, "25%");
}
return current = Item;
});
ShowItem = function (item, Infox, Infoy, ImageX, Imagey) {
Item.info.stop (). CSS ({
X:infox,
Y:infoy,
Display: "Block"
}). Transition ({
x:0,
y:0,
Duration:time,
Easing:easing
});
Return Item.image.stop (). Transition ({
X:imagex,
Y:imagey,
Opacity:. 5,
Duration:time,
Easing:easing
});
};
return Hideitem = function (item, Infox, Infoy, ImageX, Imagey) {
if (!item.el) return;
Item.info.stop (). Transition ({
X:infox,
Y:infoy,
Duration:time,
Easing:easing
});
Return Item.image.stop (). CSS ({
X:imagex,
Y:imagey,
Opacity:. 5
}). Transition ({
x:0,
y:0,
Opacity:1,
Duration:time,
Easing:easing
});
};
});
). Call (this);

Here, our example is basically done, but in the last few steps it's not going to work, because we haven't introduced the jquery library and a jquery plugin (jquery Transit).

<script src= "Http://cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.9.9/jquery.transit.min.js" ></ Script>

The jquery Transit is a jquery plug-in that utilizes the CSS3 transition and transformation features to achieve animation effects, with the same syntax as the jquery animate method. This plugin supports most of the methods provided by this feature, while adding JQuery's unique technology: callbacks (callbacks), automatic browser CSS prefixes, chain boxes (chaining), and more. Because this plugin uses a true CSS3 rule, it is not compatible with older browsers.

Download attachment:Http://www.webjx.com/files/soft/1_130711103319.rar

Today's example is here, I hope you like, if there are questions can be left at the bottom of the message, together to explore research.