mirror of
https://github.com/iconoir-icons/iconoir
synced 2024-05-19 06:47:02 +02:00
2720cccb2b
* add: website redesign and optimization * fix: additional improvements in home, support, and doc * fix: typography and spacing * fix: moved praise to support page * fix: redesigned support page * feat: added new pillars and paragraphs * fix: changed table colors * fix: shortened home * fix: small improvements to support page * fix: optimized mobile version * feat: added Ad on mobile * Remove outdated color prop from CurrentVersion * Small format fixes * fix: removed prefixes in Slider.tsx Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch> * fix: removed prefixes in Button.tsx Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch> * fix: removed unused const Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch> * fix: correctly renamed const Overlay Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch> * fix: applied same button style to the Copy button Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch> * fix: Removed unnecessary prefix properties, fixed transition Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch> * fix: Added non prefixed property in Stats.tsx Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch> * fix: Added transition effect on mouse out as well Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch> * fix: Removed a repeated property in Input.tsx Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch> * fix: Changed home title Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch> * fix: Changed icons to icon Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch> --------- Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch>
123 lines
3 KiB
TypeScript
123 lines
3 KiB
TypeScript
import React from 'react';
|
|
import styled from 'styled-components';
|
|
import { media } from '../lib/responsive';
|
|
import {useRef, useEffect} from 'react';
|
|
|
|
export interface HeaderBackgroundProps {
|
|
children: React.ReactElement;
|
|
}
|
|
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);
|
|
};
|
|
}, []);
|
|
|
|
|
|
return (
|
|
<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"/>
|
|
{children}
|
|
</HeaderContainer>
|
|
);
|
|
}
|
|
|
|
const HeaderContainer = styled.div`
|
|
position: relative;
|
|
width: fit-content;
|
|
margin: auto;
|
|
`;
|
|
const FloatingIcon = styled.div`
|
|
position: absolute;
|
|
display: none;
|
|
background-repeat: no-repeat;
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
${media.md} {
|
|
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} {
|
|
}
|
|
`;
|