digitalmoves_scroll_wheel_menu_circular_rotation_quickstart.ts

1import { ScrollWheelMenu } from '@digitalmoves/scroll-wheel-menu';
2
3// Define the menu configuration
4const options = {
5    radius: 300,
6    spacing: 45,
7    scrollSensitivity: 0.5,
8    onUpdate: (angle: number) => {
9        console.log(`Current rotation angle: ${angle}`);
10    }
11};
12
13// Select the container element (ensure this exists in your HTML)
14const container = document.querySelector<HTMLElement>('#menu-container');
15
16if (container) {
17    // Initialize the menu
18    const menu = new ScrollWheelMenu(container, options);
19
20    // Optional: Add menu items dynamically if not present in HTML
21    const items = ['Home', 'About', 'Services', 'Portfolio', 'Contact'];
22    items.forEach((text) => {
23        const item = document.createElement('div');
24        item.className = 'menu-item';
25        item.innerText = text;
26        container.appendChild(item);
27    });
28
29    // Start the menu logic
30    menu.init();
31}