Insight

index.html

<div id="screen"></div>

Insight.markdown

Insight

Give me wisdom, give me strength, give me insight, give me the will to conquer them on my own.

A Pen by Gerard Ferrandez on CodePen.

License.

script.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 + "&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();

}();

style.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;
}

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!