Анимация с помощью jQuery и CSS спрайтов
В этом коротком руководстве мы покажем вам, как можно получить анимацию изображения с помощью jQuery и CSS. Смысл анимации состоит в том, что человечек на фото следит глазами за курсором мыши. Таким образом вы сможете проделать этот трюк со своим фото или фото ваших друзей.
Для начала мы приведем пример без использования CSS спрайтов.
Пример без использования CSS спрайтов
Далее представлен JS код обнаружения позиции курсора мыши относительно изображения и смены классов для этого изображения.
<!DOCTYPE html>
<html>
<head>
<title>JQuery Mouse Direction</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function() {
var img_x1, img_x2, img_y1, img_y2;
function set_xy_img() {
img_x1 = $('#container div').offset().left;
img_x2 = $('#container div').offset().left + $('#container div').width();
img_y1 = $('#container div').offset().top;
img_y2 = $('#container div').offset().top + $('#container div').height();
}
set_xy_img();
$(window).resize(function() {
set_xy_img();
});
$(document).mousemove(function(e){
$('#container div').removeAttr('class');
// front image
if (e.pageY > img_y1 && e.pageY < img_y2
&& e.pageX > img_x1 && e.pageX < img_x2) {
$('#container div').addClass('front');
}
else
// top image
if (e.pageY < img_y1 && e.pageX > img_x1 && e.pageX < img_x2) {
$('#container div').addClass('top');
}
else
// bottom image
if (e.pageY > img_y2 && e.pageX > img_x1 && e.pageX < img_x2) {
$('#container div').addClass('bottom');
}
else
// left image
if (e.pageY > img_y1 && e.pageY < img_y2 && e.pageX < img_x1) {
$('#container div').addClass('left');
}
else
// right image
if (e.pageY > img_y1 && e.pageY < img_y2 && e.pageX > img_x2) {
$('#container div').addClass('right');
}
else
// top left image
if (e.pageY < img_y1 && e.pageX < img_x1) {
$('#container div').addClass('top-left');
}
else
// top right image
if (e.pageY < img_y1 && e.pageX > img_x1) {
$('#container div').addClass('top-right');
}
else
// bottom left image
if (e.pageY > img_y1 && e.pageX < img_x1) {
$('#container div').addClass('bottom-left');
}
else
// bottom right image
if (e.pageY > img_y1 && e.pageX > img_x1) {
$('#container div').addClass('bottom-right');
}
});
//console.log($('#container div').offset());
$('#container div').mouseover(function() {
//$(this).removeAttr('class');
//$(this).addClass('front');
});
$('#container div').mouseout(function() {
$(this).removeAttr('class');
$(this).addClass('top');
});
});
</script>
<style>
#container {
margin-top:200px;
}
#container div {
margin: 0 auto;
width: 150px;
height: 150px;
}
.front { background: url('img/luffy-front.jpg'); }
.top { background: url('img/luffy-top.jpg'); }
.bottom { background: url('img/luffy-bottom.jpg'); }
.left { background: url('img/luffy-left.jpg'); }
.right { background: url('img/luffy-right.jpg'); }
.top-left { background: url('img/luffy-top-left.jpg'); }
.top-right { background: url('img/luffy-top-right.jpg'); }
.bottom-left { background: url('img/luffy-bottom-left.jpg'); }
.bottom-right { background: url('img/luffy-bottom-right.jpg'); }
</style>
</head>
<body>
<div id="container">
<div class="front"></div>
</div>
</body>
</html>
Комментарии:
Нету комментариев для вывода...