"title (Text Animation)"
Bootstrap 3.0.0 Snippet by okrish

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- 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">ROBERT DEVELOPER</div> <div class="subtitle"> geek + smart + curious + nerd + ingenious + cunning = ME </div> </div> <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>
@import url(https://fonts.googleapis.com/css?family=Raleway:400,,800,900); html { width: 100%; height: 100%; } body { background: -webkit-linear-gradient(#ebece7, white); background: linear-gradient(#ebece7, white); margin: 0; width: 100%; height: 100%; font-family: 'Raleway', sans-serif; } .container { position: absolute; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); left: 50%; top: 50%; } .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; }

Related: See More


Questions / Comments: