CSS Screen Saver

Screen Saver Text

If you stack a bunch of spans of the same text into the same element but set the translateZ to get progressively smaller (or larger) and you put on a text shadow, you can get a (mostly) seamless 3-D text effect like that old school screen saver.

It’s actually pretty simple, take a look to see how!

</pre>
<div id="ship"><span id="word">change this text!!</span></div>
<pre>

That’s really all the HTML, well, not really, cause there’s some JavaScript that makes that work all better like.

SpaceSaver.prototype._addDepth = function(){
	var me = this,
		i = 0,
		depth = me.depth,
		node = me.node,
		clone = node.cloneNode(false),
		parent = node.parentNode,
		holderSpan = document.createElement("span");

	holderSpan.innerHTML = me.txt;
	holderSpan.classList.add("no-trans");

	while(i < depth){
		var tns = me.trans - (i * me.space),
			transString = "translateZ("+ tns +"px)",
			span = document.createElement("span");

		span.innerHTML = me.txt;
		span.style[me.prefix +"Transform"] = transString;
		clone.appendChild(span);
		i++;
	}
	clone.appendChild(holderSpan);

	parent.removeChild(node);
	me.node = parent;
	me.node.appendChild(clone);
	me.clone = clone;
	clone.addEventListener("focus",function(e){
		me.clone.innerHTML = me.txt;
		me.node = me.clone;
	});
	clone.addEventListener("blur",function(e){
		me.txt = me.clone.innerHTML;
		me._addDepth();
		localStorage.setItem("screenSaver",me.txt);
	});
	//Make it so you can hit enter to save the text
	clone.addEventListener("keydown",function(e){
		if((e.keyCode == 13 || e.keyCode == 14) && !e.shiftKey){
			me.clone.blur();
		}
	});
};

I use localStorage & contenteditable to make and save changes to the Screen Saver text so that you can have your own vulgar message displayed on your screen. A helper function figures out which vendor prefix to use for the CSS. To make the the whole thing work well with contenteditable the easiest solution was to clone the node each time it lost focus, and empty out the div, otherwise I ended up in a loop of endless redrawing spans 1px further away in the translateZ

The CSS that makes it travel around the screen uses 2 different animations:

#word {
    position:absolute;
    right:20%;
    display:inline-block;
    padding:5px 15px;
    transform-style:preserve-3d;
    /* We use 2 different animations because the color change times don't line up with the rotate ones
     * And it's just easier to add more colors in it's own animation
     */
    animation:full-tilt 5s infinite ease-in-out alternate,
            color-change 11s infinite ease alternate;
}
@keyframes full-tilt {
    0% {
        right:20%;
        transform-origin:0 0;
        transform:rotateX(0) rotateY(0) rotateZ(0);
    }
    20% { transform-origin:0 50%; }
    40%	{ transform-origin:50% 50%; }
    60%	{ transform-origin:100% 0; }
    80%	{ transform-origin:0 100%; }
    100% {
        right:80%;
        transform-origin:50% 0;
        transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    }
}

@keyframes color-change {
    0%	{ color:#fff; }
    15%	{ color:#13ff46; }
    35%	{ color:#ccff13; }
    49%	{ color:#ff4613; }
    55%	{ color:#ff0000; }
    67% { color:#f713ff; }
    83%	{ color:#0F32BF; }
    100%{ color:#A30DA8; }
}

Plus, using the new FullScreen API, I made it go full screen, but really since it’s just one node you can just as easily use F11.

I think it looks pretty good, you should go try it out now:
Demo
This too was entered into the March Dev Derby.