готовый код html рулетка
Добавляем скрипт рулетки на лендинг/прелендинг
Добавив рулетку и форму заказа отпадает необходимость использовать лендинг. Получаем больший процент попавших на форму заказа юзеров, чем было бы переходов на лендинг. На некоторых гео и офферах это заметно повышает % конверсий.
В итоге мы получим вот такую рулетку:
Берем нужный преленд с сайта партнерки или выкачиваем понравившийся любым из этих способов: https://cpa.rip/stati/copy-landing/.
Закидываем в корень преленда папку «ruletka» (все файлы в конце статьи).
В папке картинку «image11.png» меняем на фото товара.
В коде преленда подключаем скрипты и стили, копируем код из файла «скрипты и стили.txt», который находится в архиве.
Если код jQuery уже был подключен, строку убираем.
В нужном месте преленда, после кнопки перехода на ленд, добавляем основной код из файла «код рулетки.txt». Обычно или в конце преленда или между основной частью и блоком комментариев.
Вот пример такого места на скрине:
Находим код кнопки в коде преленда и сразу за ним вставляем кода рулетки.
*Текст на кнопке меняем например на «Получить скидку».
Разберем части кода.
Код блока заказа. А) фото товара с указанием скидки. Б) Таймер. В) Форма заказа*. Г) Срок действия акции.
Форму заказа необходимо настроить для передачи лидов по API вашей партнерской программы. В каждой партнерской программе это реализовано по-своему. Необходимо руководствоваться их инструкцией или обратиться к менеджеру.
Чаще всего работает следующим образом (на примере партнерки Offerrum): к преленду подключается файл обработчик «order.php». Редактируется html-код формы заявки на лендинге, чтобы форма в качестве параметра action ссылалась на файл «order.php». На скриншоте ниже уже отредактированный код лендинга, форма в котором в качестве параметра action использует order.php
При нажатии кнопки «submit» order.php отправляет данные формы в партнерку.
Перед работой необходимо залить преленд на сервер и сделать тестовый заказ, чтобы убедиться в работоспособности формы приема заявок.
Код всплывающего окна
Все тексты меняем на свое усмотрение.
Результат: при нажатии любой кнопки или ссылки на преленде появляется рулетка, к которой страница автоматический прокручивается:
После вращения рулетки появляется всплывающее окно с результатом:
Юзер закрывает попап и видит форму заказа + мотивирующие к заказу элементы (старая/новая цена, таймер, срок действия акции):
Как сделать колесо фортуны на сайте
Достаточно одного скрипта и немного CSS
На некоторых сайтах можно встретить колесо фортуны с призами. Работает так: нажимаете кнопку, колесо начинает крутиться, и на что показывает стрелка после остановки — это и есть ваш приз. Есть сервисы, которые предоставляют такое колесо как платную услугу, а мы сделаем своё и бесплатно:
❗️ В этом проекте довольно люто используется CSS 3. Мы о нём ещё не писали, но мы исправимся и напишем. Многие штуки в CSS-коде будут выглядеть непривычно, поэтому мы их объясним прямо в комментариях. Крепитесь.
Готовим страницу
Как обычно в наших проектах, на странице будет только разметка невидимых блоков — всё содержимое появится потом, из скрипта. Внутреннее устройство будет такое:
За остальное будет отвечать скрипт.
Сразу добавим стили в отдельный файл style.css:
Настраиваем общий блок
Задача общего блока — установить связи между элементами, распределить их внутри виртуальной сетки и настроить параметры отображения внутренних элементов.
Чтобы не перегружать код одними и теми же параметрами, будем использовать CSS-переменные. Они начинаются с двух дефисов и работают внутри того блока, в котором прописаны. Также эти переменные понадобятся нам при настройке анимации в скрипте.
Добавим стили в файл style.css. Читайте комментарии, тут всё подробно объяснено:
Готовим переменные в скрипте
Так как на самой странице у нас только блоки, всё остальное содержимое будем делать и добавлять через скрипт script.js.
Первое, что нам понадобится, — завести все переменные, которые будем использовать в проекте. Начнём со списка призов. Обратите внимание, что цвета здесь указаны в системе HSL — hue, saturation, lightness (оттенок, насыщенность, яркость). Это не необходимость, можно было указать и в RGB, и в hex-значениях:
Теперь создадим переменные, через которые будем работать со всеми элементами на странице:
// создаём переменные для быстрого доступа ко всем объектам на странице — блоку в целом, колесу, кнопке и язычку
const wheel = document.querySelector(«.deal-wheel»);
const spinner = wheel.querySelector(«.spinner»);
const trigger = wheel.querySelector(«.btn-spin»);
const ticker = wheel.querySelector(«.ticker»);
Следующий шаг — переменные для разбивки блока на разноцветные секторы. Так как мы заранее не знаем, сколько у нас призов, то будем сразу всё высчитывать:
Осталось добавить переменные, которые будут меняться в ходе работы скрипта:
// переменная для анимации⠀
let tickerAnim;⠀
// угол вращения
let rotation = 0;⠀
// текущий сектор⠀
let currentSlice = 0;⠀
// переменная для текстовых подписей
let prizeNodes;
Добавляем секторы и призы на экран
Теперь, когда у нас есть все нужные переменные, добавим призы в блок со списком «.spinner». Логика такая:
Также сделаем разбивку по цветным секторам: просто добавим нужные параметры к стилю у класса «.spinner»:
Теперь соберём всё вместе и сразу создадим объект с призами, чтобы потом было из чего выбирать:
// создаём функцию, которая нарисует колесо в сборе
const setupWheel = () => <
// сначала секторы
createConicGradient();
// потом текст
createPrizeNodes();
// а потом мы получим список всех призов на странице, чтобы работать с ними как с объектами
prizeNodes = wheel.querySelectorAll(«.prize»);
>;
// подготавливаем всё к первому запуску
setupWheel();
После запуска вам может показаться, что наш код не работает. Но на самом деле это не так: код работает как нужно, просто мы не добавили в стили новые параметры, которые использовали в коде — spinner и prize. Исправим это на следующем шаге.
Исправляем внешний вид колеса
Сейчас блок с колесом выглядит как прямоугольник, потому что зависит от содержимого с текстом. Чтобы это стало похоже на круг, добавим стили специально для секторов колеса:
У нас появились нормальное деление круга на цветные секторы, но все надписи слиплись. Всё дело в относительном позиционировании. Так как мы ещё не задавали правила расстановки текста, каждый элемент получился на одном и том же месте. Чтобы их разнести по секторам, добавим стили для текста:
Стало лучше, но кнопка теперь слишком мелкая. Нужно исправить.
Кнопка запуска
Сделаем текст на кнопке того же размера, что и надписи на секторах. Заодно пропишем внешний вид неактивной кнопки: пусть она будет полупрозрачной и с другим курсором. Тогда сразу будет понятно — кнопка работает, нажимать пока нельзя.
Добавляем язычок
Язычок — это такой указатель на колесе, который всё время указывает на какой-то сектор. При вращении настоящего колеса фортуны металлический язычок касается столбиков на границе секторов и отклоняется в сторону. Так легко можно определить — перескочил язычок на новый сектор или скорости колеса не хватило и он остался на столбике, указывая на предыдущее значение.
Пока просто нарисуем язычок, а механику добавим чуть позже:
Задаём количество оборотов
Если мы в жизни запустим такое колесо, то оно постепенно будет замедляться. За это отвечает сила трения и разные физические факторы. Чтобы нам реализовать такую же механику, мы заранее определим количество градусов, на которое повернётся колесо. Для этого добавим функцию, которая вернёт нам случайным образом некоторое число в зависимости от минимального и максимального параметра вращения:
Запускаем колесо
Чтобы запустить колесо, нужно нажать на кнопку. Но так как мы в HTML-файле не прописывали обработчик нажатия, добавим такой обработчик в JS-файле. Читайте комментарии, чтобы разобраться подробнее, что происходит в этом блоке:
👉 Готовый код анимации вращения мы взяли с сайта css-tricks.com — там много интересного; если знаете английский, то загляните на досуге.
Чтобы магия анимации сработала, добавим нужные свойства в CSS-файл:
Видно, что колесо запускается и останавливается, но больше ничего не происходит: кнопка не отжимается и приз никак не подсвечивается. Этим и займёмся.
Отжимаем кнопку
Кнопку можно отжимать только после того, как колесо полностью остановилось и нам выпал какой-то приз. Чтобы это сработало именно после остановки колеса, добавим ещё один обработчик событий. Он будет следить за анимацией секторов, и если она закончилась — запустится код обработчика:
И сразу добавим код, который добавит спецэффектов в выпавший сектор:
// функция выбора призового сектора
const selectPrize = () => <
const selected = Math.floor(rotation / prizeSlice);
prizeNodes[selected].classList.add(selectedClass);
>;
Добавляем спецэффект в приз
Последнее, что нам осталось сделать в этом проекте, — добавить спецэффект в призовой сектор. Сделаем его так: сделаем текст белым, а потом на мгновение сделаем его чуть больше, как будто он выпрыгивает на нас, а потом возвращается на место. И добавим тень, которую текст будет отбрасывать при вылете:
Создание колеса рулетки с использованием HTML5 Canvas
HTML5 сейчас очень популярен во всем Интернете, поэтому я решил, что я поделюсь с вами некоторыми знаниями HTML5. Я работал с Flash и Flex последовательно в течение последних нескольких лет, поэтому я могу легко удалять и манипулировать графикой в нем, но я мало что сделал с HTML5. Это побудило меня попытаться воссоздать что-то, что я построил во Flash в HTML5. Вот на что мы будем смотреть и учиться строить в этом уроке.
Несколько вещей должны быть упомянуты. Во-первых, IE просто не реализует тег canvas >, что означает, что он не будет работать в IE, Google выпустил Explorer Canvas, который в некоторой степени исправляет это. Я, однако, не беспокоился о добавлении этого в этот учебник, потому что этот пост о создании контента. Кроме того, есть некоторые мелочи, которые не работают в других браузерах. Наконец, в Mobile Safari (iPhone, iPod Touch и iPad) неправильно реализован рендеринг текста.
Чтобы все пошло как по маслу, мы сначала добавим простой HTML. Это включает тег canvas >, который мы используем для этого урока. Единственный другой элемент, который мы собираемся использовать, это кнопка ввода, чтобы вращать колесо. Я также добавил немного встроенного стиля для размещения кнопки.
Глядя на новый текстовый чертеж, мы начинаем с сохранения текущего состояния контекста — это позволит нам вращать и переводить текст, не затрагивая все остальное. Затем мы устанавливаем некоторые теневые элементы, которые добавят тень на текст. Далее мы переходим к переводу и повороту текста, сначала мы переводим текст в правильное положение на колесе, а затем поворачиваем его. Рисование текста следует за этим, но с дополнительным эффектом центрирования текста путем его измерения и деления на 2, чтобы сместить его. Вы заметите, что мы берем название ресторана из глобального массива. Наконец, мы возвращаемся к нашему исходному состоянию, в котором мы сохранили, это гарантирует, что преобразования не влияют на последующее рисование. Стрелку еще проще объяснить, мы просто перемещаемся в один угол и рисуем линии, чтобы создать форму, и заливаем ее черным.
Ниже у меня есть полный код для этой демонстрации. Я объясню код вращения и анимации сразу после.
Ну, это в значительной степени завершение этого поста. Мне очень нравится, как идут дела с HTML5 и тегом canvas. Хотя он еще не совсем готов к работе в прайм-тайм. Я с нетерпением жду следующих нескольких лет веб-разработки.
Если у вас есть какие-либо вопросы по учебнику или вы просто хотите отмахнуться от моих навыков кодирования, не стесняйтесь оставлять комментарии.
Как я делал realtime рулетку на NodeJS & VueJS
Привет друзья, хочу поведать вам, одну очень выдающуюся историю о том как я делал онлайн рулетку для одного западного заказчика. И конкретно в этой статье я по большей части коснусь разработки фронтенда.
Забегая вперед хочется показать результат:
Как все начиналось
Обратился как-то ко мне один мой старый заказчик, и предложил пофаниться и сделать многопользовательскую онлайн рулетку на сокетах. Бюджет неплохой, сроки сжатые. Ну ок. Почему бы нет, руки уже чесались, но без бекенда я не начинал… Как только появился первый вариант бекенда. Я сразу же начал действовать. В руки мне попал набросок дизайна, и закрутилось завертелось.
Немного верстки
Первым делом я сделал верстку доски ставок. Все на HTML, CSS, но если быть честным то я взял ее тут. Какой то добрый человек выложил ее на gitHub. Низкий поклон ему. Конечно в последствии ее пришлось допилить. Но основа уже есть
Ну ок, вторая задача это механика ставок
Для реализации данной задачи я решил разбить мое маленькое VueJS приложение на несколько модулей, вернее Vuex state модулей, для удобства использовал встроенный нэймспейсинг
Так я храню информацию о ячейках
Принцип работы hover
По клику подсвеченные ячейки пишутся в массив ставок
На самом деле происходит целый цикл действий
В итоге мы получаем вот такой массив ставок
Размещение фишек
Фишки разместились на втором слое над доской, при появлении нового элемента в массиве фишка вылетает из своей стопки, плавная анимация реализована с помощью типичного transition встроенного во VueJS
В заключение
Хочется отметить мощь frontend фреймворка VueJS. Его легкость и просто которую я испытал в ходе работы с ним. Раньше мне много приходилось с ним работать, но все задачи — не более чем SPA для админов/CRM и т.д.
В следующей части моего повествования мы затроним по большей части бекенд, веренее его отсутствие и то как я выкрутился из этой ситуации.
UPD: Для наглядности в начало статьи я добавил видео с итоговым результатом.
Модуль Рулетка v.1.0
Данный модуль позволяет организовать полноценную рулетку на вашем сайте. Собственно цель игры ясна каждому, если нет:
Что может пользователи:
* Сделать ставку
* Просмотреть свои текущие ставки
* Просмотреть все текущие ставки
* Просмотреть статистику выпадания за текущий день
* Просмотреть ставки и выигрыши за определённую игру в текущем дне
* Просмотреть ставки и выигрыши за прошлую игру
* Страница правил игры
* Сумма все ставок (профиль)
* Сумма всех выигрышей (профиль)
Другое:
* Автоматизация рулетки (приём ставок, розыгрыш, выигрыш)
* Все выигрышные числа за текущий месяц хранятся в файле. Тем самым можно гарантировать пользователям честную игру (Система контроля честности игры)
* Возможность интеграции с другими модулями, организующие баланс пользователя на сайте
* Высокий уровень безопасности
* ЧПУ
* Другое
Админцентр:
* Главное меню: краткая статистика.
* Настройки: общие настройки.
* Архивы чисел (выигрышных)
Внимание!
Модулем не предусмотрена система пополнения баланса, но вы можете интегрировать модуль с другими модулями, предоставляющими эту возможность.
Цена модуля: 30$
По всем вопросам прошу писать на email или в icq (пять7754465пять).