Looking to implement a parallax effect where the page scrolls to the next block on each mousewheel rotation.
I attempted to achieve this using the code below but it didn't work as expected. Can someone offer any suggestions?
Check out the live JSFiddle demo, (I've also included the mousewheel plugin)
$(document).ready(function() {
$('section').css({
'height': (($(window).height())) + 'px'
});
// Now bind the event to the desired element
$('section').bind('mousewheel', function(e) {
if (e.wheelDelta / 120 > 0) {
$(this).text('scrolling up !');
} else {
$(this).text('scrolling down !');
}
});
});
$(window).resize(function() { // On resize
$('section').css({
'height': (($(window).height())) + 'px'
});
});.container-fluid {
padding: 0;
}
section {
float: left;
width: 100%;
position: relative;
}
.screenOne {
background-color: rgba(0, 0, 0, 0.7);
}
.screenTwo {
background-color: rgba(0, 0, 0, 0.6);
}
.screenThree {
background-color: rgba(0, 0, 0, 0.4);
}
.screenFour {
background-color: rgba(0, 0, 0, 0.3);
}
.screenFive {
background-color: rgba(0, 0, 0, 0.2);
}
.screenSix {
background-color: rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #ff0000;
margin: 25% 0 0 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<section class="screenOne">
<h1>One</h1>
</section>
<section class="screenTwo">
<h1>Two</h1>
</section>
<section class="screenThree">
<h1>Three</h1>
</section>
<section class="screenFour">
<h1>Four</h1>
</section>
<section class="screenFive">
<h1>Five</h1>
</section>
<section class="screenSix">
<h1>Six</h1>
</section>
</div>