Форум

Step48_rus · #1 (**permalink**) 10.08.2016, 09:24

Доброе утро мастера!
Надеюсь и сейчас вы мне поможете!
В общем, сразу к делу
Есть блок с картинкой

<div class="kec_content"><img src="http://demo.mir-360.ru/sov_trad/wp-content/themes/sovtrad/img/tool1.png" class="tool1 "></div>

нужно что бы при проведении курсором по этой картинке,она начинала качаться относительно курсора.
Т.е. проводим по картинке слева - направо, она начинает качаться и останавливается слева - направо , если справа - налево, то такое же действие,но справа налево.

рони · #2 (**permalink**) 10.08.2016, 09:44

Step48_rus,
вы не из одного места с Black_Star, ?
трансформация объекта/эффект открытки

Step48_rus · #3 (**permalink**) 10.08.2016, 09:56

рони,
Не, немного не то, мне нужно что бы потом это все затухло. как эффект маятника. Т.е. с уменьшением амплитуды движения

Dilettante_Pro · #4 (**permalink**) 10.08.2016, 19:04

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>

рони · #5 (**permalink**) 10.08.2016, 19:19

8 классов с @keyframes - вычислить какой угол или сторона ближе и присвоить только этот класс

Форум

Справочник

Discord чат

Курсы javascript