<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Parallax</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<head>
<title>Parallax Scrolling Page</title>
<link href="https://fonts.googleapis.com/css?family=Love+Ya+Like+A+Sister"rel="stylesheet">
<script src="https://ajax.googleapis.com/libs/jquery/3.2.1/jquery.min.js"> </script>
</head>
<body>
<h1>FREEDOM</h1>
<div class="content1"</div>
<div class="content2">
<h1 class="hidden"> FREEDOM </h1>
</div>
<div class="content3">
<h1> Freedom </h1>
</div>
</body>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/-_-Nina-_-/parallax-BJopRX */
body {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1437301/mohamed-nohassi-229698.jpg");
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
min-height: 800px;
font-family: 'Love Ya Like A Sister', cursive;
}
h1 {
margin-top: 15%;
text-align: center;
font-size: 200px;
color: #ffffff;
text-shadow: 1px 1px #000000;
}
.content1 {
background-color: #FFFF8E;
height: 900px;
}
.content2 {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1437301/mohamed-nohassi-229698.jpg");
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
min-height: 800px;
}
.hidden {
visibility: hidden;
}
.content3 {
background-color: #FFFF8E;
height: 900x;
}
/*Downloaded from https://www.codeseek.co/-_-Nina-_-/parallax-BJopRX */
$(document).ready(function() {
$(window).scroll (function() {
$("h1").animate({
opacity: 0.5}, "10000");
$(".content1").css({
'background-color' : 'pink', 'opacity' : '0.5'
});
$(".content2").css({
'background-image' : 'url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1437301/mohamed-nohassi-229698.jpg")'
});
$(".hidden").css({
'visibility' : 'visible'
});
$(".content3").css({
'background-color' : 'lightblue', 'opacity' : '0.5'
});
$("h1").click(function(){
$("h1").hide();
});
});
});