ex-CHEETAH112.html

5,231 bytes

<!doctype html>
<html>

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

<title>HTML Obfuscator : Sample Page</title>

<style>
*,
*::before,
*::after{
	box-sizing:border-box;
}
body{
	position:relative;
	margin:0;
	padding:0;
	width:100vw;
	height:100vh;
	background:linear-gradient(
		to bottom,#fec 0%,#fff 100%);
	overflow:hidden;
}
.info{
	position:relative;
	margin:30px;
	padding:30px;
	font-family:"Times New Roman";
	color:orange;
	border:1px solid orange;
	background:rgba(255,255,255,0.8);
	z-index:100;
}
.info a{
	color:orange;
	font-weight:bold;
}
.info a:hover{
	color:#c18b28;
}
.info .title{
	margin-bottom:15px;
	font-size:36px;
}
.info .desc{
	font-size:24px;
}
</style>

<script>
"use strict";
(function(){
	function $ce(tagName){
		return document.createElement(tagName);
	};

	function getRandomInt(min,max){
		return Math.floor(Math.random()*(max-min+1))+min;
	};

	function appendStyle(style){
		const el=$ce("style");
		el.type="text/css";
		if(el.styleSheet){
			el.styleSheet.cssText=style;
		}else{
			el.appendChild(document.createTextNode(style));
		}
		document.getElementsByTagName("head")[0].appendChild(el);
		return el;
	};

	function onEnd(el,callback,ename){
		const func=function(e){
			if(el==e.srcElement){
				el.removeEventListener(ename,func);
				if(callback){callback(e);}
			}
		};
		el.addEventListener(ename,func);
	};

	function onAnimationEnd(el,callback){
		onEnd(el,callback,"animationend");
	};

	function insertEmoji(px){
		const yy=0;
		const style=`
#${px.id}.ctower{
	position:absolute;
	left:0;
	top:0;
	width:${px.size}em;
	height:100%;
}
#${px.id}.ctower .cbox{
	position:relative;
	width:100%;
	height:${px.size}em;
	display:flex;
	justify-content:center;
	align-items:center;
	transform:translateY(-100%);
}
#${px.id}.ctower .char{
	display:inline-block;
	font-size:${px.size}em;
	line-height:1.1;
}
#${px.id}.ctower{
	animation-name:kf-ctower-${px.id};
	animation-fill-mode:forwards;
	animation-duration:${px.dura}s;
	animation-timing-function:linear;
}
@keyframes kf-ctower-${px.id}{
	0%{
		left:0%;
		transform:translate(-${100+px.wk}%);
	}
	100%{
		left:100%;
		transform:translate(${px.wk}%);
	}
}
#${px.id}.ctower .cbox{
	animation-name:kf-cbox-${px.id};
	animation-fill-mode:forwards;
	animation-duration:${px.dura}s;
}
@keyframes kf-cbox-${px.id}{
	0%{
		top:${100-20*px.hk-yy}%;
		animation-timing-function:ease-in;
	}
	15%{
		top:${100-0*px.hk-yy}%;
		animation-timing-function:ease-out;
	}
	30%{
		top:${100-15*px.hk-yy}%;
		animation-timing-function:ease-in;
	}
	45%{
		top:${100-0*px.hk-yy}%;
		animation-timing-function:ease-out;
	}
	60%{
		top:${100-10*px.hk-yy}%;
		animation-timing-function:ease-in;
	}
	75%{
		top:${100-0*px.hk-yy}%;
		animation-timing-function:ease-out;
	}
	90%{
		top:${100-7*px.hk-yy}%;
		animation-timing-function:ease-in;
	}
	100%{
		top:${100-0*px.hk-yy}%;
	}
}
#${px.id}.ctower .char{
	animation-name:kf-char-${px.id};
	animation-fill-mode:forwards;
	animation-duration:${px.spin}s;
	animation-iteration-count:infinite;
	animation-timing-function:linear;
}
@keyframes kf-char-${px.id}{
	0%{
		transform:rotateZ(0);
	}
	100%{
		transform:rotateZ(360deg);
	}
}
`;
		const el_style=appendStyle(style);

		const el_char=$ce("div");
		el_char.className="char";
		el_char.innerHTML=px.char;

		const el_cbox=$ce("div");
		el_cbox.className="cbox";
		el_cbox.appendChild(el_char);

		const el_ctower=$ce("div");
		el_ctower.id=px.id;
		el_ctower.className="ctower";
		el_ctower.appendChild(el_cbox);

		onAnimationEnd(el_ctower,function(){
			el_ctower.remove();
			el_style.remove();
		});

		document.body.appendChild(el_ctower);
	};

	const emojix=[
		"😀","😃","😄","😁","😆","😅","😂","🤣","😊","😇",
		"🙂","🙃","😉","😌","😍","😘","😗","😙","😚","😋",
		"😛","😝","😜","🤪","🤨","🧐","🤓","😎","🤩","😏",
		"😒","😞","😔","😟","😕","🙁","😣","😖","😫","😩",
		"😢","😭","😤","😠","😡","🤬","🤯","😳","😱","😨",
		"😰","😥","😓","🤗","🤔","😑","😬","🙄","😲","😴",
		"🤤","😪","😵","😵‍","🤐","🤢","😷","🤒","🤕","🤑",
		"🤠","😈"];

	let idx=0;
	const timer_id=setInterval(function(){
		if(document.querySelectorAll(".ctower").length<10){
			idx++;
			const id="id"+(10000+idx);
			const px={
				id,
				char:emojix[getRandomInt(0,emojix.length-1)],
				size:getRandomInt(4,10),
				dura:getRandomInt(4,8),
				spin:getRandomInt(0.8,5),
				wk:getRandomInt(20,100),
				hk:getRandomInt(2,5)
			};
			insertEmoji(px);
		}
	},1000);
})();
</script>

</head>

<body>

<!-- [BEGIN] info -->
<div class="info">
	<div class="title">Bouncing Emoji</div>
	<div class="desc">This is a sample HTML page for
		<a href="http://www.phpkobo.com/html-obfuscator" target="_blank">HTML Obfuscator</a>
	</div>
</div>
<!-- [END] info -->

</body>

</html>