Оживить сайт. Подбор плагина

#javascript #html #jquery #css #html5

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


    

Ответы

Ответ 1

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



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);
}

  

    Designing
    Coding /
Implementation
    Testing
    Deployment /
Delivery
    Maintenance
    Requirement /
Analisis & Planning