Приступаем к вёрстке. Первым шагом реализуем панель в собранном виде. Вёрстка, javascript.
00:00:18 — Вводная
00:04:55 — Как в Хроме отлавливать и отслеживать анимацию
00:06:20 — Решаем, как будет наша панелька появляться
00:09:00 — Выбираем место в структуре, где разместим код с панелью
00:20:30 — В Битриксе ищем нужный структурный элемент и добавляем внутрь него новый узел
00:21:40 — Добавляем включаемую область
00:22:10 — Организовываем ограничение доступа на просмотр кода, который мы готовим
00:23:00 — Набрасываем html-код панели, подключаем стили
00:26:00 — Подключаем файл стилей в Гул.Хром.Sources, чтобы можно было стили править с синхронизацией файла.
Настраиваем стили
00:34:10 — Под-настраиваем окружение
00:36:50 — Прорабатываем индикатор панельки
00:38:00 — Лайфхак в фотошопе парного просмотра одного документа в разных масштабах
00:40:35 — Ужатие графики (png, jpg) — tinypng
00:46:57 — javascript / приступаем к настройке смещения индикатора при скролле страницы
01:03:10 — Пишем инициализационную функцию определения контрольной линии пересечения при скроллинге
01:08:10 — Проводим отладку функции в chrome developer tools
01:09:16 — Работаем со смещением индикатора, подписываемся на события
01:10:00 — Области видимости переменных и функции, неверная реализация =
01:14:00 — Смещение индикатора, биндинг функций
01:23:00 — Области видимости переменных и функции, верное понимание =)
01:26:00 — Использование javascript-переменных объекта-индикатора
01:33:00 — Переключаем ориентир внутреннего top-смещения на родительский объект индикатора
01:36:17 — Мелочи по стилям
01:43:00 — PS
01:43:20 — Забираем свойства из глобальной области видимости в параметры объекту
Мой сайт:
#программирование #1с-битрикс про починить bitrix.
