I’m doing a parallax website wherein when the user scrolls the sliders will slide from the left and align within the viewport. The issue is that I have scroll the mousewheel many times in order for the slide to align. Is there a way to make the slide align within the viewport with just one scroll.
Here is my work in progress. I’m using skrollr(http://prinzhorn.github.io/skrollr/) for my parallax designs
http://creativekidsstudio.com/ck/
HTML
<section class="slide slide_1">
<div class="slide_content" >
<h2>You see a blank canvas,<br/> we see potential</h2>
<img src="<?php bloginfo('template_url'); ?>/images/canvas.png" alt="Canvas" />
</div>
</section>
<section data-0="transform:translateX(100%); " data-1500="transform:translateX(0%) " class="slide slide_2">
<div class="slide_content" >
<h2>You see a brush,<br/> we see a dream</h2>
<img src="<?php bloginfo('template_url'); ?>/images/brush.png" alt="brush" />
</div>
</section>
<section data-1500="transform:translateX(100%); " data-2500="transform:translateX(0%)" class="slide slide_3">
<div class="slide_content" >
<h2>You see a ball of clay,<br/> we see a world of creativity</h2>
<img src="<?php bloginfo('template_url'); ?>/images/clay.png" alt="clay" />
</div>
</section>
<section data-2500="transform:translateX(100%); " data-3500="transform:translateX(0%)" class="slide slide_4">
<div class="slide_content">
<h1>Every child is a creative kid.</h1>
<img src="<?php bloginfo('template_url'); ?>/images/kid.png" alt="kid" />
</div>
</section>
CSS
.slide{width:100%; height:100%; position:fixed}
.slide_1{background-image:url('images/patternfinal1.jpg'); z-index:1}
.slide_2{background-image:url('images/patternfinal2.jpg'); z-index:2}
.slide_3{background-image:url('images/patternfinal3.jpg'); z-index:3}
.slide_4{background-image:url('images/patternfinal4.jpg'); z-index:4}
.creative_content{ z-index: 10; position: relative; background-color: white; padding:20px 0; top:5%}
.slide_content{
text-align:center;
height:100%;
position:absolute;
top:15%;
margin:0 auto;
left:0;
right:0;
z-index:1;
font-family: 'anarchisticno_leaders..', sans-serif;
font-size:70px;
color:#333
}
.slide_1 img,
.slide_2 ing,
.slide_3 img,
.slide_4 img{display:block; margin:0 auto}
Here is the javascript that i have implemented but the problem is it seems to stop midway when i scroll.
JAVASCRIPT
<script>
var tempScrollTop = 0;
var currentScrollTop = 0;
var scrollHeight = $(window).height();
var newHeight = 0;
function scrollIt() {
$(window).off('scroll', scrollIt);
currentScrollTop = $(window).scrollTop();
if (tempScrollTop < currentScrollTop) {
newHeight = newHeight + scrollHeight;
$('html').animate({scrollTop: newHeight}, 500, function(){
var setScroll = setTimeout(function(){
console.log('Animation Complete');
tempScrollTop = $(window).scrollTop();
$(window).on('scroll', scrollIt);
}, 10);
});
} else if (tempScrollTop > currentScrollTop){
newHeight = newHeight - scrollHeight;
$('html').animate({scrollTop: newHeight}, 500, function(){
var setScroll = setTimeout(function(){
console.log('Animation Complete');
tempScrollTop = $(window).scrollTop();
$(window).on('scroll', scrollIt);
}, 10);
});
}
}
$(window).on('scroll', scrollIt);
</script>