курсор как ветер
Доброе утро мастера!
Надеюсь и сейчас вы мне поможете! В общем, сразу к делу Есть блок с картинкой <div class="kec_content"><img src="http://demo.mir-360.ru/sov_trad/wp-content/themes/sovtrad/img/tool1.png" class="tool1 "></div> нужно что бы при проведении курсором по этой картинке,она начинала качаться относительно курсора. Т.е. проводим по картинке слева - направо, она начинает качаться и останавливается слева - направо , если справа - налево, то такое же действие,но справа налево. |
Step48_rus,
вы не из одного места с Black_Star, ? http://javascript.ru/forum/jquery/64...tml#post424856 |
рони,
Не, немного не то, мне нужно что бы потом это все затухло. как эффект маятника. Т.е. с уменьшением амплитуды движения |
Step48_rus,
Тогда, может, так? Только не на каждый чих работает - пока не докачается, не реагирует
<!DOCTYPE html>
<html>
<head>
<title>Untitled Page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style>
.doors
{
display: inline-block;
}
.block
{
width: 100px;
height: 150px;
display: inline-block;
background: #e79e6d;
border: 2px solid #333;
transition: transform 1s;
}
</style>
<script>
var degY = 0, degX = 0;
var canDo = true;
$(function () {
$('.block').on('mousemove', function (e) {
if (canDo) {
canDo = false;
var elem = e.target,
coords = elem.getBoundingClientRect();
degY = e.pageX - (coords.left + coords.width) / 2;
degX = -e.pageY + (coords.top + coords.height) / 2;
var timerId = setTimeout(function tick() {
elem.style.transform = 'perspective(300px) rotateX(' + degX + 'deg) rotateY(' + degY + 'deg)';
degX = -degX / 2;
degY = -degY / 2;
if (Math.abs(degX) > 1 || Math.abs(degY) > 1) {
timerId = setTimeout(tick, 700);
} else {
canDo = true;
}
}, 700);
}
})
})
</script>
</head>
<body>
<div class="doors">
<div class="block">
1</div>
</div>
</body>
</html>
|
:write:
8 классов с @keyframes - вычислить какой угол или сторона ближе и присвоить только этот класс |
| Часовой пояс GMT +3, время: 12:54. |