jQuery Slim Parallax

Step 1: Add jquery, slimparallax and your script file to your html (footer is the best place to put scripts. Just before the closing body tag).

                            
    <script src="js/jquery.js"></script>
    <script src="js/slimparallax.js"></script>
    <script src="js/script.js"></script>
                            
                        

Step 2: Create a simple structure. Give content parent a class (slim-prx in that case) and put contents inside the wrapper.

                            
    <div class="slim-prx slim-prx-one">
        <div class="container">
            content
        </div>
    </div>
                            
                        

Note 1: You can add different speed for different parallax. To do that put data-slim-prx-speed="20" . Acceptable value is between 2 and 40. The lesser the value faster the parallax image moves. Setting data value is optional. Default value is 20.

                            
    <div class="slim-prx slim-prx-one" data-slim-prx-speed="10">
        <div class="container">
            content
        </div>
    </div>
                            
                        

Step 3: Add css to the section where you want to set the background-image. For a better result you can specify its height.

                                

    .slim-prx{                            
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
    }
    
    .slim-prx-one{
        background-image: url("../img/bg-one.jpg");
    }

    .slim-prx-one{
        background-image: url("../img/bg-two.jpg");
    }
                                
                            

Step 4: Add the script in your script.js file and you are good to go :) . You can setup global speed here. Though it will be overriden if section has data speed attribute. See Note 1 for details.

                                
    $('.slim-prx').slim_parallax({
        speed: 10
    });    
                                
                            

This is the minimum script you need to use parallax.

                                
    $('.slim-prx').slim_parallax();