Показать Меню
falbar Динамические тени на Javascript

Добавляем динамические тени CSS при помощи плагина Javascript

Динамические тени на Javascript

Сегодня в статье мы рассмотрим javascript библиотеку - shine.js. При её помощи Вы сможете добавить к себе на сайт красивые и привлекающие внимание динамические тени (CSS при этом не надо будет прописывать вручную).

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

Shine.js позволяет придать динамику и получить в результате красивые эффекты, связанные с тенями. Написана она на javascript, что может также понравиться и не любителям библиотек типа jQuery. Работает данный скрипт только в тех браузерах, которые поддерживают CSS свойства: text-shadow и box-shadow. Если браузеру потребуются префиксы к этим свойствам, то скрипт добавит их сам.

Теперь давайте подключим shine.js:

<script src="shine.min.js" type="text/javascript"></script>

Добавим CSS и HTML (применять тень мы будем к тексту):

html{
	background-color: #eef3f8;
}
#headline{
	margin: 60px auto auto;
	color: #fff;
	text-align: center;
	font-size: 8em;
	font-family: sans-serif;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.2em;
}
<h1 id="headline">falbar.ru</h1>

Осталось только вызвать скрипт:

var shine = new Shine(document.getElementById("headline"));

На этой строке мы передали в Shine элемент с id headline, в котором находится интересующий нас текст. По моей задумке я хочу, чтобы тень меняла своё положение при движении мыши. Это можно сделать написанием следующих строк кода:

window.addEventListener("mousemove", function(event){
	shine.light.position.x = event.clientX;
	shine.light.position.y = event.clientY;
	shine.draw();
}, false);

Результат выполнения вышеуказанного скрипта можно увидеть в материалах «демо». Думаю, получилось весьма интересно. Но это не единственное, что может shine.js. У неё есть хороший набор настроек, который поможет Вам достичь нужного результата.

  • numSteps - количество нарисованных теней (по умолчанию 8);
  • opacity - прозрачность тени (по умолчанию 0.1);
  • opacityPow - степень прозрачности, применяющейся для каждой тени (по умолчанию 1.2);
  • offset – смещение теней (по умолчанию 0.15);
  • offsetPow – степень смещения, применяющегося для каждой из теней (по умолчанию 1.8);
  • blur - размытие тени (по умолчанию 40);
  • blurPow - степень размытия, применяющейся к каждой тени (по умолчанию 1.4);
  • shadowRGB - цвет тени, указывается в формате rgb (по умолчанию new shinejs.Color(0, 0, 0)).

Для того чтобы применить эти настройки требуется оформить их в специальном объекте shinejs.Config и передать вторым параметром при создании экземпляра Shine:

var config = new shinejs.Config({
	numSteps: 3,
	opacity: 0.5,
	shadowRGB: new shinejs.Color(253, 0, 0)
});

var shine = new Shine(document.getElementById("headline"), config);

Осталось только упомянуть, где обитает эта библиотека. Нашёл я её на просторах github.com (ссылка указана в источниках).

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

Спасибо за внимание.

Источник
github.com

Подписаться на обновления

Комментариев еще не оставлено