Hello everyone and welcome back to a new tutorial. Today's tutorial will be about how to make an animated Landing page, we will also see how to clip an image to a text using CSS, and how to animate them so let's start.
I-Clip an image to text
to create that effect we will need to use a new CSS property called background-clip, this property will allow us to clip the image background to the text.
sometimes this property does not work so we have to add the -webkit- prefix to fix it. let's see an example
1-HTML
<!DOCTYPE html> <html> <head> <title>clip an image to a text</title>
<link rel="stylesheet" href="main.css" </head> <body> <h1>Clip image to text</h1> </body> </html>
now we will create the CSS file and apply our effect. For the background image, we will choose the image from unsplash, you can choose any image you like. Now let's write some code
2-CSS
h1{
background-image: url(https://images.unsplash.com/photo-1562605270-3f14cae4af35?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1813&q=80);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-clip: text;
-webkit-background-clip:text;
}
and this should work.
now let's see how to create our amazing landing page and for this, I will only give you the source code.
II-the landing page
1-HTML
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<div class="left">
<h1>Challenge yourself</h1>
</div>
<div class="right">
<h1>let the adventure begins</h1>
</div>
</div>
</body>
</html>
2-CSS
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
*{
margin: 0;
padding: 0;
outline: 0;
}
.container{
display: flex;
width: 100%;
height: 100vh;
}
.left , .right{
width: 50%;
position: relative;
}
.left{
background-image: url(https://images.unsplash.com/photo-1562327318-98aeb69556f0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1834&q=80);
background-size: cover;
background-repeat: no-repeat;
background-position: top;
}
.left h1{
position: absolute;
left: 50%;
top: 50%;
opacity: 0;
transform: translate(-50%,-50%);
width: 70%;
text-align: center;
text-transform: uppercase;
border: 4px solid #fafafa;
color: #fafafa;
padding: 24px 6px;
font-size: 28px;
font-family: 'Roboto',sans-serif;
font-weight: bold;
animation: left 1.4s ease forwards;
animation-delay: 0.4s;
}
.right h1{
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 8rem;
background-image: url(https://images.unsplash.com/photo-1562327318-98aeb69556f0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1834&q=80);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-clip: text;
background-position: -2000px ;
background-attachment: fixed;
-webkit-background-clip:text;
color: transparent;
animation: right 1.4s ease forwards;
animation-delay: .3s;
}
@keyframes left{
0%{
opacity: 0;
top:60%;
}
100%{
opacity: 1;
top: 50%;
}
}
@keyframes right{
0%{
background-position: -1000px;
left: 10%;
opacity: .3;
}
100%{
background-position: 0px ;
left: 0%;
opacity: 1;
}
}
and that's it, you can enjoy changing the background and play with the animation to make it looks great or adapt it for your website.
Make an amazing Landing page with animation
Reviewed by Medics
on
July 09, 2019
Rating:
Reviewed by Medics
on
July 09, 2019
Rating:
Thank you💚💚
ReplyDelete