scss 一支笔由seth kontny。

Posted 2021-05-18

Text-mask background moving on MouseMove - v2
---------------------------------------------
Trying the new feature "background-clip: text", with background moving.

Forked from [Robert ](http://codepen.io/dghez/)'s Pen [Text-mask background moving on MouseMove - v2](http://codepen.io/dghez/pen/ItxKE/).

A [Pen](http://codepen.io/sethkontny/pen/zwBjK) by [seth kontny](http://codepen.io/sethkontny) on [CodePen](http://codepen.io/).

[License](http://codepen.io/sethkontny/pen/zwBjK/license).

<!-- If you don't see it u probably are using a browser not based on webkit, so leave IE and grab anything else (Y) -->
<!-- UPDATE: works in Chrome & Safari, not Firefox. To solve that you could use an SVG insted of pure text. -->

<div class="container">
  <div class="title">Seth Kontny </div>
  <div class="subtitle"> geek + smart + curious + nerd + ingenious + cunning = ME </div>
</div>

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

@mixin center(){
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
    left:50%;
    top:50%;
}


@import url(http://fonts.googleapis.com/css?family=Raleway:400,,800,900);
html{
  width:100%;
  height: 100%;
}
body{
  background: -webkit-linear-gradient(rgb(235, 236, 231), rgb(255, 255, 255));
  background: linear-gradient(rgb(235, 236, 231), rgb(255, 255, 255));
  margin: 0;
  width: 100%;
  height: 100%;
  font-family: 'Raleway', sans-serif;
}
.container{
  position:absolute;
  @include center();
}
.title{
  font-weight: 800;
  color: transparent;
  font-size:120px;
  background: url("http://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;
}
.subtitle{
  display: block;
  text-align: center;
  text-transform: uppercase;
  padding-top:10px;
}