Smart Screen Animation using html css and javascript

#webdev #beginners #programming #javascript
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Smart Screen Menu</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #1c1c1e;
            margin: 0;
            overflow: hidden;
        }

        .menu-container {
            position: relative;
            width: 250px;
            height: 250px;
        }

        .background-circle {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0);
            width: 200px;
            height: 200px;
            background-color: #ffffff30;
            border-radius: 50%;
            transition: transform 0.4s ease-out;
        }

        .center-btn {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60px;
            height: 60px;
            background-color: #009688; /* Teal color */
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #ffffff;
            font-size: 24px;
            cursor: pointer;
            transition: transform 0.3s ease, background-color 0.3s ease;
        }

        .center-btn.open-icon::before {
            content: '🔽'; /* Expand icon */
        }

        .center-btn.close-icon::before {
            content: '🔼'; /* Collapse icon */
        }

        .center-btn:hover {
            transform: translate(-50%, -50%) scale(1.1);
            background-color: #00695c;
        }

        .option {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0);
            width: 50px;
            height: 50px;
            background-color: #2c2c2e;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #aaa;
            font-size: 18px;
            cursor: pointer;
            opacity: 0;
            transition: all 0.4s ease;
        }

        .option.selected {
            background-color: #ffdd59;
            color: #000;
        }

        .option.selected::before {
            content: '';
            position: absolute;
            top: -15px;
            display: block;
            width: 5px;
            height: 5px;
            background-color: #ffdd59;
            border-radius: 50%;
        }

        .option.selected::after {
            content: '';
            position: absolute;
            top: -8px;
            width: 15px;
            height: 3px;
            background-color: #ffdd59;
            transform: translate(-3px, 10px);
        }

        .option:hover {
            background-color: #ffd93d;
            color: #000;
        }

        /* Outer circle and animation from center */
        .menu-container.open .background-circle {
            transform: translate(-50%, -50%) scale(1);
        }

        .menu-container.open .option {
            opacity: 1;
            pointer-events: all;
        }

        /* Individual positions of icons */
        .brightness { transform: translate(-50%, -50%) translate(-100px, 0); }
        .wifi { transform: translate(-50%, -50%) translate(-70px, -70px); }
        .airplane { transform: translate(-50%, -50%) translate(0, -100px); }
        .bluetooth { transform: translate(-50%, -50%) translate(70px, -70px); }
        .flashlight { transform: translate(-50%, -50%) translate(100px, 0); }
        .location { transform: translate(-50%, -50%) translate(70px, 70px); }
        .dnd { transform: translate(-50%, -50%) translate(0, 100px); }
        .screenshot { transform: translate(-50%, -50%) translate(-70px, 70px); }

        .menu-container.open .brightness { transform: translate(-50%, -50%) translate(-100px, 0) scale(1); }
        .menu-container.open .wifi { transform: translate(-50%, -50%) translate(-70px, -70px) scale(1); }
        .menu-container.open .airplane { transform: translate(-50%, -50%) translate(0, -100px) scale(1); }
        .menu-container.open .bluetooth { transform: translate(-50%, -50%) translate(70px, -70px) scale(1); }
        .menu-container.open .flashlight { transform: translate(-50%, -50%) translate(100px, 0) scale(1); }
        .menu-container.open .location { transform: translate(-50%, -50%) translate(70px, 70px) scale(1); }
        .menu-container.open .dnd { transform: translate(-50%, -50%) translate(0, 100px) scale(1); }
        .menu-container.open .screenshot { transform: translate(-50%, -50%) translate(-70px, 70px) scale(1); }
    </style>
</head>
<body>
    <div class="menu-container" id="menu">
        <div class="background-circle"></div>
        <div class="option brightness" id="brightness">🔆</div>
        <div class="option wifi" id="wifi">📶</div>
        <div class="option airplane" id="airplane">✈️</div>
        <div class="option bluetooth" id="bluetooth">🅱️</div>
        <div class="option flashlight" id="flashlight">🔦</div>
        <div class="option location" id="location">📍</div>
        <div class="option dnd" id="dnd">🔕</div>
        <div class="option screenshot" id="screenshot">📸</div>
        <div class="center-btn open-icon" id="toggleBtn"></div>
    </div>

    <script>
        const menu = document.getElementById('menu');
        const toggleBtn = document.getElementById('toggleBtn');
        const options = document.querySelectorAll('.option');

        toggleBtn.addEventListener('click', () => {
            menu.classList.toggle('open');
            toggleBtn.classList.toggle('open-icon');
            toggleBtn.classList.toggle('close-icon');
        });

        options.forEach(option => {
            option.addEventListener('click', () => {
                options.forEach(opt => opt.classList.remove('selected'));
                option.classList.add('selected');
            });
        });
    </script>
</body>
</html>
DEV Community

Smart Screen Animation using html css and javascript

Top comments (0)

Read next

Testing LLM Applications: Misadventures in Mocking SDKs vs Direct HTTP Requests

9 Open Source Libraries to Supercharge Your Next Project 🔋⚡️

Learn Tailwind CSS By Building Some Cool Projects

True Alphanumeric / natural sorting in MySQL - why is the answer always recursion?
