« Движущаяся текстовая CSS маска с JavaScript »
Сегодня мы с вами делимся движущейся текстовой CSS маской с JavaScript. Там мы использовали jQuery для простоты работы и экономии времени и как мы знаем, jQuery - это библиотека JavaScript, поэтому мы поместили это в категорию JS. Мы думаем, что эта программа будет полезна для вас, и вы сможете использовать это на своем сайте, чтобы добавить немного стиля.
В основном, есть текст, который является названием этого веб-сайта, и фоновое изображение с вырезанным размером текста. Когда вы будете перемещать указатель мыши, то фоновое изображение также будет двигаться в противоположном направлении от мыши.
Установка:
Подключаем библиотеку Jquery:
HTML код:
<a class="u5-name" href="http://ufive.ru">ufive.ru</a>
</div>
CSS код:
.u5-block {
position: absolute;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
font-family: 'Cuprum';
}
.u5-name {
font-weight: bold;
color: transparent;
font-size: 120px;
background: url("http://ufive.ru/demo_file/img_demo/ufive_6.jpg") repeat;
background-position: 20% 30%;
-webkit-background-clip: text;
position: relative;
text-align: center;
text-transform: uppercase;
}
@media (max-width: 765px) {
.u5-name {
font-size: 40px;
letter-spacing: -2px;
line-height: 50px;
}
}
JS код:
var mouseX, mouseY;
var ww = $(window).width();
var wh = $(window).height();
var traX, traY;
$(document).mousemove(function (e) {
mouseX = e.pageX;
mouseY = e.pageY;
traX = (4 * mouseX) / 570 + 20;
traY = (4 * mouseY) / 570 + 30;
console.log(traX);
$(".u5-name").css({ "background-position": traX + "%" + traY + "%" });
});
});
Демонстративная страница или сайт материала
Установка материалаМы поможем установить данный материал к Вам на сайт
К данному материалу нет комментариев, но Вы можете стать первым, оставив свой комментарий!
Комментариев: 0
| |