5

Выкладываю скрин макета. Необходимо сделать так, чтобы блоки вращались по кругу как показано на макете. Помогите подобрать плагин. Пока только картинка, верстка в процессе

макет

2
  • Блоки должны вращаться постоянно или как? 8 июн 2018 в 2:07
  • я думал по наведению, либо по скроллу на блок-родитель
    – YeSamarets
    9 июн 2018 в 14:09

1 ответ 1

8

Не люблю я плагины. Мне проще с нуля, "на коленке" и второпях)) По скроллу будет примерно так:

var oMenuWrap = document.querySelector('div.menu-wrap');
var oMenuList = oMenuWrap.querySelector('div.menu-list');
var aMenuItems = Array.prototype.slice.call(oMenuList.querySelectorAll('a.menu-item'));
oMenuWrap.animationDirectionLast = false; // Исходное направление вращения
var aSetAngles = [-90, -30, 30, 90, 150, 210]; // Исходный массив углов
var aTimings = {duration: 1000, easing: 'ease-in-out'}; // Скорость и плавность вращения

/* Обработчик колеса мыши */
oMenuWrap.addEventListener('wheel', function(ev) {
  ev.preventDefault();
  // Если идёт анимация, тогда ждём ёе завершения
  if (oMenuWrap.animationProgress) {
    return
  }
  // Устанавливаем флаг прогресса анимации
  oMenuWrap.animationProgress = true;
  // Запускаем функцию анимации с указанием направления
  fSpinMenu((ev.deltaY || ev.detail || ev.wheelDelta) > 0, this);
});

/* Функция расчета и анимации */
function fSpinMenu(bDirection) {
  // Если текущее направление не совпадает с последним, тогда...
  if (oMenuWrap.animationDirectionLast != bDirection) {
    // корректируем массив в зависимости от направления
    (bDirection) ? aSetAngles.unshift.apply(aSetAngles, aSetAngles.splice(5)): aSetAngles.push.apply(aSetAngles, aSetAngles.splice(0, 1));
  }
  // Перебираем пункты
  aMenuItems.forEach(function(el, index) {
    // Расчёт углов
    let nSR = aSetAngles[index]; // Начальный угол
    let nSRF = nSR * -1; // Фикс начального угла
    let nER = nSR + 60; // Конечный угол
    let nERF = nER * -1; // Фикс конечного угла
    // Запускаем анимацию в заданном направлении
    if (bDirection) {
      el.animationRun = el.animate([{
        transform: `rotate(${nER}deg) translateX(200px) rotate(${nERF}deg) scale(1, 1.53846)`
      }, {
        transform: `rotate(${nSR}deg) translateX(200px) rotate(${nSRF}deg) scale(1, 1.53846)`
      }], aTimings);
    } else {
      el.animationRun = el.animate([{
        transform: `rotate(${nSR}deg) translateX(200px) rotate(${nSRF}deg) scale(1, 1.53846)`
      }, {
        transform: `rotate(${nER}deg) translateX(200px) rotate(${nERF}deg) scale(1, 1.53846)`
      }], aTimings);
    }
    // Назначаем обработчик конца анимации
    el.animationRun.addEventListener('finish', function(ev) {
      // Назначение текущих координат, как исходных
      el.style.transform = (bDirection) ? `rotate(${nSR}deg) translateX(200px) rotate(${nSRF}deg) scale(1, 1.53846)` : `rotate(${nER}deg) translateX(200px) rotate(${nERF}deg) scale(1, 1.53846)`;
      // Сбрасываем флаг прогресса анимации
      oMenuWrap.animationProgress = false;
    });
  });
  // Сдвиг массива в зависимости от направления
  (bDirection) ? aSetAngles.unshift.apply(aSetAngles, aSetAngles.splice(5)): aSetAngles.push.apply(aSetAngles, aSetAngles.splice(0, 1));
  // Запоминаем направление
  oMenuWrap.animationDirectionLast = bDirection;
}
* {
  box-sizing: border-box;
}

.menu-wrap {
  height: 435px;
  position: relative;
  text-align: center;
}

.menu-item {
  background: url(//i.stack.imgur.com/KtQ9X.png) no-repeat;
  border: 1px solid #ccc;
  border-radius: 50%;
  box-shadow: 0px 2px 2px 0px rgba(21, 21, 21, 0.5);
  display: inline-block;
  height: 76px;
  line-height: 10px;
  position: absolute;
  top: -12px;
  transition: box-shadow .5s cubic-bezier(.66, -0.28, .13, 1.71);
  width: 76px;
}

a.menu-item:hover {
  box-shadow: 2px 25px 25px 0px rgba(21, 21, 21, 0.2);
  transition: box-shadow .4s ease;
}

.menu-item>span {
  font: bold 10px 'Arial';
  position: relative;
  top: 89px;
}

.menu-list {
  display: inline-block;
  transform: translateX(-38px) translateY(180px) scale(1, 0.65);
}

.menu-text {
  background: url(//i.stack.imgur.com/KtQ9X.png) no-repeat center -196px;
  background-size: auto auto;
  height: 46px;
  left: 50%;
  opacity: 1;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  width: 192px;
}


/*===============================*
 * Sprites and start coords      *
 *===============================*/

.i-1 {
  background-position: -358px -46px;
  transform: rotate(-90deg) translateX(200px) rotate(90deg) scale(1, 1.53846);
}

.i-2 {
  background-position: -546px -68px;
  transform: rotate(-30deg) translateX(200px) rotate(30deg) scale(1, 1.53846);
}

.i-3 {
  background-position: -546px -264px;
  transform: rotate(30deg) translateX(200px) rotate(-30deg) scale(1, 1.53846);
}

.i-4 {
  background-position: -358px -294px;
  transform: rotate(90deg) translateX(200px) rotate(-90deg) scale(1, 1.53846);
}

.i-5 {
  background-position: -166px -264px;
  transform: rotate(150deg) translateX(200px) rotate(-150deg) scale(1, 1.53846);
}

.i-6 {
  background-position: -166px -78px;
  transform: rotate(210deg) translateX(200px) rotate(-210deg) scale(1, 1.53846);
}
<div class="menu-wrap">
  <div class="menu-list">
    <a class="menu-item i-1"><span>Designing</span></a>
    <a class="menu-item i-2"><span>Coding /<br>Implementation</span></a>
    <a class="menu-item i-3"><span>Testing</span></a>
    <a class="menu-item i-4"><span>Deployment /<br>Delivery</span></a>
    <a class="menu-item i-5"><span>Maintenance</span></a>
    <a class="menu-item i-6"><span>Requirement /<br>Analisis &amp; Planning</span></a>
  </div>
  <div class="menu-text"></div>
</div>

4
  • Классная анимация, только я бы посоветовал, сделать легкий сдвиг вверх при hover и тени поменьше и выглядело бы правдоподобнее...
    – Air
    5 дек 2018 в 20:31
  • @Air спасибо. Тени не только поменьше, но и поразмытее-попрозрачнее нужны. А, вот, со сдвигом не согласен - долго экспериментировал, перед тем, как выложить. Да и ТС это нафиг не нужно - спросил и забыл.
    – UModeL
    5 дек 2018 в 20:35
  • Ты для себя делай)))) В свое удовольствие...
    – Air
    5 дек 2018 в 20:37
  • 1
    @Air так я и так))) Здесь мне просто идеи подкидывают, чем бы ещё заняться))
    – UModeL
    5 дек 2018 в 20:38

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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