<link href="https://fonts.googleapis.com/css?family=Oswald:300,500,600,700" rel="stylesheet">
<div>A Language That Can </div>
<div id = "holder">
<p>Speak In Many Voices</p>
<!-- <p>Voices</p> -->
</div>
body{
background:#fcfcfc;
font-size: 16px;
font-family: 'Oswald', sans-serif;
color: #444;
border: 5px solid #444;
width: 95%;
height: 400px;
margin-left: auto;
margin-right: auto;
}
div{
font-size: 220%;
}
/* body {
background: #333;
color: #fff;
font: 300 100.1% "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif;
} */
#holder {
height: 480px;
left: 50%;
margin: -240px 0 0 -320px;
position: absolute;
top: 40%;
width: 640px;
}
#copy {
bottom: 0;
font: 300 .7em "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif;
position: absolute;
right: 1em;
text-align: right;
}
#copy a {
color: #fff;
}
Raphael(function () {
var hldr = document.getElementById("holder"),
text = hldr.innerText.replace(/^\s+|\s+$/g, "");
hldr.innerHTML = "";
var R = Raphael("holder", 640, 480),
txt = [],
attr = {font: "36px Helvetica", opacity: 0.5};
txt[0] = R.text(320, 240, text).attr(attr).attr({fill: "#323545"});
txt[1] = R.text(320, 240, text).attr(attr).attr({fill: "#3c457d"});
txt[2] = R.text(320, 240, text).attr(attr).attr({fill: "#B1BBEC"});
txt[3] = R.text(320, 240, text).attr(attr).attr({fill: "#536ADE"});
txt[4] = R.text(320, 240, text).attr(attr).attr({fill: "#E6E8F4"});
var mouse = null, rot = 0;
document.onmousemove = function (e) {
e = e || event;
if (mouse == null) {
mouse = e.clientX;
return;
}
rot += e.clientX - mouse;
txt[0].attr({transform: "r" + rot});
txt[1].attr({transform: "r" + rot / 1.2});
txt[2].attr({transform: "r" + rot / 1.5});
txt[3].attr({transform: "r" + rot / 2});
txt[4].attr({transform: "r" + rot / 2.5});
mouse = e.pageX;
R.safari();
};
});
// window.onload = function() {
// var paper = new Raphael(document.getElementById('holder'), 500, 500);
// // paper= Raphael("holder", 640, 480),
// txt = [],
// attr = {font: "50px Helvetica", opacity: 0.5};
// txt[0] = paper.text(320, 240, text).attr(attr).attr({fill: "#0f0"});
// txt[1] = paper.text(320, 240, text).attr(attr).attr({fill: "#f00"});
// txt[2] = paper.text(320, 240, text).attr(attr).attr({fill: "#00f"});
// var mouse = null, rot = 0;
// document.onmousemove = function (e) {
// e = e || event;
// if (mouse == null) {
// mouse = e.clientX;
// return;
// }
// rot += e.clientX - mouse;
// txt[0].attr({transform: "r" + rot});
// txt[1].attr({transform: "r" + rot / 1.5});
// txt[2].attr({transform: "r" + rot / 2});
// mouse = e.pageX;
// Paper.safari();
// };
// }
This Pen doesn't use any external CSS resources.