GRID TEST (with links)

HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes"> <title>card</title> <link href="https://fonts.googleapis.com/css…" rel="stylesheet"> <script> document.createElement("article"); document.createElement("footer"); document.createElement("header"); document.createElement("hgroup"); document.createElement("nav"); </script> <style> a { color: #555; text-decoration: none; } a:focus{outline: 10px dotted;} .card { background: #eee; display: block; height: 100px; width: 70px; border: 1px solid #898; position: relative; border-radius: 4px; padding: 4px; text-align: center; font-size: 10px; } .card:after { position: absolute; line-height: 1; display: block; top: 0; left: 0; height: 100%; width: 100%; background: #fafafa; content: "\2665"; white-space: pre; line-height: 100px; text-align: center; backface-visibility: visible; border-radius: 4px; border: 1px solid #898; text-shadow: 30px -40px 0 red, -30px -40px red, 30px 50px 0 red, -30px 50px red; color: red; } * { padding: 0; margin: 0; } .card:hover::after { transform: translateY(16px); backface-visibility: hidden; transition: 1s ease; box-shadow: 0 5px 5px 0 #555; } .card a { pointer-events: none; } #wra { background: #333; width: calc(100%-6px); display: block; margin: 0 auto; position: relative; height: calc(100%-6px); overflow: hidden; } #magics{ position: absolute; margin: auto; top: 0; left: 0; bottom: 0; right: 0; text-align: center; color: #fff; height: 50px; padding: 0 20%; } #magics a{ display: block; height: 50px; line-height: 50px; } .grid { pointer-events: none; counter-reset: section; display: grid; grid-template-rows: repeat(6, calc(100vh/6)); grid-template-columns: repeat(6, 1fr); justify-content: center; align-content: center; perspective: calc(100vw); perspective-origin: 50% 50%; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ } .grid li { pointer-events: auto; display: flex; justify-content: center; align-items: center; cursor: pointer; border-radius: 4px; position: relative; list-style: none; background: #ffa; box-shadow: 0 0 0 1px #555 inset, 0 0 2px 2px #aaa; font-size: 10px; overflow: hidden; background-image: url("http://oi63.tinypic.com/2cylbma.jpg"); background-size: 100vw 100vh; margin: 6px 0 0 6px; } .grid a { display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; background: #aaa; position: absolute; top: 0; } .grid li:after { counter-increment: section; content: counter(section); margin: 6px; display: block; position: absolute; top: 0; left: 0; } .hide { animation: hides 1s linear forwards; } .visi { animation: visib 1s ease forwards; backface-visibility: hidden; } .grid li:nth-child(1){ background-position: 0 0; } .grid li:nth-child(2){ background-position: 20% 0; } .grid li:nth-child(3){ background-position: 40% 0; } .grid li:nth-child(4){ background-position: 60% 0; } .grid li:nth-child(5){ background-position: 80% 0; } .grid li:nth-child(6){ background-position: 100% 0; } .grid li:nth-child(7){ background-position: 0 20%; } .grid li:nth-child(8){ background-position: 20% 20%; } .grid li:nth-child(9){ background-position: 40% 20%; } .grid li:nth-child(10){ background-position: 60% 20%; } .grid li:nth-child(11){ background-position: 80% 20%; } .grid li:nth-child(12){ background-position: 100% 20%; } .grid li:nth-child(13){ background-position: 0 40%; } .grid li:nth-child(14){ background-position: 20% 40%; } .grid li:nth-child(15){ background-position: 40% 40%; } .grid li:nth-child(16){ background-position: 60% 40%; } .grid li:nth-child(17){ background-position: 80% 40%; } .grid li:nth-child(18){ background-position: 100% 40%; } .grid li:nth-child(19){ background-position: 0 60%; } .grid li:nth-child(20){ background-position: 20% 60%; } .grid li:nth-child(21){ background-position: 40% 60%; } .grid li:nth-child(22){ background-position: 60% 60%; } .grid li:nth-child(23){ background-position: 80% 60%; } .grid li:nth-child(24){ background-position: 100% 60%; } .grid li:nth-child(25){ background-position: 0 80%; } .grid li:nth-child(26){ background-position: 20% 80%; } .grid li:nth-child(27){ background-position: 40% 80%; } .grid li:nth-child(28){ background-position: 60% 80%; } .grid li:nth-child(29){ background-position: 80% 80%; } .grid li:nth-child(30){ background-position: 100% 80%; } .grid li:nth-child(31){ background-position: 0 100%; } .grid li:nth-child(32){ background-position: 20% 100%; } .grid li:nth-child(33){ background-position: 40% 100%; } .grid li:nth-child(34){ background-position: 60% 100%; } .grid li:nth-child(35){ background-position: 80% 100%; } .grid li:nth-child(36){ background-position: 100% 100%; } @keyframes visib{ 50%{display:block;visibility: hidden;} 100%{display:block;visibility: hidden;} } @keyframes hides{ 0%{transform:rotateY(-180deg);z-index:1;} 100%{transform:rotateY(0);z-index:1;} } </style> </head> <body> <div id="wra"> <div id="magics"><a href="#">THE LINK :)</a> I was testing grid and noticed when grid is over links do not working then added to css pointer-events: none; to parent element and pointer-events: auto; to children element and then link started working. </div> <ul class="grid"> </ul> </div> <script> "use strict"; (function(){ const grid = document.querySelector(".grid"); grid.innerHTML = "<li><a href=\"#\">Click</a></li>".repeat(36); grid.addEventListener("click", function(el){ let{target} = hide; if(el.target !== this) hide(el.target); }); function hide(el){ if(el.parentElement.tagName !== "UL"){ el.parentElement.classList.toggle("hide"); } el.classList.toggle("visi"); insertText(el); } const arr = ["YES", "IMAGE", "OK"]; function textRandomFromArray(arr){ let arrLenth = arr.length; let textIndex = Math.floor(Math.random()*arrLenth); console.log(textIndex); return arr[textIndex]; } function insertText(i){ return i.innerText = textRandomFromArray(arr); } document.getElementById("magics").style.display = "none"; for (let i = 0; i < grid.childNodes.length; ++i) { (function(n) { setTimeout(function(){ if(grid.childNodes.length-1 === n){ document.getElementById("magics").style.display = "block"; grid.childNodes[19].classList.toggle("visi"); grid.childNodes[20].classList.toggle("visi"); grid.childNodes[21].classList.toggle("visi"); grid.childNodes[22].classList.toggle("visi"); grid.childNodes[15].classList.toggle("visi"); grid.childNodes[14].classList.toggle("visi"); } grid.childNodes[n].classList.toggle("hide"); grid.childNodes[n].querySelector('a').classList.toggle("visi"); }, n*100); }(i)); } }()); </script> </body> </html>
CSS
JAVASCRIPT
Expand for more options Login