How To – jQuery Parallax

So, How do you create parallax effects easily and without much hassle? The answer to that question is paroller.js.. See Above.

 

Download the file.

You will need to download the jQuery library from this GitHub link https://github.com/tgomilar/paroller.js/

Add the file to your project.

Once it has been downloaded go into the /Dist/ folder of the extracted file and grab the “jquery.paroller.js“.. Add it to your working directory for your website/page..

Once that is done, import it into your html in your <head> tags such as

<script type="text/javascript" src="/js/jquery.paroller.js"></script>

Run the function on a element on the document.

Now we have the code on our website, now we need to actually run the code.

as an example we will have a <div> that is centred onto the middle of the page, we will then put a parallax effect onto it.

<center><div class="mytest" style="background:red">Testing Object</div></center>

<script type="text/javascript">
    
  $(document).ready(function(){

    $(".mytest").paroller({ factor: '-0.3', type: 'foreground', direction: 'vertical' });

  })
    
</script>

See a working example here..

 

 

Testing Object


 

 

Leave a Reply

Your email address will not be published. Required fields are marked *