курсор как ветер
Доброе утро мастера!
Надеюсь и сейчас вы мне поможете! В общем, сразу к делу Есть блок с картинкой <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, время: 00:05. |