ads_header

Home HTML CSS Create Parallax Effect HTML CSS VIEWS

Create Parallax Effect HTML CSS

October 04, 2018
Read
Create Parallax Effect HTML CSS


Preview



Hello friends, this time I will make a Parallax effect using 4 background pages. The Website Design Phenomenon with Parallax Scrolling is increasing in popularity on the Internet in 2015. Visitors enjoy the browsing experience on the new website. "Web developers and designers" are competing to decorate their website to attract visitors in various ways or parallax techniques.





Now, Create a project folder and enter it in the index.html and style.css files, then include 4 images in landscape mode. If it's ready, open index.html and enter the following code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Parallax City</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="box1">
        <h1>WATAMPONE</h1>
    </div>
    <div id="box2">
        <h1>NEW YORK</h1>
    </div>
    <div id="box3">
        <h1>PARIS</h1>
    </div>
    <div id="box4">
        <h1>AUSTRALIA</h1>
    </div>
</body>
</html>

Next, open style.css and enter the following code

body{
    margin: 0;
    padding: 0;
}    
#box1{
    height: 100vh;
    width: 100%;
    background-image: url(watampone.jpg);
    background-size: cover;
    display: table;
    background-attachment: fixed;
}
#box2{
    height: 100vh;
    width: 100%;
    background-image: url(newyork.jpg);
    background-size: cover;
    display: table;
    background-attachment: fixed;
}
#box3{
    height: 100vh;
    width: 100%;
    background-image: url(paris.jpg);
    background-size: cover;
    display: table;
    background-attachment: fixed;
}
#box4{
    height: 100vh;
    width: 100%;
    background-image: url(australia.jpg);
    background-size: cover;
    display: table;
    background-attachment: fixed;
}
h1{
    font-family: arial black;
    font-size: 50px;
    color:white;
    margin: 0px;
    text-shadow: 2px 2px #000;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

Save all files and run index.html
Tags :
Powered by Blogger.