Parallax effect

Developer
Kartikeya Gupta
Size
2,849 Kb
Views
18,216
  1. Parallax effect Previews
  2. Parallax effect HTML Codes
  3. Parallax effect CSS Codes

How do I make an parallax effect?

What is a parallax effect? How do you make a parallax effect? This script and codes were developed by Kartikeya Gupta on 22 November 2022, Tuesday.

Parallax effect Previews
IQ Test

Parallax effect - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Parallax effect</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body>	<nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png" alt="Dispute Bills"> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Work</a></li> <li><a href="#">Contact Us</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <div class='row_1 row'> <div class="col-md-6"> <div class="data1"> <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque ipsa fugiat alias autem asperiores maiores dolores magni labore, quisquam ea ipsum, voluptatum, placeat vitae unde tenetur repellat modi molestias, commodi.</h2> <div> <button class='btn btn-primary'>Know More</button><button class='btn btn-success'>How we work</button> </div> </div> </div> </div> <div class='row_2 row'> <div class="col-md-6 col-md-offset-3"> <div class="data2"> <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque ipsa fugiat alias autem asperiores maiores dolores magni labore, quisquam ea ipsum, voluptatum, placeat vitae unde tenetur repellat modi molestias, commodi.</h2> <div> <button class='btn btn-danger' >Know More</button> </div> </div> </div> </div>
<footer><h5>Design and Coded by <a href="https://www.facebook.com/kartikeya100" target=_blank>Kartikeya Gupta</a></h5></footer>
</body> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
</body>
</html>

Parallax effect - Script Codes CSS Codes

html,body{ height: 100%;
}
/*NAVBAR*/
.navbar{ margin-bottom: 0px; padding-top: 30px;
}
.navbar-default { background: transparent; border-color: transparent; box-shadow: 0 0 0 0; margin-top: 0px; border-radius: 0px;
}
.navbar-default .navbar-brand { color: #f0f0f0; text-transform: uppercase; text-shadow:0 0 0 0; padding: 0px;
}
.navbar-brand>img { height: 100%; width:120px;
}
.navbar-default .navbar-nav > li > a { background: #f0f0f0; border-radius: 20px; color: black; font-size: 18px; text-transform: uppercase; margin-right: 10px; margin-left: 10px; transition:background .35s linear 0s;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus { background: #B1B1B1; text-shadow:0 0 0 0;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus { color: #ff8d00; background: black;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus { color: #ff8d00; background: black;
}
.navbar-default .navbar-toggle { border-color: #5d5f84;
}
.navbar-default .navbar-toggle .icon-bar { background: #1E96CF;
}
.navbar-default .navbar-link { color: #fff200;
}
.navbar-default .navbar-link:hover { color: #ff8d00;
}
.row{ padding: 0; margin: 0;
}
h2{ color: #F4F5F5
}
.row_1{ position: relative; height: 100%; background-image: url(http://i.imgsafe.org/dfc901a8ad.jpg); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
}
.data1{ position:fixed; margin: 0; padding: 0; margin-top: 200px; text-align: center;
}
.data2{ margin: 0; padding: 0; margin-top: 200px; text-align: center;
}
.btn{ margin: 5px;
}
.row_2{ position: relative; height: 100%; background-image: url(http://i.imgsafe.org/dfd2a92897.jpg); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
}
footer{ text-align: center; background: black; color: #f6f6f6; padding: 3px;
}
@media (max-width: 767px) { .navbar-default { height: 30px; opacity: 1;
}
.navbar-default .navbar-nav > li > a { top: 0; border-radius: 0px; background: #f0f0f0; text-transform: uppercase; margin: 0;
}
.navbar{ margin-bottom: 0px; padding-top: 0px;
}
.data{ margin-top: 170px; text-align: center;
}
h2{ font-size: 18px;
}
}
}
Parallax effect - Script Codes
Parallax effect - Script Codes
Home Page Home
Developer Kartikeya Gupta
Username kartikeya100
Uploaded November 22, 2022
Rating 3
Size 2,849 Kb
Views 18,216
Do you need developer help for Parallax effect?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kartikeya Gupta (kartikeya100) Script Codes
Name
Javascript Calculator
Twitch TV
Random Quote Generator Machine
Pomodoro clock
Tic Tac Toe
Tribute Page
My Portfolio
Wikipedia Viewer
Weather Application
Portfolio 2
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!