AnimeJS staggered grid effect with looping gradient background.
Based on: https://cdpn.io/YzXOGpm
A Pen by jon brookes on CodePen.
AnimeJS staggered grid effect with looping gradient background.
Based on: https://cdpn.io/YzXOGpm
A Pen by jon brookes on CodePen.
<div id="tiles"></div> | |
<h1 id="title" class="centered"> | |
The name of the game is | |
<span class="fancy">Chess</span>. | |
</h1> | |
<i id="icon" class="fa-solid fa-chess centered"></i> | |
<a id="source-link" class="meta-link" href="https://cdpn.io/YzXOGpm" target="_blank"> | |
<i class="fa-solid fa-link"></i> | |
<span>Source</span> | |
</a> | |
<a id="yt-link" class="meta-link" href="https://youtu.be/bAwEj_mSzOs" target="_blank"> | |
<i class="fa-brands fa-youtube"></i> | |
<span>5 min tutorial</span> | |
</a> |
const wrapper = document.getElementById("tiles"); | |
let columns = 0, | |
rows = 0, | |
toggled = false; | |
const toggle = () => { | |
toggled = !toggled; | |
document.body.classList.toggle("toggled"); | |
} | |
const handleOnClick = index => { | |
toggle(); | |
anime({ | |
targets: ".tile", | |
opacity: toggled ? 0 : 1, | |
delay: anime.stagger(50, { | |
grid: [columns, rows], | |
from: index | |
}) | |
}); | |
} | |
const createTile = index => { | |
const tile = document.createElement("div"); | |
tile.classList.add("tile"); | |
tile.style.opacity = toggled ? 0 : 1; | |
tile.onclick = e => handleOnClick(index); | |
return tile; | |
} | |
const createTiles = quantity => { | |
Array.from(Array(quantity)).map((tile, index) => { | |
wrapper.appendChild(createTile(index)); | |
}); | |
} | |
const createGrid = () => { | |
wrapper.innerHTML = ""; | |
const size = document.body.clientWidth > 800 ? 100 : 50; | |
columns = Math.floor(document.body.clientWidth / size); | |
rows = Math.floor(document.body.clientHeight / size); | |
wrapper.style.setProperty("--columns", columns); | |
wrapper.style.setProperty("--rows", rows); | |
createTiles(columns * rows); | |
} | |
createGrid(); | |
window.onresize = () => createGrid(); |
<script src="https://kit.fontawesome.com/944eb371a4.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script> |
:root { | |
--g1: rgb(98, 0, 234); | |
--g2: rgb(236, 64, 122); | |
} | |
@keyframes background-pan { | |
from { | |
background-position: 0% center; | |
} | |
to { | |
background-position: -200% center; | |
} | |
} | |
body { | |
animation: background-pan 10s linear infinite; | |
background: linear-gradient( | |
to right, | |
var(--g1), | |
var(--g2), | |
var(--g1) | |
); | |
background-size: 200%; | |
height: 100vh; | |
overflow: hidden; | |
margin: 0px; | |
} | |
body.toggled { | |
animation: none; | |
} | |
body.toggled > #title { | |
opacity: 0; | |
} | |
body.toggled > #icon { | |
opacity: 1; | |
} | |
body.toggled > #tiles > .tile:hover { | |
opacity: 0.1 !important; | |
} | |
.centered { | |
left: 50%; | |
position: absolute; | |
top: 50%; | |
transform: translate(-50%, -50%); | |
} | |
#tiles { | |
height: calc(100vh - 1px); | |
width: calc(100vw - 1px); | |
position: relative; | |
z-index: 2; | |
display: grid; | |
grid-template-columns: repeat(var(--columns), 1fr); | |
grid-template-rows: repeat(var(--rows), 1fr); | |
} | |
.tile { | |
cursor: pointer; | |
position: relative; | |
} | |
.tile:hover:before { | |
background-color: rgb(30, 30, 30); | |
} | |
.tile:before { | |
background-color: rgb(15, 15, 15); | |
content: ""; | |
inset: 0.5px; | |
position: absolute; | |
} | |
#title { | |
color: white; | |
font-family: "Rubik", sans-serif; | |
font-size: 6vw; | |
margin: 0px; | |
pointer-events: none; | |
transition: opacity 1200ms ease; | |
width: 50vw; | |
z-index: 3; | |
} | |
#title > .fancy { | |
color: var(--g2); | |
font-family: 'Dancing Script', cursive; | |
font-size: 1.5em; | |
line-height: 0.9em; | |
} | |
#icon { | |
color: rgba(255, 255, 255, 0.15); | |
font-size: 80vmin; | |
opacity: 0; | |
pointer-events: none; | |
transition: opacity 1200ms ease; | |
z-index: 1; | |
} | |
/* -- YouTube Link Styles -- */ | |
body.menu-toggled > .meta-link > span { | |
color: rgb(30, 30, 30); | |
} | |
#source-link { | |
bottom: 60px; | |
} | |
#source-link > i { | |
color: rgb(94, 106, 210); | |
} | |
#yt-link > i { | |
color: rgb(239, 83, 80); | |
} | |
.meta-link { | |
align-items: center; | |
backdrop-filter: blur(3px); | |
background-color: rgba(255, 255, 255, 0.05); | |
border: 1px solid rgba(255, 255, 255, 0.1); | |
border-radius: 6px; | |
bottom: 10px; | |
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1); | |
cursor: pointer; | |
display: inline-flex; | |
gap: 5px; | |
left: 10px; | |
padding: 10px 20px; | |
position: fixed; | |
text-decoration: none; | |
transition: background-color 400ms, border-color 400ms; | |
z-index: 10000; | |
} | |
.meta-link:hover { | |
background-color: rgba(255, 255, 255, 0.1); | |
border: 1px solid rgba(255, 255, 255, 0.2); | |
} | |
.meta-link > i, .meta-link > span { | |
height: 20px; | |
line-height: 20px; | |
} | |
.meta-link > span { | |
color: white; | |
font-family: "Rubik", sans-serif; | |
transition: color 400ms; | |
} |