Регулятор света на сайте с помощью JavaScript | RUDEBOXВ данном уроке мы рассмотрим небольшую заплатку для сайта, а именно, как сделать регулятор освещения и затемнения на сайта. Следует отметить, что это весьма интересная штука, если Вашему посетителю необходимо выделить интересную информацию, также такой эффект часто используется при просмотре видео, фото, чтобы фоновая информация не отвлекала от просматриваемой информации. Обратите внимание, что уровень затемнения и освещения можно регулировать самостоятельно, что весьма удобно, пользователь может лично внести коррективы.

 

Много различным бесплатных шаблонов вы можете найти на сайте наших партнеров, также имеются и премиум шаблоны с круглосуточной техподдержкой и помощью в настройке:

Этот регулятор можно прикрутить к всплывающему окну, при этом его минимизируя, это придаст большой кастомизации Вашему сайту, и так, давайте приступим.

Шаг 1. HTML

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

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

Регулятор света на сайте с помощью JavaScript | RUDEBOX

Шаг 2. CSS

Стили нам помогут отображать регулятор, мы установим параметры контейнера, кроме этого мы сделаем конструкцию самого регулятора, добавим теней и градиентной заливки, что позволит создавать небольшой эффект объемности:

Шаг 3. JS

Теперь добавим немного магии, с помощью скрипта мы установим затемнение, и привяжем его к регулятору:

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.