2

Нужно при наведении мышкой на div заставить его отскакивать в противоположную сторону (animate) с затуханием движения и отражением от краев окна браузера с учетом равенства углов падения и отражения.

Есть ли готовые примеры на JS/CSS?

Что-то типа http://jsfiddle.net/yh9f23jd

$(".confirm").on("mouseover", function() {
  var topPos = $(this).parent().offset().top
  $(this).animate({
    marginTop: (topPos + 100) + "px"
  }, 100)
})
.confirm {
  width: 100px;
  height: 100px;
  margin: auto;
  position: relative;
  border: 1px solid #999;
  border-radius: 5px;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="confirm"></div>

3

2 ответа 2

2

~function () {
  function init() {
    var div = document.querySelector("div")
    div.style.animationDuration = "10s, " + 10*innerHeight/innerWidth + "s"
  }
  
  addEventListener('resize', init)
  init()
}()
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
html { border: 1px dotted red; }
body { position: relative; }

div {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 100px;
  border: 1px solid #999;
  border-radius: 5px;
  animation:
    move-h 10s linear alternate paused infinite,
    move-v 10s linear alternate paused infinite;
}

div:hover {
  animation-play-state: running;
}

@keyframes move-h {
  form { left: 0; }
  to { left: calc(100% - 100px); }
}

@keyframes move-v {
  form { top: 0; }
  to { top: calc(100% - 100px); }
}
<div></div>

2
  • спасибо, но после mouseout квадрат останавливается и не пойму как увеличить скорость 29 ноя 2018 в 12:28
  • Увеличение скорости делается уменьшением времени. Ну и паузу можно из js ставить/снимать.
    – Qwertiy
    29 ноя 2018 в 12:38
0

Возможно вам подойдет для такой задачи CSS библиотека - Animate.css (либ очень много, просто зайдите в гугл, или можете сами написать анимацию на CSS, ничего сложно в этом нет.)

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.