I learned using parallax scrolling from http://keithclark.co.uk/articles/pure-css-parallax-websites/ I tried using Scrollify jQuery plugin for snapping to sections. Both of them working great for me. But when I try combine these two effects, it is not working. I want to have the parallax effect when i scroll through couple of transparent background sections. Can someone please help me achieve this? Thanks in advance...
<div class="parallax">
<div class="parallax_layer parallax_layer--back">
</div>
<div class="parallax_layer parallax_layer--base">
<section class="section"></section>
<section class="section"></section>
<section class="section"></section>
</div>
In the above code, I want to include the scrollify effect inside parallax_layer--base div, so that the background scrolls slower and foreground pages snaps to sections while scrolling. (the parallax* class attributes are defined in the link mentioned above.)
$(function(){
$(".scroller").css({"height":$(window).height()});
$.scrollify({
section:".scroller",
scrollbars:false,
});
}); .parallax {
perspective-origin-x: 100%;
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax_layer {
transform-origin-x: 100%;
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
}
.parallax_layer--base {
position: absolute;
top: 0; left: 0;
transform: translateZ(0);
height: 500vh;
width: 90%;
margin: 0 auto;
background: rgba(255, 255, 255, 0.2);
color: white;
}
.parallax_layer--back {
background-image: url("path/to/image.jpg");
background-position: center;
width: 100%;
transform: translateZ(-10px) scale(11);
}
section{
width: 100%;
height: 100vh;
}
.one { background: yellow; }
.two { background: red; }
.three { background: green; }
.four { background: black; }
.five{ background: blue; }<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.4/jquery.scrollify.min.js"></script>
</head>
<body>
<div class="parallax">
<div class="parallax_layer parallax_layer--back">
</div>
<div class="parallax_layer parallax_layer--base">
<section class="scroller one"></section>
<section class="scroller two"></section>
<section class="scroller three"></section>
<section class="scroller four"></section>
<section class="scroller five"></section>
</div>
</div>
</body>
</html>