Issue
I want to show an animation before the website's content is displayed. I tried it myself and then saw some videos, but the videos show how to deliver the loader when the website is loading.
I want to show the animation irrespective of the loading. How can I do this?
This is the .jsx file and then the following is the CSS file.
import React, { useRef } from 'react'
import './home.css'
import video from './A.mp4';
import video1 from './Ankit.mp4';
import img1 from './home1.jpeg';
import img2 from './home4.jpeg';
import img3 from './home3.jpeg';
import { faDisplay } from '@fortawesome/free-solid-svg-icons';
export default function Home() {
const about = useRef(null);
const work = useRef(null);
const contact = useRef(null);
const scrollSection = (elementRef) => {
window.scrollTo({
top: elementRef.current.offsetTop,
behavior: "smooth",
});
};
const alerting = () => {
window.alert('Adding soon');
}
let preloder = document.getElementsByClassName('logo_video2');
const showlogo = () =>{
preloder.style.display = 'none';
}
return (
<>
<video loop autoPlay muted playsInline className='logo_video2' >
<source src={video1} type="video/mp4" />
</video>
Now, this is the CSS part for the same query.
.logo_video2{
position: fixed;
width: 200px;
height: 200px;
top: 35%;
right: 25%;
background: black url('./Ankit.mp4') no-repeat center;
z-index: 98798798 ;
}
Solution
You can have a state variable that is set to true and then set it to false after 3 seconds and conditionally render your video component accordingly.
Please find the required code here.
export default function Home() {
const [showVideo, setShowVideo] = useState(true);
const about = useRef(null);
const work = useRef(null);
const contact = useRef(null);
useEffect(
() => {
let timer1 = setTimeout(() => setShowVideo(false), 3000);
return () => {
clearTimeout(timer1);
};
},
[]
);
return (
<>
{showVideo ? <video loop autoPlay muted playsInline className='logo_video2' >
<source src={video1} type="video/mp4" />
</video> : <YourOtherComponent />}
}
Answered By - G Sriram
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.