Nová verze interaktivního gridového layoutu s kartami, které se při najetí myší dynamicky zvětšují. Tento moderní a responzivní design je ideální pro zobrazení vizuálních prvků, jako jsou třeba hudební akce.
Funkce dynamicky vytváří prvky gridu podle velikosti obrazovky a zajistí, že layout je plně responzivní.
function createItems() {
const numColumns = 40; // Počet čtverců na řádku
const itemSize = window.innerWidth / numColumns; // Velikost jednoho čtverce
const numRows = Math.ceil(window.innerHeight / itemSize); // Počet řádků podle výšky obrazovky
const totalItems = numColumns * numRows; // Celkový počet čtverců
wrapper.style.gridTemplateColumns = `repeat(${numColumns}, 1fr)`; // Nastavení počtu sloupců
wrapper.innerHTML = ""; // Vyčištění wrapperu
for (let i = 0; i < totalItems; i++) {
const item = document.createElement("div");
item.classList.add("item");
wrapper.appendChild(item);
}
}function updateShadowPosition(e) {
const shadowSize = parseInt(getComputedStyle(root).getPropertyValue("--shadow-size"), 10);
const x = e.clientX - wrapper.getBoundingClientRect().x;
const y = e.clientY - wrapper.getBoundingClientRect().y;
root.style.setProperty("--shadow-left", `${x - shadowSize / 2}px`);
root.style.setProperty("--shadow-top", `${y - shadowSize / 2}px`);
}
Napsat komentář