HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Drunk letters</title>
<style>
html,
body {
height: 100%;
}
body {
margin: 0;
font: 16px/1.5 Arial, sans-serif;
color: #333;
}
.letters {
display: grid;
gap: 1px;
align-content: center;
grid-template-columns: repeat(8, minmax(16px, 1fr));
text-align: center;
background: #aaa;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.letters > span {
border: 1px solid #555;
background: #ccc;
line-height: 48px;
-moz-box-shadow: inset 0px 1px 0px 0px #d3dedc;
-webkit-box-shadow: inset 0px 1px 0px 0px #d3dedc;
box-shadow: inset 0px 1px 0px 0px #d3dedc;
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.05, #badbc5),
color-stop(1, #ebf0f0)
);
background: -moz-linear-gradient(top, #badbc5 5%, #ebf0f0 100%);
background: -webkit-linear-gradient(top, #badbc5 5%, #ebf0f0 100%);
background: -o-linear-gradient(top, #badbc5 5%, #ebf0f0 100%);
background: -ms-linear-gradient(top, #badbc5 5%, #ebf0f0 100%);
background: linear-gradient(to bottom, #badbc5 5%, #ebf0f0 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#badbc5', endColorstr='#ebf0f0',GradientType=0);
background-color: #badbc5;
border: 1px solid #959e9b;
display: inline-block;
cursor: pointer;
color: #333;
font-family: Arial;
font-weight: bold;
}
#drunktext {
display: flex;
gap: 5px;
justify-content: center;
flex-wrap: wrap;
margin: 10px;
}
#drunktext span {
text-align: center;
border: 1px solid #eee;
min-width: 48px;
min-height: 48px;
line-height: 48px;
background: #eee;
}
@-webkit-keyframes colors {
0% {
background: #5cb6a2;
}
50% {
background: #9de593;
}
}
@keyframes colors {
0% {
background: #5cb6a2;
}
50% {
background: #9de593;
}
}
@-webkit-keyframes rote {
0% {
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
50% {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
}
@keyframes rote {
0% {
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
50% {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
}
.drunked span {
-webkit-animation: 1s ease-in-out both rote alternate infinite,
4s ease-in-out both colors alternate infinite;
animation: 1s ease-in-out both rote alternate infinite,
4s ease-in-out both colors alternate infinite;
}
.drunked span:nth-child(1) {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.drunked span:nth-child(2) {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.drunked span:nth-child(3) {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.drunked span:nth-child(4) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.drunked span:nth-child(5) {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.drunked span:nth-child(6) {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.drunked span:nth-child(7) {
-webkit-animation-delay: 0.7s;
animation-delay: 0.7s;
}
.drunked span:nth-child(8) {
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}
.drunked span:nth-child(9) {
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}
.drunked span:nth-child(10) {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.drunked span:nth-child(11) {
-webkit-animation-delay: 1.1s;
animation-delay: 1.1s;
}
.drunked span:nth-child(12) {
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
}
.drunked span:nth-child(13) {
-webkit-animation-delay: 1.3s;
animation-delay: 1.3s;
}
.drunked span:nth-child(14) {
-webkit-animation-delay: 1.4s;
animation-delay: 1.4s;
}
.drunked span:nth-child(15) {
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
}
.drunked span:nth-child(16) {
-webkit-animation-delay: 1.6s;
animation-delay: 1.6s;
}
.drunked span:nth-child(17) {
-webkit-animation-delay: 1.7s;
animation-delay: 1.7s;
}
.drunked span:nth-child(18) {
-webkit-animation-delay: 1.8s;
animation-delay: 1.8s;
}
.drunked span:nth-child(19) {
-webkit-animation-delay: 1.9s;
animation-delay: 1.9s;
}
.drunked span:nth-child(20) {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.drunked span:nth-child(21) {
-webkit-animation-delay: 2.1s;
animation-delay: 2.1s;
}
.drunked span:nth-child(22) {
-webkit-animation-delay: 2.2s;
animation-delay: 2.2s;
}
.drunked span:nth-child(23) {
-webkit-animation-delay: 2.3s;
animation-delay: 2.3s;
}
.drunked span:nth-child(24) {
-webkit-animation-delay: 2.4s;
animation-delay: 2.4s;
}
.drunked span:nth-child(25) {
-webkit-animation-delay: 2.5s;
animation-delay: 2.5s;
}
.drunked span:nth-child(26) {
-webkit-animation-delay: 2.6s;
animation-delay: 2.6s;
}
.drunked span:nth-child(27) {
-webkit-animation-delay: 2.7s;
animation-delay: 2.7s;
}
.drunked span:nth-child(28) {
-webkit-animation-delay: 2.8s;
animation-delay: 2.8s;
}
.drunked span:nth-child(29) {
-webkit-animation-delay: 2.9s;
animation-delay: 2.9s;
}
.drunked span:nth-child(30) {
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.drunked span:nth-child(31) {
-webkit-animation-delay: 3.1s;
animation-delay: 3.1s;
}
.drunked span:nth-child(32) {
-webkit-animation-delay: 3.2s;
animation-delay: 3.2s;
}
.btn {
-moz-box-shadow: inset 0px 1px 0px 0px #9acc85;
-webkit-box-shadow: inset 0px 1px 0px 0px #9acc85;
box-shadow: inset 0px 1px 0px 0px #9acc85;
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.05, #74ad5a),
color-stop(1, #68a54b)
);
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
background: -moz-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
background: -webkit-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
background: -o-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
background: -ms-linear-gradient(top, #74ad5a 5%, #68a54b 100%);
background: linear-gradient(to bottom, #74ad5a 5%, #68a54b 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#74ad5a', endColorstr='#68a54b',GradientType=0);
background-color: #74ad5a;
border: 1px solid #3b6e22;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-weight: bold;
text-decoration: none;
line-height: 48px;
}
.btn:hover {
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.05, #68a54b),
color-stop(1, #74ad5a)
);
background: -moz-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
background: -webkit-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
background: -o-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
background: -ms-linear-gradient(top, #68a54b 5%, #74ad5a 100%);
background: linear-gradient(to bottom, #68a54b 5%, #74ad5a 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#68a54b', endColorstr='#74ad5a',GradientType=0);
background-color: #68a54b;
}
.btn:active {
transform: scale(0.95);
}
</style>
</head>
<body>
<div id="drunktext"></div>
<script>
(function() {
"use strict";
let link = document.getElementById("link");
let drunktext = document.getElementById("drunktext");
const abc =
"A,Ą,B,C,Č,D,E,Ę,Ė,F,G,H,I,Į,Y,J,K,L,M,N,O,P,R,S,Š,T,U,Ų,Ū,V,Z,Ž";
let createFrag = document.createDocumentFragment();
function ElementCreate(tagname) {
this.element = document.createElement(tagname);
this.addClas = function(clas) {
this.element.className = clas;
return this;
};
this.addText = function(text) {
this.element.innerText = text;
return this;
};
this.appTFra = function() {
createFrag.appendChild(this.element);
return this;
};
this.appElem = function(
where = document.getElementsByTagName("body")[0]
) {
where.appendChild(createFrag);
};
}
let leters = new ElementCreate("div");
leters
.addClas("letters")
.appTFra()
.appElem();
let cs;
function createKeys() {
for (let letter of abc) {
if (letter !== ",") {
cs = new ElementCreate("span");
cs.addText(letter).appTFra();
}
}
cs = new ElementCreate("button");
cs.addText("Animate")
.addClas("btn")
.appTFra();
}
createKeys();
cs.appElem(document.getElementsByClassName("letters")[0]);
document
.getElementsByClassName("letters")[0]
.addEventListener("click", textsdr);
let i = 0;
function textsdr(e) {
i++;
if (
i > 32 ||
e.target.classList.contains("letters") ||
e.target.classList.contains("btn")
)
return;
if (drunktext.innerText === "sample") {
drunktext.innerHTML = "";
}
let lr = new ElementCreate("span");
lr.addText(e.target.innerText).appTFra();
cs.appElem(drunktext);
}
function unlock() {
drunktext.classList.toggle("drunked");
}
document
.getElementsByClassName("btn")[0]
.addEventListener("click", unlock);
})();
</script>
</body>
</html>
