"Всплывашка" модель сидя (мануал)

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

В комплект входит:

1. Папка "css"
2. Папка "img"
3. Папка "js"
4. Стиль всплывающих окон (для скорости загрузки находится в корневой директории сайта)
5. "dymanic-ms.js" - скрипт всплывающих окон
6. index.html - с установленными всплывающими окнами
7. Базовое фото для всплывающих окон

Содержимое папок:

№1 Папка "css" со стилями

• Папка "Доп.стили" - в папке находятся все стили всплывающих окон (базовый стиль "по-умолчанию" и 5 стилей в разных цветах)
• index.css - стиль index.html 

Папка "Доп.стили"

• Папки со стилями всплывающих окон
• Фото стилей всплывающих окон

Папки с доп. стилями

В папке находятся:

• "dynamic-mpl.css" - стиль текущего всплывающего окна
• Фото всплывающих окон (фото ПК + фото мобильное устройство)

№2 Папка "img"

• Папка "Архив" - подборка фото для всплывающих окон
• Базовое фото по-умолчанию
• PSD шаблон "Фото для всплывашек 420х630.psd" - шаблон для изготовления и/или редактирования фото для всплывающих окон.

Папка "img/Архив" - в папке находится подборка изображений, для всплывающих окон.

№3 Папка "js" - в папке находится скрипт для всплывающего окна. 

!!! Внимательно прочтите рекомендацию по установке.

• dynamic-ms.js - скрипт для всплывающего окна

Установка всплывающих окон на сайт

Видео версия - в видео, установка "всплывашки" на 4 всплывающих блока, все действия по установке - идентичны для всех "всплывашек" и автоматического слайдера

!!! Внимание. Для скорости загрузки - все пути к файлам (стили, фото и скрипты) прописаны до корневой директории сайта (корневая директория - главная папка сайта).

1) Откройте index.html в редакторе кода

2) Скопируйте все фрагменты кода "<div id="dynamicboxmsone"></div>, <div id="dynamicboxmstwo"></div> и <div id="dynamicboxmsthree"></div>"

и установите на свой сайт, в те места страницы, где должны появляться всплывающие окна. При прокрутке до установленного на странице элемента - покажется всплывающее окно. 

!!! Внимание. Скрипт "dynamic-ms.js" будет работать, если установить все элементы "<div id="dynamicboxmsone"></div>, <div id="dynamicboxmstwo"></div> и <div id="dynamicboxmsthree"></div>" по порядку - сверху-вниз 

Последовательность элементов, по-умолчанию:

2-1) <div id="dynamicboxmsone"></div> - №1

2-2) <div id="dynamicboxmstwo"></div> - №2

2-3) <div id="dynamicboxmsthree"></div> - №3

!!!Внимание. Если есть необходимость установить элементы в другом порядке или нужно исключить сработку какого-то из элементов - поменяйте местами фрагменты в скрипте (фрагменты пронумерованы)

или удалите ненужное. Скопируйте нужный фрагмент от строки "// Всплывашка №... "ms" START" до строки "// Всплывашка №... "ms" END"

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

3) Подключите скрипт к своему сайту:

3-1) Скопируйте и установите, перед закрывающим тегом </body> своего сайта, строку подключения скрипта

(скрипт с последовательностью - по-умолчанию)

3-2) Если предполагается свой вариант использования - внесите в скрипт необходимые изменения.

4) Скопируйте из шаблона и добавьте в корневую директорию своего сайта, следующие элементы:

4-1) Добавьте скрипт. Находится в папке "js" и в корне сайта

4-2) Выберите и добавьте подходящий вариант стиля (стили находятся в папке "css/Доп.стили/...")

4-3) Добавьте фото, для всплывающих окон (в папке "img/Архив" находится подборка фото по-умолчанию, в папке "img" есть PSD шаблон для изготовления и/или редактирования фото). Фото в папке "img/Архив" от фото находящегося в корневой папке сайта, отличаются цифровым или буквенным индексом (сравнивайте названия файлов)

Чтобы сделать свое фото

• Откройте PSD шаблон (находится в папке - "img") в Фотошопе 
• Совместите свое изображение (без фона) с изображением в шаблоне
• Сохраните результат в .png формате - все будет нормально отображаться. 
• Сожмите полученный файл (я, использую онлайн-сервис I Love IMG - https://www.iloveimg.com/ru)

5) Отредактируйте отображаемые надписи (Основной текст и подпись - "выделенный текст" - редактируются в скрипте)

Редактирование  скрипта

Видео версия

Редактирование надписей и добавление фото

Откройте файл js в редакторе кода (например - Sublime Text или Notepad++). В верхней части скрипта находится раздел params

1) Содержимое всплывающего окна №1

редактируется в строках params:

1-1) Строка tone: - Текст "бегущая строка" для блока №1

1-2) Строка tonetitle: - Подпись "выделенный текст" для блока №1

1-3) Строка imgone: - Ссылка на фото для блока imgone-№1  

2) Содержимое всплывающего окна №2

редактируется в строках params:

2-1) Строка ttwo: - Текст "бегущая строка" для блока №2

2-2) Строка ttwotitle: - Подпись "выделенный текст" для блока №2

2-3) Строка imgtwo: - Ссылка на фото для блока imgone-№2

3) Содержимое всплывающего окна №3

редактируется в строках params:

3-1) Строка three: - Текст "бегущая строка" для блока №3

3-2) Строка tthreetitle: - Подпись "выделенный текст" для блока №3

3-3) Строка imgthree: - Ссылка на фото для блока imgone-№3

Удаление текста - "подпись" - выделенный текст

1) Откройте скрипт в редакторе кода.

2) Во фрагментах №1, №2 и №3, подпись - "выделенный текст" находится в тегах <b></b>

2-1) Если подпись - "выделенный текст" не нужна, закомментируйте строку с текстом. Добавьте "<!--" в начале строки и "-->" в конце

!!! Внимание. До начала редактирования файлов - сохраните копию скрипта. Если что-то пойдет не так - можно будет быстро восстановить дефолтные настройки.

Замена стилей

Стили всплывающих окон, меняются заменой файлов 

1. Удалите из корневой директории сайта файл - "dynamic-ms.css" 
2. Скопируйте подходящий стиль из папки "css/Доп.стили/..." 
3. Добавьте выбранный файл со стилем, в корневую директорию своего сайта

Продолжительность анимаций в блоках

1. Блок №1 -7.7 сек
2. Блок №2 -7.7 сек
3. Блок №3 -7.7 сек

Редактирование таймингов:

В скриптах установлена примерная продолжительность сработки скрипта печати текста. После добавления своих текстов может возникнуть необходимость в редактировании таймингов (времени сработки скрипта печати). Время задержки установлено в миллисекундах. 1000 = 1сек

1) Откройте скрипт в редакторе кода

2) Выберите всплывающий блок, который нужно отредактировать.

!!! Внимание. Каждый фрагмент скрипта подписан для каждого всплывающего окна

ID каждого элемента соответствует ID скрипта, примененного к этому элементу

3) Установленный по-умолчанию тайминг для строки с подписью в текстовом блоке (№2)

3-1) Время сработки скрипта печати редактируется в строке кода (№2)

3-2) Установите нужное время сработки скрипта

3-3) Повторите редактирование для каждого блока всплывающих окон

Редактирование скорости печати текста

Можно отредактировать скорость печати текста. По-умолчанию установленный тайминг - 1 символ за 40 миллисекунд

1) Откройте скрипт слайдера в редакторе кода (например - Sublime Text или Notepad++)

2) В самом низу скрипта находится функция печати текста "function printText(el)" (№1). Установите необходимую скорость печати в строке let letterTimeout = 40; (№2) и сохраните изменения. let letterTimeout = 40; - один символ за 40 миллисекунд

Видео - установка "всплывашек" на прелендинг (ссылка)

Видео - редактирование скрипта во "всплывашке" на 3 блока (ссылка)

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

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

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

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

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

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

8ee90262b6aefe28c20b8545b83fa7166eeca417ec42c041676dbc2b8b16cdef