Как составить колесо фортуны

Это онлайн-инструмент для случайного выбора названия или предмета.Его также называют выборщиком случайных имен, колесом имён или онлайн-рулеткой.Иногда людям сложно принимать решения. Затем составьте список существующих вариантов или кандидатов, а затем случайным образом выберите один из них. В этом случае вы можете использовать наш инструмент для принятия решений. Просто и весело.Вы можете изменить имена в текстовом поле, поместив одно имя в строку.Имена будут нарисованы по кругу.Просто щелкните круговое колесо, оно начнет вращаться в течение нескольких секунд. В результате случайным образом выбирается одно из имен в списке.Мы также предоставляем удобные сочетания клавиш, если вы используете рабочий стол.

Что происходит, когда вы начинаете вращаться (щелкаете)?Программа на этой странице сгенерирует действительно случайное число с помощью собственного javascript api и вычислит это число, чтобы указать на одно из имен.Затем круговое колесо начинает вращаться с использованием метода CSS3-2D.

Содержание

1. Что такое колесо фортуны?
2. Чем хороши геймифицированные попапы?
3. Как создать колесо фортуны?
4. Ключевые элементы колеса фортуны
5. Настройка параметров отображения для колеса фортуны
6. Как сделать колесо фортуны более эффективными?
7. Максимально используйте все возможности кастомизации
8. Вовремя выявляйте и предотвращайте “охотников”
9. Защитите себя от спама
10. Итог

Spin-a-sale, lucky spin, wheel popups, колесо фортуны – люди могут называть этот тип рекламы по-разному, но суть от этого не меняется. Важно только то, что эти попапы действительно работают!

Концепция spin-a-sale стала популярной после выхода в эфир популярного американского игрового шоу “Колесо фортуны”. Многие бренды и маркетологи быстро подхватили эту идею и внедрили ее в общение с аудиторией. По сей день посетители сайтов не могут устоять перед соблазном покрутить колесо и получить свою скидку. Что такое колеса фортуны и почему вам стоит задуматься о том, чтобы сделать их частью своей маркетинговой стратегии? 

Давайте разберемся как сделать колесо фортуны.

Что такое колесо фортуны?

Как видно из его названия, wheel popup – это геймифицированная popup форма в виде колеса фортуны, с которым пользователи могут взаимодействовать, чтобы моментально получить скидку или выгодное рекламное предложение. 

Пример попапа “Колесо фортуны” на сайте

Такие рекламные объявления часто встречаются на сайтах во время разных праздников, таких как Хэллоуин, Рождество и Черная пятница, а также в рамках обычных маркетінгових кампаний.

Чем хороши геймифицированные попапы?

Они имеют высокую конверсию. И на то есть несколько причин:

• Ненавязчивый характер. Spin-to-wins (“беспроигрышный вариант”) остаются на милю в стороне от традиционных попапов, нацеленных на выход. Колесо фортуны создано с целью предложить пользователю испытать удачу на месте, а не навязывать ему какие-то действия. Такой подход значительно влияет на коэффициент удержания и время, проведенное на вашем сайте. 
• Развлечения – это то, что люди любили и будут любить во все времена. Сегодня, когда пребывание дома стало чем-то совершенно естественным и зачастую неизбежным, пользователи хотят иметь больше возможностей для онлайн досуга. В такой ситуации колесо фортуны – это еще один способ разнообразить рутину онлайн-шопинга.
• Яркий дизайн. В сравнении с обычными лайтбоксами, плавающими панелями и классическими попапами, колеса фортуны имеют гораздо более красивый и заманчивый вид. Они притягивают взгляд пользователей яркими цветами, округлыми формами и привлекательными CTA-кнопками.
• Безопасность. Несмотря на то, что колесо фортуны включает в себя элементы азартной игры, вы все равно никогда ничего не теряете. Такие вращения приносят удачу, а значит, пользователь всегда выигрывает, и даже если акция или скидка получается незначительной, у человека все равно остаются только положительные эмоции.

На самом деле, все дело в геймификации. Согласно отчету Market Gen, 93% маркетологов подтверждают, что реклама с элементами игры является эффективным средством для повышения вовлеченности клиентов и увеличения конверсии на сайте.

Геймификация основана на психологии. Эта техника позволяет создавать нативную рекламу, которая обычно хорошо воспринимается не только пользователями, но и… блокировщиками рекламы, которые широко используются людьми по всему миру. 

Как работает колесо фортуны на сайтах?

Колесо состоит из нескольких сегментов, каждый из которых имеет свой приз, который могут выиграть посетители. Призом может быть скидка, бесплатная доставка, подарок или любой другой стимул, который вы хотите предложить.

Всплывающие окна фортуны – это не просто развлечение для клиента. Они могут повысить коэффициент конверсии на 5-20%.  Учитывая, что средний коэффициент конверсии всплывающего окна для многих крупных брендов электронной коммерции составляет 3,75%, становится ясно, что с помощью всплывающего окна с колесом фортуны можно добиться многого.

Как сделать колесо фортуны?

Давайте начистоту: когда речь идет о создании попапов spin-to-win, в большинстве случаев мы подразумеваем выбор готового шаблона и его адаптацию под ваши потребности. На рынке представлено множество попап конструкторов, поэтому выбрать, настроить и запустить свою кампанию с колесом фортуны, довольно просто. Всю необходимую информацию всегда можно найти в интернете всего за пару кликов. Несмотря на уникальный опыт геймификации, механика создания колеса фортуны ничем не отличается от любых других рекламных объявлений и форм, присутствующих на сайтах. Она включает в себя создание новой кампании, настройку ее ключевых элементов и установку параметров показа. 

Ключевые элементы колеса фортуны

Попап в виде колеса фортуны обычно состоит из текстовых блоков, рулетки с призами и CTA-кнопки. При необходимости, можно добавить поле для ввода email адреса на случай, если попап не отображается новым пользователям.

Как правило, колесо фортуны можно настроить следующими способами:

• Модифицировать и/или добавлять текстовые блоки
• Менять стиль текста, включая шрифты, размер, цвет, ширину, высоту и т.д.
• Модифицировать поощрительные призы и/или скидки на секциях колеса
• Менять цвет секций
• Регулировать шансы на победу для каждого приза
• Добавлять или удалять дополнительные разделы, например, email
• Модифицировать текст и дизайн CTA-кнопок.

Использование шаблонов является распространенной практикой при создании попапов (колесо фортуны – не исключение). Это помогает сэкономить время и предлагает нестандартные решения, которые доказали свою эффективность для бизнеса, подобного вашему.

Настройка параметров отображения для колеса фортуны

После того, как макет и контент колеса готовы, настало время нацелиться на вашу аудиторию, установив для него параметры отображения. Вот основные критерии, которые вы можете использовать:

• Типы контента, с которым пользователь взаимодействовал на вашем сайте
• Геолокация пользователя
• Тип устройства (десктоп, мобильный телефон или планшет)
• Время пребывания пользователя на сайте (например, 3 минуты)
• Действие или намерение (при попытке покинуть сайт)
• Различные виды активности (глубина прокрутки 30%) или бездействия (пользователь остается неактивным в течение 5 минут)

Правильная настройка параметров отображения очень важна для привлечения конверсий на ваш сайт. Мы предлагаем использовать вышеперечисленные критерии в комбинации и тестировать, какие из них наиболее эффективны для достижения ваших целей.

Как сделать колесо фортуны более эффективным?

Эффективное колесо фортуны должно привлекать больше клиентов, повышать конверсию и положительно влиять на коэффициент вовлеченности на вашем сайте. Как бы там ни было, успех каждой кампании зависит только от вас. В то же время можно выделить несколько лучших практик, которые помогут сделать ваши геймифицированные попапы еще более эффективными.

Максимально используйте все возможности кастомизации

Концепция lucky spin довольно проста. По сути, у вас есть колесо, текст и CTA. Неудивительно, что 9 из 10 попап колес выглядят одинаково. Бренды и компании используют одни и те же шаблоны и пренебрегают возможностью выделиться и подчеркнуть имидж своего бренда. Это не значит, что вы должны прекратить использовать шаблоны сразу после того, как дочитаете эту статью. Просто рассмотрите возможность максимального применения кастомизации в своем попап конструкторе. Вы также можете прибегнуть к помощи разработчиков и создать пользовательские компоненты для вашей попап рекламы. 

Вовремя выявляйте и предотвращайте “охотников”

“Охотники” – это пользователи, которые никогда не подумают о том, чтобы что-то у вас купить. Они всегда охотятся за выгодой и заходят только на те сайты, где им подготовили легкую добычу. Такие посетители оставляют свой email, чтобы затем пометить новости как спам. Но всем и так понятно, что высокий процент спама – это далеко не то, к чему бизнес должен стремиться, поэтому в качестве выхода из ситуации мы рекомендуем применять метод двухэтапной email-подписки и удалять из списка тех людей, которые вообще не спешат открывать ваши письма.

Защитите себя от спама

Еще один способ извлечь выгоду из вашей попап кампании обманным путем – это прокрутить колесо несколько раз. Многие недобросовестные пользователи чистят cookies браузера или взламывают код колеса, чтобы заставить его остановиться на нужном им предложении. Чтобы избежать подобных эксплойтов, мы рекомендуем использовать решение, включающее защиту от спама, например Recaptcha.

Итог

Колесо фортуны – это определенно тот тип рекламы, который пользователи предпочтут стандартным формам и плавающим панелям. Такие геймифицированные попапы помогают улучшить UX и разнообразить вашу стратегию email-маркетинга. Этот способ прекрасно подойдет для того, чтобы распространять скидки и собирать email адреса посетителей вашего сайта в увлекательной форме.

На некоторых сайтах можно встретить колесо фортуны с призами. Работает так: нажимаете кнопку, колесо начинает крутиться, и на что показывает стрелка после остановки — это и есть ваш приз. Есть сервисы, которые предоставляют такое колесо как платную услугу, а мы сделаем своё и бесплатно:

❗️ В этом проекте довольно люто используется CSS 3. Мы о нём ещё не писали, но мы исправимся и напишем. Многие штуки в CSS-коде будут выглядеть непривычно, поэтому мы их объясним прямо в комментариях. Крепитесь.

Готовим страницу

Как обычно в наших проектах, на странице будет только разметка невидимых блоков — всё содержимое появится потом, из скрипта. Внутреннее устройство будет такое:

За остальное будет отвечать скрипт.

<!DOCTYPE html>
<html lang="ru" >
<head>
  <meta charset="UTF-8">
  <title>Колесо удачи</title>
  <!-- используем всю ширину экрана -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- подключаем стили -->
  <link rel="stylesheet" href="style.css">

</head>
<body>
<!-- главный блок -->
<div class="deal-wheel">
  <!-- блок с призами -->
  <ul class="spinner"></ul>
  <!-- язычок барабана -->
  <div class="ticker"></div>
  <!-- кнопка -->
  <button class="btn-spin">Испытай удачу</button>
</div>
  <!-- подключаем скрипт -->
  <script  src="script.js"></script>

</body>
</html>

Сразу добавим стили в отдельный файл style.css:

/* делаем везде так, чтобы свойства width и height задавали не размеры контента, а размеры блока */
* {
  box-sizing: border-box;
}

/* общие настройки страницы */
body {
  /* подключаем сетку */
  display: grid;
  /* ставим всё по центру */
  place-items: center;
  /* если что-то не помещается на своё место — скрываем то, что не поместилось */
  overflow: hidden;
}

Настраиваем общий блок

Задача общего блока — установить связи между элементами, распределить их внутри виртуальной сетки и настроить параметры отображения внутренних элементов.

Чтобы не перегружать код одними и теми же параметрами, будем использовать CSS-переменные. Они начинаются с двух дефисов и работают внутри того блока, в котором прописаны. Также эти переменные понадобятся нам при настройке анимации в скрипте. 

Добавим стили в файл style.css. Читайте комментарии, тут всё подробно объяснено:

/* общий блок для всех элементов */
.deal-wheel {
  /* задаём переменные блока, внутри которого всё будет рисоваться */
  /* размеры колеса */
  --size: clamp(250px, 80vmin, 700px);
  /* clamp — функция CSS, которая задаёт три размера: минимальное, предпочтительное и максимальное. В данном случае мы хотим, чтобы колесо было не меньше 250 пикселей, не больше 700 пикселей, но в идеале — 80% от безопасно малой высоты окна браузера */
  /* настройки яркости и заливки фона секторов. Нам понадобится описать поведение градиента, это у нас делается через много переменных */
  --lg-hs: 0 3%;
  --lg-stop: 50%;
  --lg: linear-gradient(
      hsl(var(--lg-hs) 0%) 0 var(--lg-stop),
      hsl(var(--lg-hs) 20%) var(--lg-stop) 100%
    );
  /* добавляем позиционирование относительно других элементов */
  position: relative;
  /* подключаем стандартную CSS-сетку */
  display: grid;
  grid-gap: calc(var(--size) / 20);
  /* выравниваем содержимое блока по центру */
  align-items: center;
  /* задаём имена областей внутри сетки — в CSS теперь можно прямо назвать эти области */
  grid-template-areas:
    "spinner"
    "trigger";
  /* устанавливаем размер шрифта */
  font-size: calc(var(--size) / 21);
}

/* всё, что относится ко внутренним элементам главного блока, будет находиться в области сетки с названием spinner */
.deal-wheel > * {
  grid-area: spinner;
}

/* сам блок и кнопка будут находиться в области сетки с названием trigger и будут выровнены по центру */
.deal-wheel .btn-spin {
  grid-area: trigger;
  justify-self: center;
}

Готовим переменные в скрипте

Так как на самой странице у нас только блоки, всё остальное содержимое будем делать и добавлять через скрипт script.js. 

Первое, что нам понадобится, — завести все переменные, которые будем использовать в проекте. Начнём со списка призов. Обратите внимание, что цвета здесь указаны в системе HSL — hue, saturation, lightness (оттенок, насыщенность, яркость). Это не необходимость, можно было указать и в RGB, и в hex-значениях:

// надписи и цвета на секторах
const prizes = [
  {
    text: "Скидка 10%",
    color: "hsl(197 30% 43%)",
  },
  { 
    text: "Дизайн в подарок",
    color: "hsl(173 58% 39%)",
  },
  { 
    text: "Второй сайт бесплатно",
    color: "hsl(43 74% 66%)",
  },
  {
    text: "Скидка 50%",
    color: "hsl(27 87% 67%)",
  },
  {
    text: "Блог в подарок",
    color: "hsl(12 76% 61%)",
  },
  {
    text: "Скидок нет",
    color: "hsl(350 60% 52%)",
  },
  {
    text: "Таргет в подарок",
    color: "hsl(91 43% 54%)",
  },
  {
    text: "Скидка 30% на всё",
    color: "hsl(140 36% 74%)",
  }
];

Теперь создадим переменные, через которые будем работать со всеми элементами на странице:

Следующий шаг — переменные для разбивки блока на разноцветные секторы. Так как мы заранее не знаем, сколько у нас призов, то будем сразу всё высчитывать:

// на сколько секторов нарезаем круг
const prizeSlice = 360 / prizes.length;
// на какое расстояние смещаем сектора друг относительно друга
const prizeOffset = Math.floor(180 / prizes.length);
// прописываем CSS-классы, которые будем добавлять и убирать из стилей
const spinClass = "is-spinning";
const selectedClass = "selected";
// получаем все значения параметров стилей у секторов
const spinnerStyles = window.getComputedStyle(spinner);

Осталось добавить переменные, которые будут меняться в ходе работы скрипта:

Добавляем секторы и призы на экран

Теперь, когда у нас есть все нужные переменные, добавим призы в блок со списком “.spinner”. Логика такая:

// расставляем текст по секторам
const createPrizeNodes = () => {
  // обрабатываем каждую подпись
  prizes.forEach(({ text, color, reaction }, i) => {
    // каждой из них назначаем свой угол поворота
    const rotation = ((prizeSlice * i) * -1) - prizeOffset;
    // добавляем код с размещением текста на страницу в конец блока spinner
    spinner.insertAdjacentHTML(
      "beforeend",
      // текст при этом уже оформлен нужными стилями
      `<li class="prize" data-reaction=${reaction} style="--rotate: ${rotation}deg">
        <span class="text">${text}</span>
      </li>`
    );
  });
};

Также сделаем разбивку по цветным секторам: просто добавим нужные параметры к стилю у класса “.spinner”:

// рисуем разноцветные секторы
const createConicGradient = () => {
  // устанавливаем нужное значение стиля у элемента spinner
  spinner.setAttribute(
    "style",
    `background: conic-gradient(
      from -90deg,
      ${prizes
        // получаем цвет текущего сектора
        .map(({ color }, i) => `${color} 0 ${(100 / prizes.length) * (prizes.length - i)}%`)
        .reverse()
      }
    );`
  );
};

Теперь соберём всё вместе и сразу создадим объект с призами, чтобы потом было из чего выбирать:

// создаём функцию, которая нарисует колесо в сборе
const setupWheel = () => {
// сначала секторы
createConicGradient();
// потом текст
createPrizeNodes();
// а потом мы получим список всех призов на странице, чтобы работать с ними как с объектами
prizeNodes = wheel.querySelectorAll(".prize");
};

После запуска вам может показаться, что наш код не работает. Но на самом деле это не так: код работает как нужно, просто мы не добавили в стили новые параметры, которые использовали в коде — spinner и prize. Исправим это на следующем шаге.

Исправляем внешний вид колеса

Сейчас блок с колесом выглядит как прямоугольник, потому что зависит от содержимого с текстом. Чтобы это стало похоже на круг, добавим стили специально для секторов колеса:

/* сектор колеса */
.spinner {
  /* добавляем относительное позиционирование */
  position: relative;
  /* подключаем сетку */
  display: grid;
  /* выравниваем всё по центру */
  align-items: center;
  /* добавляем элемент в сетку */
  grid-template-areas: "spinner";
  /* устанавливаем размеры */
  width: var(--size);
  height: var(--size);
  /* поворачиваем элемент  */
  transform: rotate(calc(var(--rotate, 25) * 1deg));
  /* рисуем круглую обводку, а всё, что не поместится, — будет скрыто за кругом */
  border-radius: 50%
};
/* всё, что внутри этого блока, будет находиться в области сетки с названием spinner */
.spinner * {
  grid-area: spinner;
}

У нас появились нормальное деление круга на цветные секторы, но все надписи слиплись. Всё дело в относительном позиционировании. Так как мы ещё не задавали правила расстановки текста, каждый элемент получился на одном и том же месте. Чтобы их разнести по секторам, добавим стили для текста:

/* текст на секторах */
.prize {
  /* включаем «гибкую» вёрстку */
  display: flex;
  align-items: center;
  /* задаём отступы от краёв блока */
  padding: 0 calc(var(--size) / 6) 0 calc(var(--size) / 20);
  /* устанавливаем размеры */
  width: 50%;
  height: 50%;
  /* устанавливаем координаты, относительно которых будем вращать текст */
  transform-origin: center right;
  /* поворачиваем текст */
  transform: rotate(var(--rotate));
  /* запрещаем пользователю выделять мышкой текст на секторах */
  user-select: none;
}

Стало лучше, но кнопка теперь слишком мелкая. Нужно исправить.

Кнопка запуска

Сделаем текст на кнопке того же размера, что и надписи на секторах. Заодно пропишем внешний вид неактивной кнопки: пусть она будет полупрозрачной и с другим курсором. Тогда сразу будет понятно — кнопка работает, нажимать пока нельзя.

/* кнопка запуска колеса */
.btn-spin {
  color: white;
  background: black;
  border: none;
  /* берём размер шрифта такой же, как в колесе */
  font-size: inherit;
  /* добавляем отступы от текста внутри кнопки */
  padding: 0.9rem 2rem 1rem;
  /* скругляем углы */
  border-radius: 0.5rem;
  /* меняем внешний вид курсора над кнопкой на руку*/
  cursor: pointer;
}

/* если кнопка нажата и неактивна */
.btn-spin:disabled {
  /* меняем внешний вид курсора */
  cursor: progress;
  /* делаем кнопку полупрозрачной */
  opacity: 0.25;
}

Добавляем язычок

Язычок — это такой указатель на колесе, который всё время указывает на какой-то сектор. При вращении настоящего колеса фортуны металлический язычок касается столбиков на границе секторов и отклоняется в сторону. Так легко можно определить — перескочил язычок на новый сектор или скорости колеса не хватило и он остался на столбике, указывая на предыдущее значение.

Пока просто нарисуем язычок, а механику добавим чуть позже:

/* язычок */
.ticker {
  /* добавляем относительное позиционирование */
  position: relative;
  /* устанавливаем размеры */
  left: calc(var(--size) / -15);
  width: calc(var(--size) / 10);
  height: calc(var(--size) / 20);
  /* фон язычка */
  background: var(--lg);
  /* делаем так, чтобы язычок был выше колеса */
  z-index: 1;
  /* форма язычка */
  clip-path: polygon(20% 0, 100% 50%, 20% 100%, 0% 50%);
  /* устанавливаем точку, относительно которой будет вращаться язычок при движении колеса */
  transform-origin: center left;
}

Задаём количество оборотов

Если мы в жизни запустим такое колесо, то оно постепенно будет замедляться. За это отвечает сила трения и разные физические факторы. Чтобы нам реализовать такую же механику, мы заранее определим количество градусов, на которое повернётся колесо. Для этого добавим функцию, которая вернёт нам случайным образом некоторое число в зависимости от минимального и максимального параметра вращения:

// функция запуска вращения с плавной остановкой
const spinertia = (min, max) => {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
};

Запускаем колесо

Чтобы запустить колесо, нужно нажать на кнопку. Но так как мы в HTML-файле не прописывали обработчик нажатия, добавим такой обработчик в JS-файле. Читайте комментарии, чтобы разобраться подробнее, что происходит в этом блоке:

// отслеживаем нажатие на кнопку
trigger.addEventListener("click", () => {
  // делаем её недоступной для нажатия
  trigger.disabled = true;
  // задаём начальное вращение колеса
  rotation = Math.floor(Math.random() * 360 + spinertia(2000, 5000));
  // убираем прошлый приз
  prizeNodes.forEach((prize) => prize.classList.remove(selectedClass));
  // добавляем колесу класс is-spinning, с помощью которого реализуем нужную отрисовку
  wheel.classList.add(spinClass);
  // через CSS говорим секторам, как им повернуться
  spinner.style.setProperty("--rotate", rotation);
  // возвращаем язычок в горизонтальную позицию
  ticker.style.animation = "none";
  // запускаем анимацию вращение
  runTickerAnimation();
});

👉 Готовый код анимации вращения мы взяли с сайта css-tricks.com — там много интересного; если знаете английский, то загляните на досуге.

// функция запуска вращения с плавной остановкой
const runTickerAnimation = () => {
  // взяли код анимации отсюда: https://css-tricks.com/get-value-of-css-rotation-through-javascript/
  const values = spinnerStyles.transform.split("(")[1].split(")")[0].split(",");
  const a = values[0];
  const b = values[1];  
  let rad = Math.atan2(b, a);
  
  if (rad < 0) rad += (2 * Math.PI);
  
  const angle = Math.round(rad * (180 / Math.PI));
  const slice = Math.floor(angle / prizeSlice);

  // анимация язычка, когда его задевает колесо при вращении
  // если появился новый сектор
  if (currentSlice !== slice) {
    // убираем анимацию язычка
    ticker.style.animation = "none";
    // и через 10 миллисекунд отменяем это, чтобы он вернулся в первоначальное положение
    setTimeout(() => ticker.style.animation = null, 10);
    // после того как язычок прошёл сектор — делаем его текущим 
    currentSlice = slice;
  }
  // запускаем анимацию
  tickerAnim = requestAnimationFrame(runTickerAnimation);
};

Чтобы магия анимации сработала, добавим нужные свойства в CSS-файл:

/* анимация вращения */
.is-spinning .spinner {
  transition: transform 8s cubic-bezier(0.1, -0.01, 0, 1);
}

/* анимация движения язычка */
.is-spinning .ticker {
          animation: tick 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* эффект, когда колесо задевает язычок при вращении */
@keyframes tick {
  40% {
    /* чуть поворачиваем язычок наверх в середине анимации */
    transform: rotate(-12deg);
  }
}

Видно, что колесо запускается и останавливается, но больше ничего не происходит: кнопка не отжимается и приз никак не подсвечивается. Этим и займёмся.

Отжимаем кнопку

Кнопку можно отжимать только после того, как колесо полностью остановилось и нам выпал какой-то приз. Чтобы это сработало именно после остановки колеса, добавим ещё один обработчик событий. Он будет следить за анимацией секторов, и если она закончилась — запустится код обработчика:

// отслеживаем, когда закончилась анимация вращения колеса
spinner.addEventListener("transitionend", () => {
  // останавливаем отрисовку вращения
  cancelAnimationFrame(tickerAnim);
  // получаем текущее значение поворота колеса
  rotation %= 360;
  // выбираем приз
  selectPrize();
  // убираем класс, который отвечает за вращение
  wheel.classList.remove(spinClass);
  // отправляем в CSS новое положение поворота колеса
  spinner.style.setProperty("--rotate", rotation);
  // делаем кнопку снова активной
  trigger.disabled = false;
});

И сразу добавим код, который добавит спецэффектов в выпавший сектор:

// функция выбора призового сектора
const selectPrize = () => {
const selected = Math.floor(rotation / prizeSlice);
prizeNodes[selected].classList.add(selectedClass);
};

Добавляем спецэффект в приз

Последнее, что нам осталось сделать в этом проекте, — добавить спецэффект в призовой сектор. Сделаем его так: сделаем текст белым, а потом на мгновение сделаем его чуть больше, как будто он выпрыгивает на нас, а потом возвращается на место. И добавим тень, которую текст будет отбрасывать при вылете:

/* анимируем выпавший сектор */
.prize.selected .text {
  /* делаем текст белым */
  color: white;
  /* настраиваем длительность анимации */
  animation: selected 800ms ease;
}

/* настраиваем анимацию текста на выпавшем секторе по кадрам */
@keyframes selected {
  /* что происходит на 25% от начала анимации */
  25% {
    /* увеличиваем текст в 1,25 раза */
    transform: scale(1.25);
    /* добавляем тексту тень */
    text-shadow: 1vmin 1vmin 0 hsla(0 0% 0% / 0.1);
  }
  40% {
    transform: scale(0.92);
    text-shadow: 0 0 0 hsla(0 0% 0% / 0.2);
  }
  60% {
    transform: scale(1.02);
    text-shadow: 0.5vmin 0.5vmin 0 hsla(0 0% 0% / 0.1);
  }
  75% {
    transform: scale(0.98);
  }
  85% {
    transform: scale(1);
  }
}

Покрутить колесо фортуны на сайте проекта

<!DOCTYPE html>
<html lang="ru" >
<head>
  <meta charset="UTF-8">
  <title>Колесо удачи</title>
  <!-- используем всю ширину экрана -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- подключаем стили -->
  <link rel="stylesheet" href="style.css">

</head>
<body>
<!-- главный блок -->
<div class="deal-wheel">
  <!-- блок с призами -->
  <ul class="spinner"></ul>
  <!-- язычок барабана -->
  <div class="ticker"></div>
  <!-- кнопка -->
  <button class="btn-spin">Испытай удачу</button>
</div>
  <!-- подключаем скрипт -->
  <script  src="script.js"></script>

</body>
</html>

/* делаем везде так, чтобы свойства width и height задавали не размеры контента, а размеры блока */
* {
  box-sizing: border-box;
}

/* общие настройки страницы */
body {
  /* подключаем сетку */
  display: grid;
  /* ставим всё по центру */
  place-items: center;
  /* если что-то не помещается на своё место — скрываем то, что не поместилось */
  overflow: hidden;
}

/* общий блок для всех элементов */
.deal-wheel {
  /* задаём переменные блока */
  /* размеры колеса */
  --size: clamp(250px, 80vmin, 700px);
  /* настройки яркости и заливки фона секторов */
  --lg-hs: 0 3%;
  --lg-stop: 50%;
  --lg: linear-gradient(
      hsl(var(--lg-hs) 0%) 0 var(--lg-stop),
      hsl(var(--lg-hs) 20%) var(--lg-stop) 100%
    );
  /* добавляем позиционирование относительно других элементов */
  position: relative;
  /* подключаем сетку */
  display: grid;
  grid-gap: calc(var(--size) / 20);
  /* выравниваем содержимое блока по центру */
  align-items: center;
  /* задаём имена областей внутри сетки */
  grid-template-areas:
    "spinner"
    "trigger";
  /* устанавливаем размер шрифта */
  font-size: calc(var(--size) / 21);
}

/* всё, что относится ко внутренним элементам главного блока, будет находиться в области сетки с названием spinner */
.deal-wheel > * {
  grid-area: spinner;
}

/* сам блок и кнопка будут находиться в области сетки с названием trigger и будут выровнены по центру */
.deal-wheel .btn-spin {
  grid-area: trigger;
  justify-self: center;
}

/* сектор колеса */
.spinner {
  /* добавляем относительное позиционирование */
  position: relative;
  /* подключаем сетку */
  display: grid;
  /* выравниваем всё по центру */
  align-items: center;
  /* добавляем элемент в сетку */
  grid-template-areas: "spinner";
  /* устанавливаем размеры */
  width: var(--size);
  height: var(--size);
  /* поворачиваем элемент  */
  transform: rotate(calc(var(--rotate, 25) * 1deg));
  /* рисуем круглую обводку, а всё, что не поместится, — будет скрыто за кругом */
  border-radius: 50%;
}

/* всё, что внутри этого блока, будет находиться в области сетки с названием spinner */
.spinner * {
  grid-area: spinner;
}

/* текст на секторах */
.prize {
  /* включаем «гибкую» вёрстку */
  display: flex;
  align-items: center;
  /* задаём отступы от краёв блока */
  padding: 0 calc(var(--size) / 6) 0 calc(var(--size) / 20);
  /* устанавливаем размеры */
  width: 50%;
  height: 50%;
  /* устанавливаем координаты, относительно которых будем вращать текст */
  transform-origin: center right;
  /* поворачиваем текст */
  transform: rotate(var(--rotate));
  /* запрещаем пользователю выделять мышкой текст на секторах */
  user-select: none;
}

/* язычок */
.ticker {
  /* добавляем относительное позиционирование */
  position: relative;
  /* устанавливаем размеры */
  left: calc(var(--size) / -15);
  width: calc(var(--size) / 10);
  height: calc(var(--size) / 20);
  /* фон язычка */
  background: var(--lg);
  /* делаем так, чтобы язычок был выше колеса */
  z-index: 1;
  /* форма язычка */
  clip-path: polygon(20% 0, 100% 50%, 20% 100%, 0% 50%);
  /* устанавливаем точку, относительно которой будет вращаться язычок при движении колеса */
  transform-origin: center left;
}

/* кнопка запуска колеса */
.btn-spin {
  color: white;
  background: black;
  border: none;
  /* берём размер шрифта такой же, как в колесе */
  font-size: inherit;
  /* добавляем отступы от текста внутри кнопки */
  padding: 0.9rem 2rem 1rem;
  /* скругляем углы */
  border-radius: 0.5rem;
  /* меняем внешний вид курсора над кнопкой на руку*/
  cursor: pointer;
}

/* если кнопка нажата и неактивна */
.btn-spin:disabled {
  /* меняем внешний вид курсора */
  cursor: progress;
  /* делаем кнопку полупрозрачной */
  opacity: 0.25;
}

/* анимация вращения */
.is-spinning .spinner {
  transition: transform 8s cubic-bezier(0.1, -0.01, 0, 1);
}

/* анимация движения язычка */
.is-spinning .ticker {
          animation: tick 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* эффект, когда колесо задевает язычок при вращении */
@keyframes tick {
  40% {
    /* чуть поворачиваем язычок наверх в середине анимации */
    transform: rotate(-12deg);
  }
}

/* анимируем выпавший сектор */
.prize.selected .text {
  /* делаем текст белым */
  color: white;
  /* настраиваем длительность анимации */
  animation: selected 800ms ease;
}

/* настраиваем анимацию текста на выпавшем секторе по кадрам */
@keyframes selected {
  /* что происходит на 25% от начала анимации */
  25% {
    /* увеличиваем текст в 1,25 раза */
    transform: scale(1.25);
    /* добавляем тексту тень */
    text-shadow: 1vmin 1vmin 0 hsla(0 0% 0% / 0.1);
  }
  40% {
    transform: scale(0.92);
    text-shadow: 0 0 0 hsla(0 0% 0% / 0.2);
  }
  60% {
    transform: scale(1.02);
    text-shadow: 0.5vmin 0.5vmin 0 hsla(0 0% 0% / 0.1);
  }
  75% {
    transform: scale(0.98);
  }
  85% {
    transform: scale(1);
  }
}

// надписи и цвета на секторах
const prizes = [
  {
    text: "Скидка 10%",
    color: "hsl(197 30% 43%)",
  },
  { 
    text: "Дизайн в подарок",
    color: "hsl(173 58% 39%)",
  },
  { 
    text: "Второй сайт бесплатно",
    color: "hsl(43 74% 66%)",
  },
  {
    text: "Скидка 50%",
    color: "hsl(27 87% 67%)",
  },
  {
    text: "Блог в подарок",
    color: "hsl(12 76% 61%)",
  },
  {
    text: "Скидок нет",
    color: "hsl(350 60% 52%)",
  },
  {
    text: "Таргет в подарок",
    color: "hsl(91 43% 54%)",
  },
  {
    text: "Скидка 30% на всё",
    color: "hsl(140 36% 74%)",
  }
];

// создаём переменные для быстрого доступа ко всем объектам на странице — блоку в целом, колесу, кнопке и язычку
const wheel = document.querySelector(".deal-wheel");
const spinner = wheel.querySelector(".spinner");
const trigger = wheel.querySelector(".btn-spin");
const ticker = wheel.querySelector(".ticker");

// на сколько секторов нарезаем круг
const prizeSlice = 360 / prizes.length;
// на какое расстояние смещаем сектора друг относительно друга
const prizeOffset = Math.floor(180 / prizes.length);
// прописываем CSS-классы, которые будем добавлять и убирать из стилей
const spinClass = "is-spinning";
const selectedClass = "selected";
// получаем все значения параметров стилей у секторов
const spinnerStyles = window.getComputedStyle(spinner);

// переменная для анимации
let tickerAnim;
// угол вращения
let rotation = 0;
// текущий сектор
let currentSlice = 0;
// переменная для текстовых подписей
let prizeNodes;

// расставляем текст по секторам
const createPrizeNodes = () => {
  // обрабатываем каждую подпись
  prizes.forEach(({ text, color, reaction }, i) => {
    // каждой из них назначаем свой угол поворота
    const rotation = ((prizeSlice * i) * -1) - prizeOffset;
    // добавляем код с размещением текста на страницу в конец блока spinner
    spinner.insertAdjacentHTML(
      "beforeend",
      // текст при этом уже оформлен нужными стилями
      `<li class="prize" data-reaction=${reaction} style="--rotate: ${rotation}deg">
        <span class="text">${text}</span>
      </li>`
    );
  });
};

// рисуем разноцветные секторы
const createConicGradient = () => {
  // устанавливаем нужное значение стиля у элемента spinner
  spinner.setAttribute(
    "style",
    `background: conic-gradient(
      from -90deg,
      ${prizes
        // получаем цвет текущего сектора
        .map(({ color }, i) => `${color} 0 ${(100 / prizes.length) * (prizes.length - i)}%`)
        .reverse()
      }
    );`
  );
};

// создаём функцию, которая нарисует колесо в сборе
const setupWheel = () => {
  // сначала секторы
  createConicGradient();
  // потом текст
  createPrizeNodes();
  // а потом мы получим список всех призов на странице, чтобы работать с ними как с объектами
  prizeNodes = wheel.querySelectorAll(".prize");
};

// определяем количество оборотов, которое сделает наше колесо
const spinertia = (min, max) => {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
};

// функция запуска вращения с плавной остановкой
const runTickerAnimation = () => {
  // взяли код анимации отсюда: https://css-tricks.com/get-value-of-css-rotation-through-javascript/
  const values = spinnerStyles.transform.split("(")[1].split(")")[0].split(",");
  const a = values[0];
  const b = values[1];  
  let rad = Math.atan2(b, a);
  
  if (rad < 0) rad += (2 * Math.PI);
  
  const angle = Math.round(rad * (180 / Math.PI));
  const slice = Math.floor(angle / prizeSlice);

  // анимация язычка, когда его задевает колесо при вращении
  // если появился новый сектор
  if (currentSlice !== slice) {
    // убираем анимацию язычка
    ticker.style.animation = "none";
    // и через 10 миллисекунд отменяем это, чтобы он вернулся в первоначальное положение
    setTimeout(() => ticker.style.animation = null, 10);
    // после того, как язычок прошёл сектор - делаем его текущим 
    currentSlice = slice;
  }
  // запускаем анимацию
  tickerAnim = requestAnimationFrame(runTickerAnimation);
};

// функция выбора призового сектора
const selectPrize = () => {
  const selected = Math.floor(rotation / prizeSlice);
  prizeNodes[selected].classList.add(selectedClass);
};

// отслеживаем нажатие на кнопку
trigger.addEventListener("click", () => {
  // делаем её недоступной для нажатия
  trigger.disabled = true;
  // задаём начальное вращение колеса
  rotation = Math.floor(Math.random() * 360 + spinertia(2000, 5000));
  // убираем прошлый приз
  prizeNodes.forEach((prize) => prize.classList.remove(selectedClass));
  // добавляем колесу класс is-spinning, с помощью которого реализуем нужную отрисовку
  wheel.classList.add(spinClass);
  // через CSS говорим секторам, как им повернуться
  spinner.style.setProperty("--rotate", rotation);
  // возвращаем язычок в горизонтальную позицию
  ticker.style.animation = "none";
  // запускаем анимацию вращение
  runTickerAnimation();
});

// отслеживаем, когда закончилась анимация вращения колеса
spinner.addEventListener("transitionend", () => {
  // останавливаем отрисовку вращения
  cancelAnimationFrame(tickerAnim);
  // получаем текущее значение поворота колеса
  rotation %= 360;
  // выбираем приз
  selectPrize();
  // убираем класс, который отвечает за вращение
  wheel.classList.remove(spinClass);
  // отправляем в CSS новое положение поворота колеса
  spinner.style.setProperty("--rotate", rotation);
  // делаем кнопку снова активной
  trigger.disabled = false;
});

// подготавливаем всё к первому запуску
setupWheel();

Узнавайте о новых идеях для интересных уроков РКИ в наших социальных сетях: 

Колесо фортуны, подобное тому, которое используется в популярной телевизионной лотерее, представляет собой круговое колесо, которое вращается, чтобы определить, что вы выиграете – или проиграете! Вы можете использовать колесо фортуны на ярмарках, вечеринках и фестивалях, и это очень просто. Эта статья покажет вам шаги. Тебе повезло? Крути колесо!

Шаги

Метод 1 из 5: сделайте колесо

Шаг 1. Получите кружок из фанеры

Вы можете найти их в магазинах товаров для дома. Размеров много, но можно выбрать один из 90 см. Идеальная толщина 2-2,5 см. Круг должен быть достаточно большим, чтобы накапливать момент инерции, и достаточно маленьким, чтобы его можно было транспортировать.

Шаг 2. Отметьте центр круга

Найдите центр диска, проведя примерно две перпендикулярные линии по диаметрам. Точка пересечения – центр. Вставьте в это место небольшой гвоздь или винт.

Шаг 3. Прикрепите веревку и карандаш к гвоздю и используйте его как большой циркуль, чтобы нарисовать круг

Нарисуйте круг примерно на 2,5-5 см меньше фанеры.

Шаг 4. Установите интервалы

Сначала определите количество клиньев, которое вы хотите на своем колесе. Например, если вы хотите 16, вы должны разделить 360 (количество градусов в круге) на количество клиньев и записать это число. В этом примере результат 22, 5. Напишите это число.

Шаг 5. Делаем клинья

Используя транспортир, начните с нулевой угловой точки и отметьте все точки, кратные числу, вычисленному на предыдущем шаге. – В этом случае вам нужно будет сделать отметки под углами 22, 5, 45 °, 67,5 °, 90 °, 112,5 °, 135 °, 157,5 °, 202,5 °, 225 °, 247,5 °, 270 °, 292,5 °, 315 °. и 337,5 °

• Проведите линии, начиная с первой: соедините две отметки на противоположных сторонах круга – они должны образовать угол 180 °. Повторите процесс для следующих знаков, например, 22, 5 и 202, 5. Нарисуйте линии, пока они не встретятся с кругом, который вы нарисовали ранее.
• При желании можно сделать клинья разных размеров. С большей вероятностью возникнут большие клинья, а до маленьких будет труднее добраться.

Шаг 6. Спланируйте расположение столбов

Между линиями, между нарисованными вами кругами и краем круга сделайте отметку. Вы можете измерить их, если хотите, но это не обязательно, если они находятся на одинаковом расстоянии от внешнего круга по всей окружности.

Шаг 7. Обрезать колья

Вам понадобится столько же кольев, сколько клиньев. Сделайте каждый столбик длиной 7-10 см и диаметром 1-2 см.

Шаг 8. Просверлите отверстия

Используйте дрель с подходящим сверлом (равным диаметру столбов) и просверлите отверстия до середины дерева по всей окружности.

Шаг 9. Приклейте столбы

Убедитесь, что они надежно закреплены, чтобы не разлететься при вращении колеса!

Шаг 10. Украшаем колесо

Раскрасьте секции в разные цвета или чередующиеся цвета или выберите украшение по своему усмотрению.

Шаг 11. Дайте каждой секции приз

Эти призы могут быть мягкими игрушками, денежными вознаграждениями или билетами на спортивное мероприятие.

Метод 2 из 5. Сделайте опору

Шаг 1. Измерьте базу

Он должен быть толщиной 2,5 см и шириной не менее круга. Для нашего 90-сантиметрового колеса у вас должно быть основание шириной 90-120 см. Убедитесь, что она достаточно глубокая, чтобы выдержать вес колеса (плюс усилие, прилагаемое для его поворота). 50-90 см будет хорошо.

Шаг 2. Измерьте держатель колеса

Он должен быть толщиной 1-2 см и как минимум на 30 см длиннее диаметра колеса. Например, для колеса диаметром 90 см подставка должна быть не менее 120 см в высоту и такой же ширины, как и основание.

Шаг 3. Проведите прямую линию через нижнюю часть основания, перпендикулярно длинной стороне и примерно две трети поперечника

Проведите ровную линию сверху. Это смещение предотвратит опрокидывание колеса при вращении с большим усилием.

• Просверлите четыре направляющих отверстия по этой линии с помощью сверла 0, 12. Измерьте расстояние между краем основания и первым и последним отверстиями. Сделайте такие же измерения на дне подставки и просверлите там направляющие отверстия.
• Налейте немного клея по верхней линии, поместите опору перпендикулярно основанию и, используя шурупы по крайней мере в два раза толще основы, прикрутите две детали вместе.
• С помощью сверла просверлите направляющие отверстия для двух центральных отверстий и вставьте два последних винта. Затяните все винты и дайте основанию высохнуть в течение 24 часов.

Шаг 4. Украшаем фон

Когда все высохнет и станет твердым, украсьте обои как хотите.

Метод 3 из 5: установите колесо

Шаг 1. Отметьте, где разместить колесо

Сделайте отметку посередине ширины носителя: 60 см, если ширина носителя 120 см. Также добавьте 7,5-15 см к радиусу колеса и отметьте это расстояние от начала стойки. Например, если у вас колесо 90 см, сделайте отметку примерно в 60 см от начала опоры (45 см + 15 см).

Отметьте X в месте пересечения двух линий

Шаг 2. Просверлите отверстие в центре колеса

Убедитесь, что он достаточно большой, чтобы вместить стержень диаметром 1,3 см, и пусть он свободно вращается на нем. Используя то же сверло, просверлите патрон, на котором вы сделали крестообразный шлиц X.

Шаг 3. Установите колесо на держатель

Наденьте металлическую шайбу на ось, затем вставьте ее в колесо. Сзади колеса установите еще пару шайб, затем наденьте штифт и шайбу в сборе на держатель. С обратной стороны опорной доски наденьте шайбу на штифт, затем затяните гайку до тех пор, пока колесо не начнет останавливаться, и снова ослабьте ее, чтобы она могла свободно вращаться.

Метод 4 из 5: Ла Фальда

Шаг 1. Сделайте шаг

Вам понадобится тяжелый и прочный кусок кожи. Вы можете использовать старую пару обуви или старый кожаный ремень.

Он должен быть 7,5–12,5 см в длину и примерно 0,5–1 см в толщину

Шаг 2. Остановите заслонку

Сделайте тиски из двух деревянных кусков, шурупов и вставьте кожаную полоску посередине. Присоедините тиски к держателю.

Убедитесь, что винты не проходят через другую сторону деревянного блока тисков

Шаг 3. Прикрепите заслонку

Над колесом, примерно на полпути вверх по опоре, просверлите отверстие диаметром элемента заслонки.

Налейте немного клея в отверстие и вставьте тиски. Дайте ему высохнуть в течение нескольких часов, прежде чем начинать отжим

Метод 5 из 5: Правила игры

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

Шаг 1. Установите цену для вращения колеса

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

Шаг 2. Определитесь с максимальным количеством снимков

Иногда люди попадают в полосу и начинают выигрывать призы. Чтобы этого не произошло, определите максимальное количество бросков для каждого человека.

Совет

• Попробуйте создавать рисунки, создающие оптические иллюзии при повороте колеса. Вы можете попробовать разные рисунки на бумаге, чтобы узнать, какие из них работают.
• Предлагайте различные награды.
• Если вы решили украсить столбы, используйте набор цветов, например, радугу.