Learning to become a front-end engineer or a full-stack engineer comes with a lot of work. Learning HTML, CSS, JavaScript, Tailwind or Bootstrap, ReactJS and NodeJS + express and others. There are a lot of things to keep up with and learning CSS seems not too important because of the dynamism in JavaScript. However, the UI and the front depend on the CSS used. So, that is why many people still find themselves stuck when there is too much styling to do in a UI design.
I do not really like to use any style frameworks like bootstrap or tailwind lately. I just love the freedom of using pure CSS and lessening the loads in node modules. In part of the landing page I am currently working on, there is a section where there is an animation under a text and it got me thinking about how to achieve it for a while but I found a way out and I am sharing it here.
I am using react and installed the react-html5video package through npm. The same work with normal HTML as the purpose of react-html5video is to use videos in JSX like HTML. So you could install react
npx create-react-app my-app
npm install react-html5video --save
This is the JSX
The source is the imported video name.
The video and the h1 must be in the same div.
<div className='bull3_vid-banner'>
<Video className="video" autoPlay loop muted>
<source src={Colorful} type="video/mp4"/>
</Video>
<h1>Team</h1>
</div>
CSS
.bull3_vid-banner {
margin-top: 20rem;
position: absolute ;
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center ;
align-items: center;
}
.bull3_vid-banner .video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.bull3_vid-banner h1 {
margin-top: 0rem;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
font-size: 200px;
text-align: center ;
color:#000000;
line-height: 100vh;
mix-blend-mode: screen;
}
The result.
Posted using Proof of Brain
Thanks for your contribution to the STEMsocial community. Feel free to join us on discord to get to know the rest of us!
Please consider delegating to the @stemsocial account (85% of the curation rewards are returned).
You may also include @stemsocial as a beneficiary of the rewards of this post to get a stronger support.