Check out This CSS 3D Text Animation On Hover Developed by Sasha .
css 3D Text
HTML
[code language=”html”]
<div id="screen"></div>
[/code]
CSS
[code language=”css”]
html {
overflow: hidden;
touch-action: none;
content-zooming: none;
}
body {
position: absolute;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: #252527;
}
#screen {
position: absolute;
text-align: justify;
top: 50%;
left: 50%;
width: 300px;
height: 240px;
margin-left: -220px;
margin-top: -180px;
font-size: 12px;
font-family: arial;
font-weight: normal;
color: #666;
user-select: none;
cursor: default;
background: #000;
font-family: arial;
padding: 60px;
overflow: hidden;
}
.word {
cursor: pointer;
color: #666;
position: absolute;
z-index: 1;
}
.over {
color: #fff;
font-weight: bold;
}
.wordZoom {
position: absolute;
font-weight: bold;
z-index: 0;
visibility: hidden;
pointer-events: none;
}
[/code]
JS / Babel
[code language=”js”]
~ function() {
‘use strict’;
var spans = [],
screen = document.getElementById("screen"),
text = "";
document.currentScript.text.split(/[\s,.=><\&\-!’/\]\+;()\\["]+/, 169).forEach(function(w) {
if (w.length > 1) text += w + " ";
});
var CObj = function(elem) {
this.elem = elem;
this.x = elem.offsetLeft;
this.y = elem.offsetTop;
this.zooming = false;
this.scale = 1;
}
CObj.prototype.init = function() {
this.elem.obj = this;
this.elem.className = ‘word’;
this.elem.style.left = this.x + "px";
this.elem.style.top = this.y + "px";
this.glow = document.createElement("span");
this.glow.innerHTML = this.elem.innerHTML;
this.glow.className = "wordZoom";
screen.appendChild(this.glow);
this.glow.style.left = this.x + "px";
this.glow.style.top = this.y + "px";
}
CObj.prototype.start = function() {
if (!this.zooming) {
this.elem.className = "word over";
this.zooming = true;
this.glow.style.visibility = "visible";
}
}
CObj.prototype.zoom = function() {
if (this.zooming) {
this.scale *= 1.05;
if (this.scale < 20) {
var c = 512 – this.scale * 20;
this.glow.style.transform = this.glow.style.webkitTransform = "scale(" + this.scale + ")";
this.glow.style.color = "rgb(" + Math.round(c * .5) + "," + Math.round(c * .5) + "," + Math.round(c) + ")";
} else {
this.zooming = false;
this.scale = 1;
this.glow.style.transform = this.glow.style.webkitTransform = "scale(1)";
this.glow.style.visibility = "hidden";
this.elem.className = "word";
}
}
}
text += " … ";
var comp = "",
word = "",
tag = false;
for (var i = 0; i < text.length; i++) {
var c = text.charAt(i);
if (c == "<") {
var j = text.indexOf(">", i);
word += text.substring(i, j + 1);
i = j;
tag = true;
} else {
if (c == " ") {
if (tag) {
comp += word + " ";
tag = false;
} else {
comp += "<span>" + word + "</span> ";
}
word = "";
} else word += c;
}
}
screen.innerHTML = comp;
var n = screen.getElementsByTagName("*");
for (var i = 0; i < n.length; i++) {
var word = n[i];
spans[i] = new CObj(word);
}
for (var i = 0; i < spans.length; i++) {
spans[i].init();
}
screen.onmouseover = function(e) {
e.preventDefault();
if (e.target.obj) e.target.obj.start();
};
var run = function() {
requestAnimationFrame(run);
for (var i = 0; i < spans.length; i++) {
spans[i].zoom();
}
};
run();
}();
[/code]
