ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Текст с движущимся фоном на JavaScript

Текст с движущимся фоном на JavaScript

В этом материале представлен интересный эффект с движущимся фоном в тексте, который идет за курсором, что получается красивая анимация на jQuery. Где безусловно вы встречали на современном дизайне такой трюк, которые ставят на название под логотип или под разные функций, что отлично вписываться по разный дизайн сайта. Где такое решение, что использует CSS текстовую маску с JavaScript украсит стиль портала.

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

По умолчанию такой фон идет под знаки:

Установка:

Подключаем библиотеку:

Код

HTML

Код

<div class="dosnavaniye-kodirovan">
<div class="animirovan-tekst">ZORNET.RU</div>
</div>

CSS

Код

.dosnavaniye-kodirovan {
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}
.animirovan-tekst {
  font-weight: 800;
  color: transparent;
  font-size: 120px;
  background: url("Ссылка на фон под знаки, это может быть звездное небо или облока") repeat;
  background-position: 40% 50%;
  -webkit-background-clip: text;
  position: relative;
  text-align: center;
  line-height: 90px;
  letter-spacing: -8px;
}
@media (max-width: 765px) {
  .animirovan-tekst {
  font-size: 40px;
  letter-spacing: -2px;
  line-height: 50px;

  }
}

Код

$(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) + 40;
  traY = ((4 * mouseY) / 570) + 50;
  console.log(traX);
  $(".animirovan-tekst").css({"background-position": traX + "%" + traY + "%"});
  });
});

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

Когда вы будете перемещать указатель мыши, фоновое изображение также будет двигаться в направлении, противоположном направлению мыши. И здесь скрипт будет хорошей практикой для вас при помощи HTML, CSS и JS.

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

Видео обзор:

20 Октября 2019 Просмотров: 1175 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

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