Parallax

Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling. Check out the demo to get a better idea of it.

                                    
                                        <div class="parallax-container">
                                            <div class="parallax"><img src="images/parallax1.jpg"></div>
                                        </div>
                                    
                                

Initialization

                                    
                                          var elem = document.querySelector('.parallax');
                                          var instance = M.Parallax.init(elem, options);

                                          // Or with jQuery

                                          $(document).ready(function(){
                                            $('.parallax').parallax();
                                          });
                                    
                                

Options

Methods

Because jQuery is no longer a dependency, all the methods are called on the plugin instance. You can get the plugin instance like this:

                                    
                                          var instance = M.Parallax.getInstance(elem);

                                          /* jQuery Method Calls
                                            You can still use the old jQuery plugin method calls.
                                            But you won't be able to access instance properties.

                                            $('.parallax').parallax('methodName');
                                            $('.parallax').parallax('methodName', paramName);
                                          */
                                    
                                

.destroy();

Destroy plugin instance and teardown

                                    
                                        instance.destroy();
                                    
                                

Properties

Parallax Customization

The parallax container height is what defines how much of the image can be seen. This is set to a default of 500px. You can add your own style to override this.

                                    
                                        .parallax-container {
                                            height: "your height here";
                                        }