Youtube link - click here
Source code:
<!DOCTYPE html>
<html>
<head>
<title>
width
</title>
<style>
.image img {
width: 100%;
height: 100%;
}
.container {
position: relative;
}
.text {
font-size: 0px;
font-family: rockwell;
font-weight: bolder;
position: fixed;
left: 50%;
top: 50%;
color: white;
transform: translate(-50%, -50%);
transition: 2s;
border: 5px solid white;
border-radius: 50px;
padding: 50px;
}
.name {
font-size: 30px;
font-family: rockwell;
font-weight: bolder;
position: fixed;
right: 20%;
top: 50%;
color: white;
transform: translate(50%, -50%);
transition: 2s;
border: 5px solid white;
border-radius: 50px;
padding: 50px;
background-color: #ffffff;
color: black;
}
</style>
</head>
<body>
<div class="container">
<div class="image">
<img src="C:\Users\sugan\Photos\rides\IMG_20201224_144247.jpg">
</div>
<div class="text">
OOTY
</div>
</div>
<script>
var scroll;
var temp = 0;
window.onscroll = function() {
scroll = window.pageYOffset;
if (scroll > temp) {
temp = scroll;
document.getElementsByClassName("text ")[0].style.fontSize = '50px';
} else {
temp = scroll;
document.getElementsByClassName("text ")[0].style.fontSize = '0px';
}
}
</script>
</body>
</html>
Post a Comment