« Движущаяся текстовая CSS маска с JavaScript »

Описание материала:

Сегодня мы с вами делимся движущейся текстовой CSS маской с JavaScript. Там мы использовали jQuery для простоты работы и экономии времени и как мы знаем, jQuery - это библиотека JavaScript, поэтому мы поместили это в категорию JS. Мы думаем, что эта программа будет полезна для вас, и вы сможете использовать это на своем сайте, чтобы добавить немного стиля.

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

Движущаяся текстовая CSS маска с JavaScript

Установка:

Подключаем библиотеку Jquery:
Код
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>


HTML код:
Код
<div class="u5-block">
  <a class="u5-name" href="http://ufive.ru">ufive.ru</a>
</div>


CSS код:
Код
@import url(https://fonts.googleapis.com/css?family=Cuprum:400,,800,900);

.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 код:
Код
$(document).ready(function () {
  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 + "%" });
  });
});


Демонстрация

Демонстративная страница или сайт материала

Установка материала

Мы поможем установить данный материал к Вам на сайт


Добавил: YaVi | Категория: Кнопки и иконки | Просмотров: 133


Поделиться в соц. сетях:

К данному материалу нет комментариев, но Вы можете стать первым, оставив свой комментарий!

Комментариев: 0
avatar