3d Text effect - mousemove

3d-text-effect-mousemove.markdown

3d Text effect - mousemove

Nice 3d Text effect with jQuery mousemove

A Pen by Captain Anonymous on CodePen.

License.

index.html

<h1>94一站</h1>

script.js

jQuery(document).ready(function(){
   $('h1').mousemove(function(e){
     var rXP = (e.pageX - this.offsetLeft-$(this).width()/2);
     var rYP = (e.pageY - this.offsetTop-$(this).height()/2);
     $('h1').css('text-shadow', +rYP/10+'px '+rXP/80+'px rgba(227,6,19,.8), '+rYP/8+'px '+rXP/60+'px rgba(255,237,0,1), '+rXP/70+'px '+rYP/12+'px rgba(0,159,227,.7)');
   });
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

body{
  text-align:center;
  background:#dfdfdf;
}
h1{
  text-transform:uppercase;
  font-size:72px;
  font-family:'Verdana';
  padding:30px;
}