I am currently working on a parallax website where the sliders are designed to slide from the left and align within the viewport as the user scrolls. However, I have encountered an issue where multiple scroll actions are required for the slide to align properly. Is there a way to adjust this so that the alignment occurs with just one scroll?
Here is a sneak peek at my work in progress. I am utilizing skrollr for my parallax designs ()
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}
Despite implementing some javascript, there seems to be an issue where the scrolling halts midway.
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>