3D https://windows93.net

WINDOWS93 3D windows effect.js

/**
 * Paste the following (or this entire file) into the Terminal app on windows93.net (or your browser's devtools console)
 * 
 * You can then run toggle3D() to toggle the effect (it starts enabled)
 * 
 * I originally made this as the Konami Code effect on 98.js.org
 * So this is a port of that to work on windows93.net
 * (where it's much more thematically fitting :P)
 */

var cleanup3D;

disable3D = function(){
	if(cleanup3D){
		cleanup3D();
		cleanup3D = null;
	}
	var window_node_list = document.querySelectorAll(".ui_window");
	for(var i=0; i<window_node_list.length; i++){
		var win_el = window_node_list[i];
		win_el.style.transform = "";
		win_el.style.transformOrigin = "";
	};
};

enable3D = function(){
	disable3D();
	var animate = function(){
		var rAF_ID = requestAnimationFrame(animate);
		cleanup3D = function(){
			cancelAnimationFrame(rAF_ID);
		};
		var window_node_list = document.querySelectorAll(".ui_window");
		for(var i=0; i<window_node_list.length; i++){
			var win_el = window_node_list[i];
			var el = win_el;

			var offsetLeft = 0;
			var offsetTop = 0;
			do{
				offsetLeft += el.offsetLeft;
				offsetTop += el.offsetTop;
				el = el.offsetParent;
			}while(el);

			win_el.style.transform =
				`perspective(4000px) rotateY(${
					-(offsetLeft + (win_el.clientWidth - innerWidth) / 2) / innerWidth / 3
				}turn) rotateX(${
					(offsetTop + (win_el.clientHeight - innerHeight) / 2) / innerHeight / 3
				}turn)`;
			win_el.style.transformOrigin = "50% 50%";
		};
	};
	animate();
};

toggle3D = function(){
	if(cleanup3D){
		disable3D();
	}else{
		enable3D();
	}
};

enable3D();