Как сделать параллакс эффект в тексте при наведении

Все просто! Делаем при наведении на текст картинку которая двигается при перемещении мышки!

Демо тут

Настройка CSS

1. Вставьте код на странице или в блоке где хотите применить данный эффект.

2. При надобности измените код под ваши требования

3. Выделите текст и в свойствах css пропишите класс: title

Как заменить картинку?

background: url("https://phandroid.s3.amazonaws.com/wp-content/uploads/2014/05/rainbow-nebula.jpg") repeat;

Найдите строчку background - а в Яндекс картинках найдите подходящую, далее скопируйте путь до фото в код.

Все готово!

<style>
.container{
  position:absolute;
  @include center();
}
.title{
  font-weight: 800;
  color: transparent;
  font-size:120px;
  background: url("https://phandroid.s3.amazonaws.com/wp-content/uploads/2014/05/rainbow-nebula.jpg") repeat;
  background-position: 40% 50%;
  -webkit-background-clip: text;
  position:relative;
  text-align:center;
  line-height:90px;
  letter-spacing: -8px;
}
.subtitle{
  display: block;
  text-align: center;
  text-transform: uppercase;
  padding-top:10px;
}
</style>
<script>
$(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);
    $(".title").css({"background-position": traX + "%" + traY + "%"});
  });
});
</script>

Напиши свой коммент первым!