45 rader
843 B
JavaScript
45 rader
843 B
JavaScript
import { motion } from 'framer-motion';
|
|
import { useRef, useEffect } from 'react';
|
|
|
|
function EnterToFloorTwo(props) {
|
|
const vd = useRef(null);
|
|
const opacity = props.opacity || 0;
|
|
|
|
if (opacity == 1) {
|
|
setTimeout(() => {
|
|
vd.current.play();
|
|
}, 100);
|
|
}
|
|
|
|
useEffect(() => {
|
|
vd.current.addEventListener('ended', () => {
|
|
setTimeout(() => {
|
|
vd.current.currentTime = 0;
|
|
}, 1000);
|
|
});
|
|
}, []);
|
|
|
|
return (
|
|
<motion.div
|
|
className="video-wrapper"
|
|
style={{
|
|
position: 'fixed',
|
|
top: 0,
|
|
left: 0,
|
|
width: '100%',
|
|
height: '100%',
|
|
zIndex: -1000,
|
|
opacity: opacity,
|
|
zIndex: -999,
|
|
}}
|
|
transition={{ type: 'tween', duration: 1 }}
|
|
>
|
|
<video ref={vd} muted width={'100%'}>
|
|
<source src="/video/floor2.webm" type="video/mp4" />
|
|
</video>
|
|
</motion.div>
|
|
);
|
|
}
|
|
|
|
export default EnterToFloorTwo;
|