Spin menu
How do I make an spin menu?
Implementation of the concept: https://dribbble.com/shots/2443385-Spin-Menu. What is a spin menu? How do you make a spin menu? This script and codes were developed by Mikita on 19 January 2023, Thursday.
Spin menu - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Spin menu</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="page"> <div class="spinner"> <div class="item item_1"> <div class="item__inner"></div> </div> <div class="item item_2"> <div class="item__inner"></div> </div> <div class="item item_3"> <div class="item__inner"></div> </div> <div class="item item_4"> <div class="item__inner"></div> </div> <div class="item item_5"> <div class="item__inner"></div> </div> </div> <div class="overlay"></div>
</div> <script src="js/index.js"></script>
</body>
</html>
Spin menu - Script Codes CSS Codes
html { height: 100%;
}
body { background: #20242D; min-height: 100%;
}
body * { box-sizing: border-box;
}
.page { background: #333A4A; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; overflow: hidden; width: 280px; height: 480px; border-radius: 3px; position: absolute; top: 50%; left: 50%; margin: -240px 0 0 -140px; box-shadow: 1px 2px 4px rgba(0, 0, 0, .35), -1px 0 0 rgba(255, 255, 255, .2);
}
.page_active .item__inner { -webkit-transition: opacity .15s ease-in-out, -webkit-transform .15s ease-in-out .1s; transition: opacity .15s ease-in-out, -webkit-transform .15s ease-in-out .1s; transition: opacity .15s ease-in-out, transform .15s ease-in-out .1s; transition: opacity .15s ease-in-out, transform .15s ease-in-out .1s, -webkit-transform .15s ease-in-out .1s; opacity: 0;
}
.page_active .item__inner_active { opacity: 1; -webkit-transform: scale(1); transform: scale(1);
}
.page_active .overlay { top: 100%; left: 100%;
}
.page_moving .overlay { top: 0; left: 0;
}
.page_touch {}
.overlay { position: absolute; top: 0; left: 70%; width: 100%; height: 100%; z-index: 100;
}
.spinner { -webkit-transition: -webkit-transform .1s linear; transition: -webkit-transform .1s linear; transition: transform .1s linear; transition: transform .1s linear, -webkit-transform .1s linear; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.item { width: 100%; height: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: absolute; top: 0; left: 0; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%;
}
.item_1 .item__inner { background: #9966FF;
}
.item_2 .item__inner { background: #FF6699;
}
.item_3 .item__inner { background: #00FFCC;
}
.item_4 .item__inner { background: #FEED30;
}
.item_5 .item__inner { background: #6666FF;
}
.item__inner { -webkit-transition: opacity .15s ease-in-out .1s, -webkit-transform .15s ease-in-out; transition: opacity .15s ease-in-out .1s, -webkit-transform .15s ease-in-out; transition: opacity .15s ease-in-out .1s, transform .15s ease-in-out; transition: opacity .15s ease-in-out .1s, transform .15s ease-in-out, -webkit-transform .15s ease-in-out; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-radius: 3px; background: #00FFCC; -webkit-transform: scale(.33); transform: scale(.33); -webkit-transform-origin: 50%; transform-origin: 50%;
}
.item__inner:after { content: ''; position: absolute; width: 50%; left: 25%; top: 100%; margin-top: 40px; height: 10px; border-radius: 10px; background: inherit;
}
Spin menu - Script Codes JS Codes
(function() { var angle, angleCoef, eventEnd, eventMove, eventStart, finishHanding, i, innerHanding, innerPage, innerPages, innerPagesTemplate, isClicked, isTouchDevice, itemsOffset, j, lastPos, len, maxCount, moveHanding, oldX, oldY, overlay, page, setAngle, spinner, startHanding, startPosX; startPosX = 0; lastPos = 0; angle = 0; itemsOffset = 45; angleCoef = 3.5; maxCount = 2; innerPagesTemplate = [-2, -1, 0, 1, 2]; isClicked = false; page = document.querySelector('.page'); overlay = document.querySelector('.overlay'); innerPages = document.querySelectorAll('.item__inner'); spinner = document.querySelector('.spinner'); oldX = 0; oldY = 0; isTouchDevice = function(e) { return window.ontouchstart || navigator.maxTouchPoints; }; if (isTouchDevice()) { eventMove = 'touchmove'; eventStart = 'touchstart'; eventEnd = 'touchend'; } else { eventMove = 'mousemove'; eventStart = 'mousedown'; eventEnd = 'mouseup'; } startHanding = function(e) { oldX = e.clientX; oldY = e.clientY; if (isTouchDevice()) { page.classList.add('page_touch'); startPosX = e.touches[0].clientX; } else { startPosX = e.clientX; } return page.addEventListener(eventMove, moveHanding, true); }; moveHanding = function(e) { if (!isTouchDevice() && oldX === e.clientX && oldY === e.clientY) { return; } oldX = e.clientX; oldY = e.clientY; if (isTouchDevice()) { angle = lastPos + e.touches[0].clientX - startPosX; } else { angle = lastPos + e.clientX - startPosX; } page.classList.add('page_moving'); return setAngle(angle); }; finishHanding = function(e) { var rotateAngle; page.removeEventListener(eventMove, moveHanding, true); page.classList.remove('page_moving'); page.classList.remove('page_touch'); if (angle % (itemsOffset * angleCoef) <= (itemsOffset * angleCoef) / 2) { rotateAngle = angle - angle % (itemsOffset * angleCoef); } else { rotateAngle = angle + ((itemsOffset * angleCoef) - angle % (itemsOffset * angleCoef)); } if (rotateAngle / angleCoef > itemsOffset * maxCount) { lastPos = angleCoef * itemsOffset * maxCount; rotateAngle = itemsOffset * maxCount; } else if (rotateAngle / angleCoef < -itemsOffset * maxCount) { lastPos = -angleCoef * itemsOffset * maxCount; rotateAngle = -itemsOffset * maxCount; } else { lastPos = rotateAngle; rotateAngle = rotateAngle / angleCoef; } spinner.style.webkitTransform = "rotate(" + rotateAngle + "deg)"; return spinner.style.transform = "rotate(" + rotateAngle + "deg)"; }; innerHanding = function(e) { var innerPage, j, len; e.stopPropagation(); for (j = 0, len = innerPages.length; j < len; j++) { innerPage = innerPages[j]; innerPage.classList.remove('item__inner_active'); } page.classList.toggle('page_active'); if (page.classList.contains('page_active')) { page.removeEventListener(eventStart, startHanding, true); return e.target.classList.add('item__inner_active'); } else { return page.addEventListener(eventStart, startHanding, true); } }; setAngle = function(angleVal) { var offset; offset = angleVal / angleCoef; spinner.style.webkitTransform = "rotate(" + offset + "deg)"; return spinner.style.transform = "rotate(" + offset + "deg)"; }; page = document.querySelector('.page'); page.addEventListener(eventStart, startHanding, true); document.addEventListener(eventEnd, finishHanding, true); for (i = j = 0, len = innerPages.length; j < len; i = ++j) { innerPage = innerPages[i]; innerPage.parentNode.style.webkitTransform = "rotate(" + (itemsOffset * innerPagesTemplate[i]) + "deg)"; innerPage.parentNode.style.transform = "rotate(" + (itemsOffset * innerPagesTemplate[i]) + "deg)"; innerPage.addEventListener('click', innerHanding, true); }
}).call(this);
Developer | Mikita |
Username | MikitaLisavets |
Uploaded | January 19, 2023 |
Rating | 3 |
Size | 5,186 Kb |
Views | 6,072 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Water Tracker | 6,055 Kb |
Hamburger Menu | 5,077 Kb |
Angular chart directive | 3,298 Kb |
Rollers | 4,089 Kb |
Buttons | 3,081 Kb |
A Pen by Mikita | 2,460 Kb |
Math Trick | 3,970 Kb |
Tree search | 2,219 Kb |
Loader | 3,321 Kb |
Jquery.scrollbar | 3,920 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Ocean | Gordonnl | 2,817 Kb |
Dragonball Dragon Radar | DouglasGlover | 2,157 Kb |
AngularJS Animated Todo List | Ehaase | 2,975 Kb |
Sexy Social Buttons | Ipiyale | 2,226 Kb |
CSS Link Zoom On Click | Bryce | 1,960 Kb |
Sticky div | Kaslab | 2,225 Kb |
Light Switch | Bartuc | 4,933 Kb |
Wikipedia Viewer | Codinger | 4,681 Kb |
Simple, flat contact form | Zeaklous | 2,719 Kb |
LBCA - Mail canvas | Emnbdx | 3,856 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!