---------------------------------

nettkom · 2 Янв 2025

------------------------------------------

Mi-Zaft · 2 Янв 2025

Хм, может быть тоже начать гайды выкладывать из нейронки?

nettkom · 2 Янв 2025

Ты просто гений

ubees · 2 Янв 2025

MaryDay · 2 Янв 2025

Весь форум в этот момент:

kiraz · 3 Янв 2025

предлагаю сделать отдельный тред где такие ребята как автор темы будут в опенсорс ебашить проект на пару с чат гпт

enotit · 3 Янв 2025

nettkom написал(а):

Анимированное меню в виде куба управления перелистованная колесико мыши

Посмотреть вложение 17624

HTML:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Куб</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #333;
        }
      
        .cube {
            width: 200px;
            height: 200px;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.1s linear;
        }
      
        .side {
             position: absolute;
            width: 200px;
            height: 200px;
            border: 1px solid white;
            line-height: 200px;
            font-size: 40px;
            text-align: center;
            color: white;
            /* Полупрозрачный фон */
             background-color: rgba(255, 255, 255, 0.5); /* Цвет фона с прозрачностью 50% */
        }
      
        .front {
            transform: translateZ(100px);
        }
      
        .back {
            transform: rotateY(180deg) translateZ(100px);
        }
      
        .right {
            transform: rotateY(90deg) translateZ(100px);
        }
      
        .left {
            transform: rotateY(-90deg) translateZ(100px);
        }
      
        .top {
            transform: rotateX(90deg) translateZ(100px);
        }
      
        .bottom {
            transform: rotateX(-90deg) translateZ(100px);
        }
    </style>
</head>
<body>
<div class="cube" id="cube">
    <div class="side front">Передняя</div>
    <div class="side back">Задняя</div>
    <div class="side right">Правая</div>
    <div class="side left">Левая</div>
    <div class="side top">Верхняя</div>
    <div class="side bottom">Нижняя</div>
</div>
<script>
    const cube = document.getElementById('cube');
  
    let xRotation = 0;
    let yRotation = 0;
  
    window.addEventListener('wheel', (event) => {
        // Получаем значение прокрутки колеса мыши
        const delta = event.deltaY;
      
        // В зависимости от направления прокрутки изменяем угол поворота куба
        if (delta > 0) {
            xRotation += 10;
        } else {
            xRotation -= 10;
        }
      
        // Применяем новые значения углов к кубу
        cube.style.transform = `rotateX(${xRotation}deg) rotateY(${yRotation}deg)`;
      
        // Отключаем стандартную прокрутку страницы
        event.preventDefault();
    });
  
    window.addEventListener('mousedown', () => {
        // Запоминаем начальные координаты мыши при нажатии кнопки
        let startX;
        let startY;
      
        function onMouseMove(event) {
            const { clientX, clientY } = event;
          
            // Если начальные координаты еще не установлены, устанавливаем их
            if (!startX) {
                startX = clientX;
                startY = clientY;
                return;
            }
          
            // Рассчитываем разницу между текущими и начальными координатами
            const dx = clientX - startX;
            const dy = clientY - startY;
          
            // Обновляем углы поворота куба
            xRotation += dx * 0.25;
            yRotation -= dy * 0.25;
          
            // Применяем новые значения углов к кубу
            cube.style.transform = `rotateX(${yRotation}deg) rotateY(${xRotation}deg)`;
          
            // Сбрасываем начальные координаты после каждого движения мыши
            startX = clientX;
            startY = clientY;
        }
      
        // Добавляем обработчик перемещения мыши при нажатой кнопке
        window.addEventListener('mousemove', onMouseMove);
      
        // Удаляем обработчики при отпускании кнопки мыши
        window.addEventListener('mouseup', () => {
            window.removeEventListener('mousemove', onMouseMove);
        }, { once: true });
    });
</script>
</body>
</html>

Предлагаю дурку в -реп добавить.

урок для кого? Для тех кто прошел курсы edu it-гигантов?

вот зачем оно нам?
Во-первых, дизайн 2000-х, сейчас эра легкого дизайна, чего-то объемного (не плоского в пространстве, не путай).
Во-вторых, для чего? Ну, я придумал как можно хранить сообщения на бересте, но какое применение? Покажи пример внутри gta, авось подтянется.
В-третьих, круто, что ты отрыл нейронку, серьезно, это крутой инструмент. Я без иронии и стеба, я ей нередко пользуюсь. Но увы, все что дает нейронка - нельзя принимать за чистую монету. Это инструмент, а не исполнитель. Не нужно всё что она даёт «показывать». Взял, покрутил, повертел, запомнил, сделал сам. Это называется обучение с учителем, где нейронка в каком-то виде учитель.
В-четвёртых, что с «задняя»? Почему она задом)))

Резюме: очень круто, что ты через объяснение на форуме пытаешься научиться сам. Так в целом и работает обучение. Многие педагоги говорят такое, не зазря сейчас эра «p2p” в педагогике, тот же прости и упаси Господи ФГОС (немного в мою темную сторону увело). Можешь взять, кто накинул +реп и сделать чатик в телеграме и друг другу показывать крутые вещички (я без иронии и стеба, я также раньше делал). Но здесь немного другая специфика, здесь львиная (не зря я употребил это слово) часть форума раза в 3 старше тебя. 90% в 2 (Харланд, ждем отчет с яндекс метрики). Мы всё-таки успели поиграться таким, ну или знаем как решать. У нас вопросы стоят чутка выше уровнем, если мы будем постить подобного рода контент, то форум будет 88 сообщений в час иметь, где каждый 3-й «как центрировать div” (да ios закрывай нормально кавычки тварь). Ну и эт, не ври, что используешь ИИ, максимально глупо выглядит.

я пытался не обидеть, а нормальным языком описать. если покажется иначе, напиши в тг(ссылка в подписи), я тебе голосовое запишу со своей интонацией (2.5р/ч напомню (шутка (нет)))!

всем добра и развития!

Поиск

---------------------------------

nettkom

Mi-Zaft

Гений

nettkom

ubees

Начинающий специалист

MaryDay

Начинающий специалист

kiraz

Специалист

enotit

Гений