35 lines
695 B
JavaScript
35 lines
695 B
JavaScript
import { motion } from 'framer-motion';
|
|
import { useEffect, useRef } from 'react';
|
|
|
|
function EnterVideo(props) {
|
|
const opacity = props.opacity || 0;
|
|
const vd = useRef(null);
|
|
|
|
useEffect(() => {
|
|
vd.current.addEventListener('ended', props.onVideoEnd);
|
|
}, []);
|
|
|
|
return (
|
|
<motion.div
|
|
className="video-wrapper"
|
|
style={{
|
|
position: 'fixed',
|
|
top: 0,
|
|
left: 0,
|
|
width: '100%',
|
|
height: '100%',
|
|
zIndex: -1000,
|
|
opacity: opacity,
|
|
zIndex: -1000,
|
|
}}
|
|
transition={{ type: 'tween' }}
|
|
>
|
|
<video ref={vd} muted autoPlay={true} width={'100%'}>
|
|
<source src="/video/enter.webm" type="video/mp4" />
|
|
</video>
|
|
</motion.div>
|
|
);
|
|
}
|
|
|
|
export default EnterVideo;
|