Анимация 3D куба с внутренним элементом

Question

Задача: Анимация шара, расположенного внутри куба, который должен двигаться в соответствии расположения курсора на мониторе, и дно куба по которому будет двигаться шарик будет повторять монитор. Шарик должен двигаться с ускорением и замедлением динамики (то есть визуально иметь разгон и торможение) при движении курсора

Подскажи, с использованием каких инструментов проще всего это реализовать?

Answer 1

Не является конкурсным ответом, ни на что не претендую, просто как вариант возможного решения. Если конечно я верно осмыслил поставленную задачу. Код несложный, думаю в нем легко будет разобраться что к чему. Открываем окошко на всю страницу и смотрим, оно или не оно:

$(function() {
  var mouseX = 0,
    mouseY = 0,
    // Определяем границы для передвижения
    limitX = 300 - 24,
    limitY = 300 - 24;
  $(window).mousemove(function(e) {
    var offset = $('.field').offset();
    // Находим координаты курсора
    mouseX = Math.min(e.pageX - offset.left, limitX);
    mouseY = Math.min(e.pageY - offset.top, limitY);
    if (mouseX < 0) mouseX = 0;
    if (mouseY < 0) mouseY = 0;
  });
  var follower = $(".ball");
  // Начальные координаты на момент загрузки страницы
  var xp = 0,
    yp = 0;
  var loop = function() {
    // Скорость передвижения. Чем больше значение, тем медленнее передвижение
    xp += (mouseX - xp) / 10;
    yp += (mouseY - yp) / 10;
    follower.css({
      left: xp,
      top: -yp
    });
    requestAnimationFrame(loop);
  };
  loop();
});

body {
  background-color: #e2e2e2;
}

.container {
  width: 300px;
  height: 300px;
  margin: 30px 0 0 60px;
  perspective: 900px;
}

.cube {
  position: relative;
  width: 300px;
  height: 300px;
  transform-origin: 50% 50% -150px;
  transform: rotate3d(-40, -40, 0, 40deg);
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.edge {
  position: absolute;
  width: 300px;
  height: 300px;
  border: 5px solid #b1b1b1;
  border-radius: 5px;
  background: rgba(0, 0, 0, .3);
  background: radial-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .5));
  transform-origin: 50% 50% -150px;
}

.edge:nth-child(2) {
  transform: rotateY(90deg);
}

.edge:nth-child(3) {
  transform: rotateY(-90deg);
}

.edge:nth-child(4) {
  transform: rotateX(90deg);
}

.edge:nth-child(5) {
  transform: rotateX(-90deg);
}

.edge:nth-child(6) {
  transform: rotateY(180deg);
}

.field {
  position: absolute;
  top: calc(100% - 24px);
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.ball {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 28px;
  border-radius: 100%;
  background-color: blue;
  background: radial-gradient(circle at 10px 10px, red, blue);
  box-shadow: 3px -5px 5px 0px rgba(50, 50, 50, 0.75);
  transform: rotate(-0deg) skew(-16deg, 0deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="cube">
    <div class="edge"></div>
    <div class="edge"></div>
    <div class="edge"></div>
    <div class="edge"></div>
    <div class="edge">
      <div class="field">
        <div class="ball"></div>
      </div>
    </div>
    <div class="edge"></div>
  </div>
</div>

БЛОГ НА HUSL

Анимация 3D куба с внутренним элементом

Ответы (1 шт):