1

So I've been trying to create somekind of 1 page layout website with parallax scrolling and smooth animation navigation.

So far, the smooth animation is working fine but the problem comes in when creating the parallax scrolling for background images. Absolutely nothing happens when scrolling.

Here's all my script info from html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
<script src="js/jquery.stellar.min.js"></script>
<script>$.stellar();</script>
<script>
$(document).ready(function() {
$('a[href*=#]').each(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname
&& this.hash.replace(/#/,'') ) {
  var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
  var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
   if ($target) {
     var targetOffset = $target.offset().top;
     $(this).click(function() {
        $("#nav li a").removeClass("active");
        $(this).addClass('active');
       $('html, body').animate({scrollTop: targetOffset}, 1000);
       return false;
     });
    }
    }
});

});
</script>

And when trying to apply into an element:

<div id="slide1" data-stellar-background-ratio="0.5">
</div>

And finally the css:

#slide1{
background:url('../img/kansi.jpg') 50% 0 no-repeat;
background-attachment: fixed;
height: 600px;
margin: 0;
padding: 200px 0 260px 0;
background-size: cover;
}

Help gladly appreciated! :)

EDIT: Reproduced in JSFiddle with gradients to simulate pictures. https://jsfiddle.net/sL1uszex/2/

H. Juho
  • 37
  • 5

0 Answers0