Рулетка в модальном окне КАРДИО-2

Упсс... Если фотки и гифки, сразу не грузятся😱, ждемс - там самое вкусное🔥 Если ждемс, не помогает - перезагрузка страницы, может помочь!

@Ads Games

Мануал по установке и настройке

Рулетка украсит прелендинги на кардио, гипертонию. Усиление эффекта До/После. Смена картинок, больное сердце/здоровое сердце - что может быть красноречивее? 

Появление картинок анимировано с помощью css. Больное сердце пульсирует слабо и c неровным ритмом. Анимация, сама по себе, вызывает дискомфортные ощущения. Картинка "здоровое сердце" появляется взамен и начинает пульсировать ритмично и сильно. Смена эмоций - гарантирована! 

Отличается от рулетки "КАРДИО" дополнительными анимированными картинками. Для первой части, с больным сердцем - картинка с цифрами повышенного давления. Для картинки, со здоровым сердцем - картинка с нормальным давлением.

Видео обзор

 Рулетка появляется при попытке вызвать форму контактов или при клике на любой элемент прелендинга.

В скрытом состоянии, рулетки на сайте - нет. Согласитесь, что рулетка на сайте не имеющем отношения к казино - это как-то неуместно:) А если рулетка скрыта - нет никаких противоречий, не нужно искать оснований, что бы разместить на странице эту увлекательную штуку. 

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

Теперь о сюрпризе... Сюрприз в поп-апе.

После всего этого действа, разумеется - форма контактов. 

Форма появляется постепенно, с css анимацией.

Я, подбирал комплекты (окно с рулеткой, фото колеса рулетки, фото с подложкой, фото курсора, цвета поп-апа и цвета формы) в приятном, моему глазу, сочетании (о вкусах - не спорят😊 - на всякий случай).

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

Не согласны? Примерьте, на себя!

Как это работает

Модальное окно и блок рулетка/поп-ап/форма контактов работают на чистом "js" и "css" анимациях. При тестировании - "не кусались" с функционалом прелендингов.

С установкой и использованием, справится - любой. Все просто - по принципу drag-n-drop. 

Все варианты рулеток и форм контактов "работают" на одной платформе. Разница между модальным окном с формой контактов и модальным окном с рулеткой, в двух дополнительных строчках кода и скрипте с функционалом для рулетки. Первоначальный вес html кода страницы меняется очень незначительно.

Я выделил в отдельный файл весь html код, добавляемый на страницу сайта:

1. html код модального окна со строками подключения рулетки и поп-апа, и кодом формы контактов (без скрытых <input/> полей - у каждого свой набор)
2. Строка подключения стилей модального окна
3. Строка подключения скрипта модального окна и скрипт с настройками модального окна
4. Скрипт маски телефонного номера

Вес html файла со всеми кодами (с пробелами, отступами и закомментированными поясняющими строками) - 4.57 kB. Если убрать пробелы и закомментированные строки - 3.86 kB. Маску телефонного номера можно подключить локально - будет еще меньше.

Стили окна с рулеткой, поп-апа и формы разделены и добавляются на страницу сайта скриптом и постепенно. В некотором роде - прогрессивный css. 

Вес всех css файлов

1. hystmodal.css - стили модального окна
2. wheel.css - стили окна с рулеткой
3. pop-up.css - стили поп-апа
4. form.css - стили формы

Механика работы скрипта.

"js" скрипт:

• Добавляет в очередь на загрузку, стиль окна с рулеткой - "wheel.css"
• После активации модального окна - динамически добавляет, на страницу сайта, "html" код рулетки
• После клика на кнопку "Вращать" - запускает анимацию вращения колеса рулетки, одновременно начинает подгружаться стиль поп-апа, открывающегося после вращения рулетки - "pop-up.css"
• После окончания вращения рулетки - на страницу, динамически добавляется "html" код поп-апа
• Во время работы анимаций в окне с поп-апом - подгружаются стили формы "form.css"
• После клика на кнопку в поп-апе, отключается отображение рулетки и поп-апа и включается отображение формы контактов

Вес файлов js скриптов

1. hystmodal.min.js - минимизированный скрипт модального окна
2. wheel.js - скрипт блока с рулеткой

На "css" работают:

• Анимация вращения колеса рулетки
• Анимация появление поп-апа 
• Анимации событий внутри поп-апа (появление текстовых блоков, анимации текста, смена фото, появление кнопки внутри поп-апа)
• Анимация появления формы контактов

Вес всех фото (фото для модального окна, фото для рулетки, фото для поп-апа и фото для формы)

Тексты в окне с рулеткой, тексты в поп-апе и пути к фото прописываются и редактируются в начале скрипта, в разделе params - все просто и понятно. Установка и настройка модального окна описана в мануале

Верстка блока с рулеткой, подходит для всех устройств (ПК, планшеты, мобильные). Рулетка появляется поверх содержимого - никак не влияет на отображение контента на сайте и не мешает функциональности.

Стили рулетки, поп-апа и формы контактов прописаны по id элементов (1) и css классам (2).

Ко всем css свойствам добавлен !important. Маловероятно "смешивание" стилей со стилями сайта.

Для шрифтов прописаны - вес, цвет, размерность и указано семейство шрифтов (самые популярные наборы шрифтов из подходящих для всех браузеров - "'Times New Roman', 'Times', serif" и "'Roboto', 'Segoe UI', sans-serif").

Блок с заголовком и подзаголовком (1) сверстаны через (position: absolute;) - объем текста не влияет на расположение колеса рулетки (2), фото курсора (3), текста "вращать"(4) и на расположение фото под надписью "вращать"(5)

Объем текста в подзаголовке может составлять до трех строк на экране для ПК - вполне достаточно для краткого послания юзеру. 

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

Три строки на ПК -"вырастут до четырех строк, на малом разрешении.

Блок с рулеткой нормально отображается, на большинстве прелендингов - не требуется вносить какие-то изменения. Но, на некоторых сайтах может понадобиться корректировка высоты надписи "Вращать-GIRO"

Проблема решается за несколько кликов мышкой - подробности в мануале

В наборе - 2 комплекта стилей окна с рулеткой, стилей поп-апа и стилей формы (на фото)

Основные стили поп-апа - подходят для большинства прелендингов, но есть некоторое кол-во сайтов сделанных на bootstrap со своеобразным отображением кнопок (кнопки имеют большую высоту, чем указано в стилях). 

Вootstrap влияет не отображение кнопки "ОК" в поп-апе, после вращения рулетки. Для нормального отображения всех элементов есть дополнительный стиль с некоторыми изменениями (папка "pop-up для bootstrap" в css стилях рулетки) 

Фото №1 - стиль поп апа "по умолчанию"

Фото №2 - отображение кнопки в поп-апе на некоторых bootstrap прелендингах (стиль поп-апа - по умолчанию)

Фото №3 - отображение кнопки в поп-апе с доработанным файлом стилей

В комплект добавлена "плавающая кнопка". Если на проклаленде убрать форму контактов возникает проблема - как, явным образом, вызвать форму? Не на всех прелендингах есть отдельные кнопки - нужно что-то верстать и придумывать, теряя время.

Простое и очевидное решение. Подключается к сайту установкой коротенькой строчки html кода. Скрипт "плавающей кнопки" "вшит" в скрипт рулетки, css файл со стилем кнопки добавляется на страницу скриптом.

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

Файлы в комплекте:

• index.html с установленными кодами (модальное окно, строки подключения и активации рулетки и поп-апа, код формы контактов), строкой подключения стилей модального окна и скриптами (подключение скрипта модального окна, скрипт настроек модального окна, подключение скрипта рулетки, скрипт маски телефонного номера)
• css стили (2 цветных стиля и дополнительные стили поп-апов - для bootstrap) 
• Базовый комплект изображений (меняются сменой названия файла или прописывается имя файла в скрипте - подробности в мануале)
• PSD шаблон для редактирования существующих или изготовления изображений колеса рулетки
• PSD шаблон для редактирования существующих или изготовления изображений для поп-апа
• PSD шаблон для редактирования и/или изготовления изображений "коллаж с продуктом" 
• Мануал по установке, настройке, редактированию текстов и фото

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

Видео - Установка модального окна с рулеткой на прелендинг (ссылка)

!!! Внимание. "Продукт" создан для использования на стандартных арбитражных сайтах (код лендинга/прелендинга находится внутри файла index.html или index.php). На сайтах с динамически формируемым HTML кодом и на сайтах сделанных на CMS - "продукт" не тестировался и установка на такого рода сайты не входит в "Цену с установкой".

Цена за комплект - 20$

Цена с установкой - 27$

Купить или заказать установку

Блоки для быстрой доработки прелендингов

@Ads Games

Хэш сумма zip архива с файлами (Virus Total)

54986f5254adc9afc030d29abcdf50cfdb757836ed1959e631b82ab73508d9a3