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

20 декабря 2014 Антон Кулешов 1041 0

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

Реклама

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

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

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

<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. У неё есть хороший набор настроек, который поможет вам достичь нужного результата.

  • 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.

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

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

Слайд-шоу на заднем фоне сайта

11 ноября 2015 Антон Кулешов

В сегодняшней статье мы поговорим о фоновом изображении для сайта, которое является немаловажным элементом дизайна. Если для блога фон должен быть приятным и не отвлекать от основного контента, то для лэндинг пэйдж – фон фактически самый значимый элемент, благодаря которому создается общее впечатление, и он должен «цеплять» посетителя.

Отслеживаем активность пользователя на странице

30 ноября 2014 Антон Кулешов

Сегодня мы рассмотрим способ определения активности пользователя на странице, и в этом нам поможет JavaScript библиотека ifvisible.

Увеличение картинки с помощью эффекта лупы на jQuery

21 февраля 2016 Антон Кулешов

Занимаясь продажами товаров в интернете, всегда нужно уделять внимание мелочам. Ведь, как известно, именно нюансы и эти самые мелочи влияют на окончательное решение потенциального покупателя. Как же нам помочь посетителю нашего сайта детально рассмотреть его интересующий товар? На этот вопрос есть определённый ответ – это добавление эффекта лупы при наведении на картинку, о котором мы и поговорим в этой статье.