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