2022-08-28 20:12:09 +02:00
|
|
|
import React from 'react';
|
|
|
|
import styled from 'styled-components';
|
2023-01-11 19:08:14 +01:00
|
|
|
import { media } from '../lib/responsive';
|
2023-03-19 21:23:43 +01:00
|
|
|
import {useRef, useEffect} from 'react';
|
2022-08-28 20:12:09 +02:00
|
|
|
|
|
|
|
export interface HeaderBackgroundProps {
|
|
|
|
children: React.ReactElement;
|
|
|
|
}
|
2023-03-19 21:23:43 +01:00
|
|
|
export function HeaderBackground({ children }: HeaderBackgroundProps) {
|
|
|
|
const parallaxRef = useRef<HTMLDivElement>(null);
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
if (!parallaxRef.current) return;
|
|
|
|
|
|
|
|
const parallaxElements = parallaxRef.current.querySelectorAll('[data-parallax-factor]');
|
|
|
|
|
|
|
|
const handleMouseMove = (event: MouseEvent) => {
|
|
|
|
const x = event.clientX / window.innerWidth;
|
|
|
|
const y = event.clientY / window.innerHeight;
|
|
|
|
parallaxElements.forEach((el) => {
|
|
|
|
const factor = parseFloat(el.getAttribute('data-parallax-factor') || '1');
|
|
|
|
(el as HTMLElement).style.transform = `translate3d(${x * factor * 40}px, ${y * factor * 80}px, 0)`;
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
document.addEventListener('mousemove', handleMouseMove);
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
document.removeEventListener('mousemove', handleMouseMove);
|
|
|
|
};
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
2022-08-28 20:12:09 +02:00
|
|
|
return (
|
2023-03-19 21:23:43 +01:00
|
|
|
<HeaderContainer ref={parallaxRef}>
|
|
|
|
<FloatingIconCellar data-parallax-factor="0.75"/>
|
|
|
|
<FloatingIconPay data-parallax-factor="1.5"/>
|
|
|
|
<FloatingFaceID data-parallax-factor="0.5"/>
|
|
|
|
<FloatingCommand data-parallax-factor="1.25"/>
|
|
|
|
<FloatingFill data-parallax-factor="2"/>
|
2022-08-28 20:12:09 +02:00
|
|
|
{children}
|
|
|
|
</HeaderContainer>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
const HeaderContainer = styled.div`
|
|
|
|
position: relative;
|
2023-03-19 21:23:43 +01:00
|
|
|
width: fit-content;
|
|
|
|
margin: auto;
|
2022-08-28 20:12:09 +02:00
|
|
|
`;
|
2023-03-19 21:23:43 +01:00
|
|
|
const FloatingIcon = styled.div`
|
2022-08-28 20:12:09 +02:00
|
|
|
position: absolute;
|
2023-03-19 21:23:43 +01:00
|
|
|
display: none;
|
|
|
|
background-repeat: no-repeat;
|
2022-08-28 20:12:09 +02:00
|
|
|
z-index: -1;
|
|
|
|
pointer-events: none;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
${media.md} {
|
2023-03-19 21:23:43 +01:00
|
|
|
display: flex;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
const FloatingIconCellar = styled(FloatingIcon)`
|
|
|
|
-webkit-transform: rotate(6deg);
|
|
|
|
-moz-transform: rotate(6deg);
|
|
|
|
top: -120px;
|
|
|
|
right: 0px;
|
|
|
|
width:200px;
|
|
|
|
height:200px;
|
|
|
|
background-image: url(/cellar.gif);
|
|
|
|
background-size:70%;
|
|
|
|
${media.lg} {
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
const FloatingIconPay = styled(FloatingIcon)`
|
|
|
|
-webkit-transform: rotate(18deg);
|
|
|
|
-moz-transform: rotate(18deg);
|
|
|
|
top: -50px;
|
|
|
|
right: -100px;
|
|
|
|
width:130px;
|
|
|
|
height:130px;
|
|
|
|
background-image: url(/pay-bitcoin.gif);
|
|
|
|
background-size:70%;
|
|
|
|
${media.lg} {
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
const FloatingFaceID = styled(FloatingIcon)`
|
|
|
|
-webkit-transform: rotate(6deg);
|
|
|
|
-moz-transform: rotate(6deg);
|
|
|
|
top: -130px;
|
|
|
|
right: 380px;
|
|
|
|
width:110px;
|
|
|
|
height:110px;
|
|
|
|
background-image: url(/face-id.gif);
|
|
|
|
background-size:70%;
|
|
|
|
${media.lg} {
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
const FloatingCommand = styled(FloatingIcon)`
|
|
|
|
-webkit-transform: rotate(-7deg);
|
|
|
|
-moz-transform: rotate(-7deg);
|
|
|
|
top: -94px;
|
|
|
|
left: 150px;
|
|
|
|
width:110px;
|
|
|
|
height:110px;
|
|
|
|
background-image: url(/command.gif);
|
|
|
|
background-size:70%;
|
|
|
|
${media.lg} {
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
const FloatingFill = styled(FloatingIcon)`
|
|
|
|
-webkit-transform: rotate(-14deg);
|
|
|
|
-moz-transform: rotate(-14deg);
|
|
|
|
top: -64px;
|
|
|
|
left: -75px;
|
|
|
|
width:110px;
|
|
|
|
height:110px;
|
|
|
|
background-image: url(/fill.gif);
|
|
|
|
background-size:70%;
|
|
|
|
${media.lg} {
|
2022-08-28 20:12:09 +02:00
|
|
|
}
|
|
|
|
`;
|