/**
SLIDE 3
*/
#slide3 .slide {
width: calc(33.3333% - 16px);
min-height: 300px;
float:left;
margin:8px;
position:relative;
overflow: hidden;
}
#slide3 .slide .caption{
background-color:rgba(0,0,0,.85);
width:100%;
height:100%;
position:absolute;
top: 100%;
padding:10px;
}
#slide3 .slide .caption h2{
padding:5px;
margin: 0;
}
#slide3 .slide .caption p{
padding:5px;
margin: 0;
}
$(function () {
function closestEdge(x, y, w, h) {
var topEdgeDist = distMetric(x, y, w / 2, 0);
var bottomEdgeDist = distMetric(x, y, w / 2, h);
var leftEdgeDist = distMetric(x, y, 0, h / 2);
var rightEdgeDist = distMetric(x, y, w, h / 2);
var min = Math.min(topEdgeDist, bottomEdgeDist, leftEdgeDist, rightEdgeDist);
switch (min) {
case leftEdgeDist:
return "left";
case rightEdgeDist:
return "right";
case topEdgeDist:
return "top";
case bottomEdgeDist:
return "bottom";
}
}
function distMetric(x, y, x2, y2) {
var xDiff = x - x2;
var yDiff = y - y2;
return (xDiff * xDiff) + (yDiff * yDiff);
}
var css = {
'top-caption': {
left: '0px',
top: '-100%'
},
'top-hover': {
top: '0%'
},
'bottom-caption': {
left: '0px',
top: '100%'
},
'bottom-hover': {
top: '0%'
},
'left-caption': {
left: '-100%',
top: '0px'
},
'left-hover': {
left: '0%'
},
'right-caption': {
left: '100%',
top: '0px'
},
'right-hover': {
left: '0%'
},
'top-caption-invert': {
left: '0px',
top: '100%'
},
'top-hover-invert': {
top: '0%'
},
'bottom-caption-invert': {
left: '0px',
top: '-100%'
},
'bottom-hover-invert': {
top: '0%'
},
'left-caption-invert': {
left: '100%',
top: '0px'
},
'left-hover-invert': {
left: '0%'
},
'right-caption-invert': {
left: '-100%',
top: '0px'
},
'right-hover-invert': {
left: '0%'
},
};
var inv = false;
$('#slide3 .slide, #slide4 .slide').on('mouseenter.slide, mouseleave.slide', function (e) {
edge = closestEdge(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, $(this).width(), $(this).height());
inv = $(this).data('inverse') ? $(this).data('inverse') : false;
if (e.type == 'mouseenter') {
$(this).find('.caption').css(css[edge + '-caption' + (inv ? '-invert' : '')]).animate(css[edge + '-hover' + (inv ? '-invert' : '')], 300, "linear");
} else {
$(this).find('.caption').animate(css[edge + '-caption' + (inv ? '-invert' : '')], 300, "linear");
}
});
});