Выкладываю скрин макета. Необходимо сделать так, чтобы блоки вращались по кругу как показано на макете. Помогите подобрать плагин. Пока только картинка, верстка в процессе
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);
}
<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 & Planning</span></a>
</div>
<div class="menu-text"></div>
</div>
-
Классная анимация, только я бы посоветовал, сделать легкий сдвиг вверх при
hover
и тени поменьше и выглядело бы правдоподобнее...– Air5 дек 2018 в 20:31 -
@Air спасибо. Тени не только поменьше, но и поразмытее-попрозрачнее нужны. А, вот, со сдвигом не согласен - долго экспериментировал, перед тем, как выложить. Да и ТС это нафиг не нужно - спросил и забыл.– UModeL5 дек 2018 в 20:35
-
-
1@Air так я и так))) Здесь мне просто идеи подкидывают, чем бы ещё заняться))– UModeL5 дек 2018 в 20:38