Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Insight
<div id="screen"></div>
~ 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 + "&nbsp; ";
tag = false;
} else {
comp += "<span>" + word + "</span>&nbsp; ";
}
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();
}();
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;
}
@marcelo2020rj

This comment has been minimized.

Copy link

@marcelo2020rj marcelo2020rj commented Mar 1, 2020

Hello! I simply LOVE this effect. But something crazy is happening.
At codepen.io, the effect works.
If i dload the zip files, and open it on my computer. Nothing happens (just a blacks square background).
I dloaded the (in theory) updated version, but didnt work.
I used directly from the file and it still didnt works.
I copied the code into an html template and create the .js and the .css file. It still didnt works.
And im being able to make it work direct from codepen.

How to fix, that?? Thx!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.