Parallax is a 3d effect used in various websites to make webpages attractive . In this effect, as we scroll, the background of the webpages moves at different speed than the foreground making it look brilliant to the eyes.
HTML & CSS CODE
<!DOCTYPE html>
<html>
<head>
<title>auto slider</title>
<style>
body{
background:#222;
margin=0px;
}
.rocketup{
margin:auto;
}
.main{
button:50%;
margin:200px 0px 0px 20%;
height:200px;
width:300px;
}
.main2{
-webkit-filter: contrast(200%); /* Safari */
-webkit-filter: saturate(5);
margin-left:20px;
}
div#parallax{
height:700px;
width:100%;
margin:0px auto;
background-color:#000;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAEh5IDgSZBPrnowonDJ5K_WDwxZiCqCfc2jZ1kgd7-s19IQTsJq37rJyF24qKDYuGmK8qbE7veWcrHh7Z1LRRIW4Ksq_QRDbjFJ9g1xTLGIpmNAqGVI0BdkV20j3ZtOWdNlb27Go3u0Pr/s1600/planet4.gif)
,url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivqU7TaVI9Y-TW0-VYzQVGeVzDyze6xyKxZzI6S0zVRSCryxSjRIxAGNsGoIX_Nj_uM4lGM87818POUs-U_TO-FGmDiQutWbDPCyzPHKeFlZ9e0hGOtuLWbxYQHihVlMoefrBSx3wFuDhd/s320/Space.png);
background-position:120% 70px,0px 0px;
background-repeat:no-repeat,repeat;
animation: animate-background linear 50s infinite;
}
@keyframes animate-background{
from{background-position:120% 70px,0px 0px;}
to{background-position:-20% 70px,-1000px 0px;}
}
</style>
<body>
<div id="parallax">
<img class="main2"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAEh5IDgSZBPrnowonDJ5K_WDwxZiCqCfc2jZ1kgd7-s19IQTsJq37rJyF24qKDYuGmK8qbE7veWcrHh7Z1LRRIW4Ksq_QRDbjFJ9g1xTLGIpmNAqGVI0BdkV20j3ZtOWdNlb27Go3u0Pr/s1600/planet4.gif">
<img class="main" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEeKhOZxVVsqoAqKW1MvH1gQnGebAaKxdP0QjdVghb29QeGJ8ntrndABGQThjSKnE9xwQ8fUml3_7UeKqGkaaLgZSHeZfCBPfYlyqSS0PsdagaIgMCK1SVGvOTH3yR0GIVr4eJ8P_wzluu/s1600/639373.png">
<marquee direction="right" ><img class="rocketup" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2Gy4_xX8B6-615xknOaJ2v8RYusyfeUKEdTS_xo2nv5pQCiuvCDjafyt2TTOp_eG-5-1x9-rD7Z85p7zoQHjwTmKlv2wYD3OL51GjjZKTPkeW7MX-akf659XHbfAbUm2tC0pOx0yLUNRU/s320/Rocket1.png"
width="300px" height="300px"></marquee>
</div>
</body>
</html>
No comments:
Post a Comment