javascript - Can't get stellar.js working -


so i've been trying create somekind of 1 page layout website parallax scrolling , smooth animation navigation.

so far, smooth animation working fine problem comes in when creating parallax scrolling background images. absolutely nothing happens when scrolling.

here's script info 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 apply element:

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

and 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 gradients simulate pictures. https://jsfiddle.net/sl1uszex/2/


Comments

Popular posts from this blog

ruby - Trying to change last to "x"s to 23 -

jquery - Clone last and append item to closest class -

c - Unrecognised emulation mode: elf_i386 on MinGW32 -