Перекос выполняется css3 и html 5 и анимацией с использованием jquery (в ie7 нет эффекта перекоса):
#homepage_accordion a {
position: relative;
margin: 0 0 0 -1px;
display: block;
float: left;
height: 500px;
overflow: hidden;
text-decoration: none;
-moz-transform: skew(-2deg, 0deg);
-webkit-transform: skew(-2deg, 0deg);
-o-transform: skew(-2deg, 0deg);
-ms-transform: skew(-2deg, 0deg);
transform: skew(-2deg, 0deg);
}
и сценарий
// Let's grab all of the actors in this feature
var $FL = jQuery('#homepage_accordion a.left');
$FL.data({
'wrap': $FL.find('.wrap'),
'excerpt': $FL.find('.excerpt')
});
var $FM = jQuery('#homepage_accordion a.middle');
$FM.data({
'wrap': $FM.find('.wrap'),
'excerpt': $FM.find('.excerpt')
});
var $FR = jQuery('#homepage_accordion a.right');
$FR.data({
'wrap': $FR.find('.wrap'),
'excerpt': $FR.find('.excerpt')
});
// Set some animation options
var animOpts = {
duration: 600,
queue: false,
easing: 'easeInOutQuart'
};
// Now we'll add the events for each
$FL.bind('mouseenter', function(Event) {
$FL.data('wrap').animate({
marginTop: 350,
height: 150
}, animOpts);
$FL.data('excerpt').animate({
opacity: 1
}, animOpts);
$FM.animate({
marginLeft: 0
}, animOpts);
$FM.data('wrap').animate({
marginTop: 0,
height: 500,
width: 300
}, animOpts);
$FM.data('excerpt').animate({
opacity: 0
}, animOpts);
$FR.data('wrap').animate({
marginTop: 0,
height: 500,
width: 2000
}, animOpts);
$FR.data('excerpt').animate({
opacity: 0
}, animOpts);
});
$FM.bind('mouseenter', function(Event) {
$FM.data('wrap').animate({
marginTop: 350,
height: 150,
width: 600
}, animOpts);
$FM.animate({
marginLeft: -250
}, animOpts);
$FM.data('excerpt').animate({
opacity: 1
}, animOpts);
$FL.data('wrap').animate({
marginTop: 0,
height: 500,
width: 2000
}, animOpts);
$FL.data('excerpt').animate({
opacity: 0
}, animOpts);
$FR.data('wrap').animate({
marginTop: 0,
height: 500,
width: 2000
}, animOpts);
$FR.data('excerpt').animate({
opacity: 0
}, animOpts);
});
$FR.bind('mouseenter', function(Event) {
$FR.data('wrap').animate({
marginTop: 350,
height: 150
}, animOpts);
$FR.data('excerpt').animate({
opacity: 1
}, animOpts);
$FM.animate({
marginLeft: -250
}, animOpts);
$FM.data('wrap').animate({
marginTop: 0,
height: 500,
width: 300
}, animOpts);
$FM.data('excerpt').animate({
opacity: 0
}, animOpts);
$FL.data('wrap').animate({
marginTop: 0,
height: 500,
width: 2000
}, animOpts);
$FL.data('excerpt').animate({
opacity: 0
}, animOpts);
});