<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>ParallaxEffect</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<html>
<head>
<title>
</title>
<link href='https://fonts.googleapis.com/css?family=Bree Serif' rel='stylesheet' type='text/css'>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"> </script>
<h3>Parallax is awesome!</h3>
<div class="fixed-bg">
<div class="superman"></div>
</div>
<div class="scroll-block">
<p>This div is only here to enable scrolling.</p>
<p>First, we use CSS to set up the fixed background image. Then, we'll add jQuery to create animations when the user scrolls.</p>
</div>
</body>
</html>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/-_-Nina-_-/parallaxeffect-KZwyqm */
body {
font-family: 'Bree Serif';
}
.fixed-bg {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1437301/buildings_bg.jpg");
min-height: 800px; /*1469px;*/
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.superman {
height: 256px;
width: 100%;
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1437301/superman.png");
background-position: center;
background-repeat: no-repeat;
position: absolute;
top: 80%;
margin-top: -80px;
}
.scroll-block {
height: 900px;
background-color: lightgreen;
padding: 5px;
}
/*Downloaded from https://www.codeseek.co/-_-Nina-_-/parallaxeffect-KZwyqm */
window.onload = function() {
alert("Welcome");
};
$(document).ready(function() {
$(window).scroll(function(){
$(".superman").animate({
top: "+=-50", left: "+=-25"}, "10000")
});
});
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
Google Font API
jQuery
v2.2.2
