Верстка сайта.
Для запуска можно просто открыть файл index.html в папке public
Адаптивность выполнена следующим образом:
- При ширине меньше 600px - мобильная версия сайта;
- При ширине меньше 900px в режиме landscape - мобильная повернутая версия сайта;
- При ширине 600px < ширина < 900px в режиме portrait - версия для планшетов;
- При ширине больше 900px - версия для десктопа;
- При ширине больше 1400px - небольшие изменения больших дисплеев;
-
Для сборки использовал gulp. Собирал только css с автопрефиксером и минификатором в единый бандл. Минификатор картинок не использовал, так как они в основном svg и в gulp минификаторах много уязвимостей. Для js тоже не использовал, т.к. старался не делать его слишком много.
-
JS библиотеки
- Perfect Scrollbar. Так как сайт предназначен преимущественно для тач девайсов, я решил использовать нативные технологии скролла. Для их кросс-браузерной кастомизации и выбрал данную библиотеку. *Я её использую для дисплеев >900px, т.к. в мобильных браузерах нативный скролл выглядит нормально.
- Screenfull.js Эта библиотека частично решает проблему на мобильных браузерах. В макете для телефонов используется вертикальный слайдер, но из-за особенностей работы мобильных браузеров при его движении может автоматически включаться полноэкранный режим. Я при открытии модалки этой библиотекой включаю сразу fullscreen. *Но есть проблема плохо в сафари, по крайней мере у меня нет возможности проверить в каких версиях и как он работает.
- Блок с сценариями.
Блоки заполняются сверху вниз построчно и перетекания из одного в другой блок в нативном css нет. При загрузке сайта определять размеры дисплея, возможно мы будем грузить карточки по ajax и сетка будет построенна заранее. Определив размеры и зная что блок минимум 200px, считаем в js сколько их влазит и если они переполняют этот блок создаем еще один заполняем его оставшимися блоками и вешаем обработчики на кнопки позволяя листать эти самые блоки с избранными сценариями.
- Крутилка температуры (копать в сторону SVG). Тут понадобится немного аналитической геометрии.
Получается крутилка у нас может быть фиксированных размеров или даже если это не так мы можем с помощью offsetWidth и offsetHeight или других функций получить её размеры. Зная размеры находим центр и считаем, при движении мышки считаем текущие координаты внутри элемента крутилки. Зная эти координаты получается вектор, считаем его длинну и из формулы определения координаты по углу выводим формулу для получения угла
x = R * cos(fi) => cos(fi) = x/R => fi = arccos(x/R)
После округления получим дискретное значения угла, относительно которого будем считать и изменять координаты дуг которыми выполнены эти полоски. Так же поворачиваем на этот угол треугольник указывающий на соединение дуг.
- Оптимизация анимации. Здесь план состоит в том, что нужно разобраться из-за чего анимация может подтормаживать на слабых девайсах и по возможности максимально оптимизировать.