Блеск и будь веселым
Экспериментируйте с переменными CSS и Javascript
После посещения CSSconf EU я начал думать о том, что я могу сделать с переменными CSS, чтобы разобраться в них. Почему бы не изменить цвет фона страницы, когда посетитель нажимает клавишу на своей клавиатуре?
Готовим хеш ключей и цветов
Во-первых, мне нужно было назначить каждой клавише на клавиатуре свой цвет. Я не хотел, чтобы шестнадцатеричные коды генерировались случайным образом, поскольку это приводит к множеству действительно уродливых вариаций, поэтому вместо этого я выбрал именованные цвета.
Я написал небольшой сценарий, чтобы не создавать вручную список пар ключ-значение для всех возможных ключей, и прогнал его по файлу, содержащему мой простой список имен цветов.
Наибольшее число, представляющее клавишу на клавиатуре, равно 255, но есть только 147 именованных цветов, поэтому я просто дважды читаю файл и помещаю все в массив. Ничего страшного, если этот список не на 100% точен.
Я запустил сценарий с терминала и передал результат в новый файл. Затем я просто скопировал получившийся список в виде хеша в свой JS файл.
Изменение цвета фона при нажатии клавиши
Я хотел изменить цвет фона при нажатии любой клавиши на клавиатуре, поэтому назначение фиксированного цвета в CSS не сработало. Введите первую переменную CSS.
Я назначаю DarkSlateBlue по умолчанию, чтобы цвет фона страницы был установлен уже при загрузке. Затем я использую Javascript для обновления значения при нажатии клавиши.
Я вспомнил упражнение с барабанами из одного из первых уроков Курса Javascript30 Уэса Боса и подумал, что могу еще раз взглянуть на этот код.
Это устанавливает значение --bgColor в зависимости от того, какой цвет соответствует коду клавиши внутри хэша цветов.
Как заставить его работать на сенсорных устройствах
На мобильных телефонах не отображается клавиатура, когда мы открываем веб-страницу, поэтому я решил заставить страницу менять цвет на ощупь. И чтобы было интересно также для одного типа событий, я назначаю случайный цвет из моего хеша.
Согласно MDN, мобильное Safari не очень хорошо работает с событиями щелчка по основной части сайта, поэтому я решил обойти это, добавив main раздел. Тогда это должно было принимать щелчки мыши и - скрещенные пальцы - события касания.
Затем я добавил новую функцию для обработки события щелчка.
Сначала я создаю случайное число от 255 до 1, которое затем использую для выбора цвета из хеша и назначаю его переменной CSS для background-color.
Быстрый тест iPhone. Работал. Хороший.
Пока я играл с изменением цвета на сайте, мне казалось, что это довольно скучно и скучно. Давайте добавим блеска!
Добавление частицы
Я начал с добавления одной частицы в DOM, чтобы посмотреть, смогу ли я заставить ее работать. Пока ничего особенного.
И в Javascript:
Сначала я создаю div с классом particle, а затем добавляю его в DOM как дочерний элемент main. Затем я вызываю функцию из onkeydown и onclick.
Пуф. Сайт меняет цвет и отображает частицу.
Добавляем еще больше частиц
Одна частица резать не буду, хочу еще!
Чтобы было интересно, я рандомизирую такие свойства, как размер, размещение и тень.
Я добавляю переменные ко всем свойствам, которыми хочу управлять, и присваиваю им случайные значения в Javascript.
Чтобы создать множество частиц, я добавляю цикл for к исходной функции addSparkles. Я хочу, чтобы количество частиц каждый раз было разным, поэтому я присваиваю случайное число от 19 до 109 (99 выглядело хорошо как множитель, ха) условию разрыва.
Внутри цикла я создаю частицу, как и раньше, но теперь я вызываю свою функцию randomProperties, чтобы присвоить случайные значения переменным CSS внутри класса particle.
… И удаляя их снова
Но теперь все эти искры накапливаются в DOM всякий раз, когда я нажимаю клавишу. Это не совсем то, что я хочу.
Поэтому я должен их удалить.
Сначала я создаю массив всех элементов DOM с классом particle, затем перебираю его и удаляю каждый из них.
В этот момент мне пришлось остановиться и подумать на мгновение, потому что моей первоначальной реакцией было просто удалить массив и покончить с ним. Но массив содержит только ссылки на элементы DOM, которые нужно удалять оттуда по одному. Это происходит внутри цикла for.
Анимация частиц
Теперь у меня есть частицы, но все еще нет блеска. Время для анимации.
Я анимирую непрозрачность частиц для эффекта сияния. Шаги по значениям и ключевым кадрам, на которые я остановился, являются результатом настройки на основе вкуса, они казались правильными.
Чтобы повысить яркость свечения, я использую случайные значения для непрозрачности на уровне 25%, продолжительности анимации, задержки и того, как часто я повторяю анимацию.
Опять же, значения являются результатом проб и ошибок, пока все не станет более или менее правильным. Никаких других причин нет.
Забавный побочный эффект объединения этих случайных значений для анимации заключается в том, что сверкающий вид гаснет, если вы не запускаете новый раунд изменений на странице.
Готовимся к сцене
Просто показать страницу без упоминания того, что делать, было немного загадочно. Изначально у меня было прописано, какие действия должен предпринять каждый посетитель (фактически, нажать клавишу), но на мобильных устройствах это не сработало. Поэтому я изменил текст для разных точек останова. Но, конечно, это не помогло бы на больших сенсорных экранах, таких как планшеты, поскольку я не знал, как их обнаружить до того, как будет зарегистрировано какое-либо событие.
Введите смайлики.
Со смайлами все лучше. 💖
