Trying the new feature "background-clip: text", with background moving.
Forked from Robert 's Pen Text-mask background moving on MouseMove - v2.
A Pen by seth kontny on CodePen.
<!-- 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; | |
} |
Trying the new feature "background-clip: text", with background moving.
Forked from Robert 's Pen Text-mask background moving on MouseMove - v2.
A Pen by seth kontny on CodePen.
Thanks for the credits :)