Reference for collab project

main CSS


.parallax-window {
min-height: 500px;
background: transparent;
}

.overlay {
min-height:500px;
padding:50px;
}

.black-bg {
background: rgba(0,0,0,0.45);
color:#ffffff;

}

.white-bg {
background: rgba(255,255,255,0.45);
color:#000;

}
.container {
width: 900px;
margin: 0px auto;

}
.clearfix {
clear:both;

}

.image-width {
width:100%

}

index


<!doctype html>
<html>
<head>
<title>Demo</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>

<div class="parallax-window" data-parallax="scroll" data-image-src="images/background-two.jpg">

</div>

<div class="parallax-window" data-parallax="scroll" data-image-src="images/background-four.jpg">

<div class="overlay black-bg">

<div class="container">
<h1>Title</h1>
<p>This is my page...</p>

</div>
</div>

</div>

<div class="parallax-window" data-parallax="scroll" data-image-src="images/background-one.jpg">

</div>

<div class="parallax-window" data-parallax="scroll" data-image-src="images/background-three.jpg">
</div>



<script src="scripts/jquery-1.9.1.min.js"></script>
<script src="scripts/parallax.js"></script>
<script src="scripts/scripts.js"></script>
</body>
</html>

scripts


$(document).ready(function() {
$("#theImage").hide();
$(document).scroll(function(e) {
var scrollPosition=$("body").scrollTop();
console.log(scrollPosition);

if(scrollPosition>250){

$("#theImage").fadeIn();

}


if(scrollPosition<250){

$("#theImage").fadeOut();
}
});
});

Advertisements