Create Parts of Nature as Like Mountain, Moon, Star Etc.
HTML
<html>
<head>
<title> Moon Light</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section>
<img src="http://www.picget.net/background/2.jpg" id="bg">
<img src="moon.png" id="moon">
<img src="https://www.pikpng.com/pngl/b/360-3609911_a-young-man-reaching-the-top-of-the.png" id="mountain">
<img src="road.png" id="road">
<h6 id="text1">Nature is essential to our lives – from the food on our plates to the clothes we wear, from medicines to mental health benefits.<br><br><br><br><br>
It’s easy to think nature will always be with us. But even in my lifetime, birds like starlings and house sparrows have declined so much they’re now listed as endangered.
In fact, nature is faring worse in the UK than in most other countries. The latest State of Nature report shows that over half our wild species – plants, insects, birds, mammals – are in decline.<br><br><br><br><br>
Nature performs major miracles for us every day – from giving us great views and helping to prevent floods to regulating the weather and keeping us supplied with clean water, fresh air and plentiful food.
When running the tap or doing the shopping it’s easy to forget that without healthy soils and diverse plant and animal species doing their thing our lives would be tougher and poorer.
Trees in towns cool us in summer and trap air pollution. Bees pollinate our crops, putting food on our table and in our stomachs. Even much-maligned wasps have uses such as controlling aphids.
</h6>
<h2 id="text"> MAA Blogger</h2>
</section>
<script type="text/javascript">
let bg=document.getElementById("bg");
let moon=document.getElementById("moon");
let mountain=document.getElementById("mountain");
let road=document.getElementById("road");
let text=document.getElementById("text");
window.addEventListener('scroll',function()
{
var value=window.scrollY;
bg.style.top = value = 0.5+'px';
moon.style.left = -value = 0.5+'px';
mountain.style.top = -value = 0.15+'px';
road.style.top = value = 0.15+'px';
text.style.top = value = 1+'px';
})
</script>
</body>
</html>
CSS
*
{
margin: 0;
Padding: 0;
font-family: 'Poppins',sans-serif;
}
body
{
background: #0a2a43;
min-height: 700px;
}
section
{
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
section:before
{
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background: linear-gradient(to top, #0a2a43,transparent);
z-index: 100;
}
section:after
{
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background: #0a2a43;
z-index: 100;
mix-blend-mode: color;
}
section img
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
#text{
position: relative;
color: #fff;
font-size: 6em;
z-index: 1;
}
#text1{
position: absolute;
top: 10px;
color: #fff;
font-size: 1.5em;
z-index: 1;
}
#road
{
z-index: 1;
}
OUTPUT
 |
| Download This Image |
 |
| Download This Image |
Posts
46 Comments
Wonderful
ReplyDeleteAmazing 😝😝😝
ReplyDeleteWowwww 🗣️🗣️🗣️🗣️
ReplyDeleteAmazing
ReplyDeleteInteresting
ReplyDeleteAwesome
ReplyDeleteAwesome
ReplyDeleteAwesome
ReplyDeletewow
Awesome
ReplyDeleteWonderful
ReplyDeleteAwesome
ReplyDeleteAwesome
ReplyDeleteWonderful
Awesome
ReplyDeleteVery nice
ReplyDeleteAwesome
ReplyDeleteAwesome
ReplyDeleteExcellent
ReplyDeleteKallu
ReplyDeleteVery good
Awesome
ReplyDeleteVery Interesting
ReplyDeleteAwesome
ReplyDeleteSuperb
ReplyDeleteAwesome
ReplyDeleteAwesome
ReplyDeleteAwesome
ReplyDeleteWow
Awesome
ReplyDeletewow
ReplyDeleteAwesome
Awesome
ReplyDeleteInteresting
ReplyDeleteInteresting
ReplyDeleteexcellent
ReplyDeleteInteresting
ReplyDeleteExcellent👍
DeleteTooo much
ReplyDeleteAmazing
ReplyDeleteexcellent
ReplyDeleteInteresting
ReplyDeleteAmazing 😝😝😝
ReplyDeleteWonderful
ReplyDeleteWowwww
ReplyDeleteexcellent
ReplyDeleteAmazing 😝😝😝
ReplyDeleteExcellent
ReplyDeleteInteresting
ReplyDeleteInteresting
ReplyDeleteAmazing creation
ReplyDelete