Reveal grid effect finished
This commit is contained in:
parent
a04a608718
commit
49f4975516
GPG key ID:
816B7707426FC612
4 changed files with 77 additions and 43 deletions
|
|
@ -56,13 +56,12 @@ function Homepage() {
|
|||
const xDiff = (x: number) => (x - posX) / 20
|
||||
const yDiff = (y: number) => (y - posY) / 20
|
||||
const pos = (x: number, y: number) => Math.sqrt(xDiff(x) * xDiff(x) + yDiff(y) * yDiff(y))
|
||||
const warst = [pos(0, 0), pos(params.columns, 0), pos(0, params.rows), pos(params.columns, params.rows)]
|
||||
// console.log(warst, params)
|
||||
const diagonals = [pos(0, 0), pos(params.columns, 0), pos(0, params.rows), pos(params.columns, params.rows)]
|
||||
|
||||
setTimeout(() => {
|
||||
setActve(false)
|
||||
setCount(e => e + 1)
|
||||
}, Math.max(...warst) * 1000 + 300)
|
||||
}, Math.max(...diagonals) * 1000 + 300)
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
@ -76,7 +75,7 @@ function Homepage() {
|
|||
}
|
||||
|
||||
return (
|
||||
<div id='tiles' style={{ '--columns': params.columns, '--rows': params.rows, '--bg-color1': colors[count % (colors.length - 1)], '--bg-color2': colors[(count + 1) % (colors.length - 1)] } as CSSProperties}>
|
||||
<div id='tiles' style={{ '--columns': params.columns, '--rows': params.rows, '--bg-color-1': colors[count % colors.length], '--bg-color-2': colors[(count + 1) % colors.length] } as CSSProperties}>
|
||||
{Array.from(Array(params.quantity)).map((_tile, index) => createTile(index))}
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ function Homepage2() {
|
|||
const [params, setParams] = useState({ columns, rows, quantity: columns * rows })
|
||||
const [position, setPosition] = useState([0, 0])
|
||||
const [active, setActve] = useState(false)
|
||||
const [action, setAction] = useState(false)
|
||||
const [count, setCount] = useState(0)
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -30,13 +31,12 @@ function Homepage2() {
|
|||
|
||||
const createTiles = useMemo(() => {
|
||||
|
||||
const colors = [
|
||||
'rgb(229, 57, 53)',
|
||||
'rgb(253, 216, 53)',
|
||||
'rgb(244, 81, 30)',
|
||||
'rgb(76, 175, 80)',
|
||||
'rgb(33, 150, 243)',
|
||||
'rgb(156, 39, 176)'
|
||||
const sentences = [
|
||||
'Ethem ...',
|
||||
'hat ...',
|
||||
'lange ...',
|
||||
'Hörner 🐂',
|
||||
'Grüße von Mallorca 🌊 🦦 ☀️'
|
||||
]
|
||||
|
||||
function createTile(index: number) {
|
||||
|
|
@ -48,27 +48,28 @@ function Homepage2() {
|
|||
const pos = (Math.sqrt(xDiff * xDiff + yDiff * yDiff)).toFixed(2)
|
||||
|
||||
const doEffect = (posX: number, posY: number) => {
|
||||
if (active)
|
||||
if (action)
|
||||
return
|
||||
setPosition([posX, posY])
|
||||
setActve(true)
|
||||
setActve(e => !e)
|
||||
setAction(true)
|
||||
|
||||
const xDiff = (x: number) => (x - posX) / 20
|
||||
const yDiff = (y: number) => (y - posY) / 20
|
||||
const xDiff = (x: number) => (x - posX) / 50
|
||||
const yDiff = (y: number) => (y - posY) / 50
|
||||
const pos = (x: number, y: number) => Math.sqrt(xDiff(x) * xDiff(x) + yDiff(y) * yDiff(y))
|
||||
const warst = [pos(0, 0), pos(params.columns, 0), pos(0, params.rows), pos(params.columns, params.rows)]
|
||||
// console.log(warst, params)
|
||||
const diagonals = [pos(0, 0), pos(params.columns, 0), pos(0, params.rows), pos(params.columns, params.rows)]
|
||||
|
||||
setTimeout(() => {
|
||||
setActve(false)
|
||||
setAction(false)
|
||||
if (active)
|
||||
setCount(e => e + 1)
|
||||
}, Math.max(...warst) * 1000 + 1000)
|
||||
}, Math.max(...diagonals) * 1000 + 1000)
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className={'tile ' + (active ? 'active' : '')}
|
||||
className={'tile ' + (active ? 'active' : 'inactive')}
|
||||
style={{ '--delay': pos + 's' } as CSSProperties}
|
||||
onClick={() => doEffect(x, y)}
|
||||
></div>
|
||||
|
|
@ -76,11 +77,14 @@ function Homepage2() {
|
|||
}
|
||||
|
||||
return (
|
||||
<div id='tiles' style={{ '--columns': params.columns, '--rows': params.rows, '--bg-color1': colors[count % (colors.length - 1)], '--bg-color2': colors[(count + 1) % (colors.length - 1)] } as CSSProperties}>
|
||||
<div id='tiles' style={{ '--columns': params.columns, '--rows': params.rows } as CSSProperties}>
|
||||
<div className="center-div">
|
||||
<h1 className={'headline ' + (!active ? 'active' : 'inactive')}>{sentences[count % sentences.length]}</h1>
|
||||
</div>
|
||||
{Array.from(Array(params.quantity)).map((_tile, index) => createTile(index))}
|
||||
</div >
|
||||
)
|
||||
}, [params, position, active, count])
|
||||
}, [params, position, active, action])
|
||||
|
||||
return createTiles
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
grid-template-rows: repeat(var(--rows), 1fr);
|
||||
|
||||
.tile {
|
||||
background-color: var(--bg-color1);
|
||||
background-color: var(--bg-color-1);
|
||||
|
||||
&.active {
|
||||
animation: bright .3s forwards;
|
||||
|
|
@ -19,18 +19,18 @@
|
|||
|
||||
@keyframes bright {
|
||||
0% {
|
||||
background-color: var(--bg-color1);
|
||||
background-color: var(--bg-color-1);
|
||||
}
|
||||
|
||||
50% {
|
||||
|
||||
background-color: var(--bg-color2);
|
||||
background-color: var(--bg-color-2);
|
||||
filter: brightness(130%);
|
||||
outline: 1px solid white;
|
||||
}
|
||||
|
||||
100% {
|
||||
|
||||
background-color: var(--bg-color2);
|
||||
background-color: var(--bg-color-2);
|
||||
}
|
||||
}
|
||||
|
|
@ -14,7 +14,6 @@ $g2: rgb(236, 64, 122);
|
|||
|
||||
.tile {
|
||||
position: relative;
|
||||
background-color: var(--bg-color1);
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
|
|
@ -24,9 +23,43 @@ $g2: rgb(236, 64, 122);
|
|||
}
|
||||
|
||||
&.active {
|
||||
animation: bright 1s forwards;
|
||||
opacity: 1;
|
||||
animation: hide .2s forwards;
|
||||
animation-delay: var(--delay);
|
||||
}
|
||||
|
||||
&.inactive {
|
||||
opacity: 0;
|
||||
animation: show .2s forwards;
|
||||
animation-delay: var(--delay);
|
||||
}
|
||||
}
|
||||
|
||||
.center-div {
|
||||
position: absolute;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
display: inherit;
|
||||
|
||||
.headline {
|
||||
margin: auto;
|
||||
font-size: 5em;
|
||||
background-color: rgba(20, 20, 20, 0.2);
|
||||
padding: .25em .5em;
|
||||
border-radius: .25em;
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
animation: hide 2s forwards;
|
||||
// animation-delay: 1s;
|
||||
}
|
||||
|
||||
&.inactive {
|
||||
opacity: 0;
|
||||
animation: show 2s forwards;
|
||||
// animation-delay: 1s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -40,24 +73,22 @@ $g2: rgb(236, 64, 122);
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes bright {
|
||||
@keyframes hide {
|
||||
0% {
|
||||
background-color: var(--bg-color1);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
40% {
|
||||
background-color: var(--bg-color2);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
60% {
|
||||
background-color: var(--bg-color2);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-color: var(--bg-color2);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes show {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue