![]() ![]() Because we’ll use the data-stellar-background-ratio attributes on the last three divs, we’ll also add background-attachment: fixed in the CSS.Parallax scrolling is a stunning scroll effect that makes an element scroll at a different speed than the page scroll. In our demo we’ll use three images that are repeated two times each. With this HTML in place, we need to write some CSS to define the background images used. In the following code we’ll create six divs that contain some text: In this section we’ll develop a demo that use the Stellar.js plugin and some of the options we’ve discussed in the previous section. Now that you know what this plugin does and how you can configure it, it’s time to see it in action again. If you want to use this attribute with values lower than 1, the documentation suggests to set background-attachment: fixed in the style of the element. ![]() For example data-stellar-background-ratio="0.5" means change the speed to a value which is half the natural scroll speed. The latter accepts a positive number as its value and allows you to change the speed of the effect on the element it is applied to. The only per-element option I want to cover, because it’s used often, is data-stellar-background-ratio. If you don’t want such behavior you have to set this option to false. The default value of this property is true and specify that you want to hide parallax elements that move outside the viewport. The last general option I want to discuss is hideDistantElements. It’s used to specify if the parallax content must be refreshed when the load and the resize event are fired on the window object. ![]() Their default value is true.Īnother interesting option is responsive. To do that you can adjust the two Boolean properties horizontalScrolling and verticalScrolling. The classic scroll effect is from the top to bottom and vice versa, but you can also specify a left to right effect and vice versa, or even both. The first general options you can define is to decide the direction you want the effect to be allowed. In this section I won’t cover all of the options available, so if you’re curious to investigate further, you can read this specific section of the repository. The general configuration you want to set must be passed to the stellar() method when you invoke it, while the options on a per-element basis are set through the use of some data-* attributes. Stellar.js allows you to define general options, which are options used for every element, and per-element options. ![]() In fact, it allows you to set several parameters and tweak how the plugin works to fit your needs. Stellar.js, like many other plugins out there, has a certain degree of flexibility. If you want an example of a page that uses Stellar.js to create a parallax scrolling effect you can take a look at this one. To do that you have to select the element using jQuery’s constructor and then invoke the stellar() method on it.Ī minimal example that employs this library upon the window object is shown below: $('#someElement').stellar() įor the window object, the library also provides a nice shorthand, shown below: $.stellar() Īt this point the library will search for any parallax backgrounds or elements within the specified element and reposition them when the element scrolls. This plugin allows you to apply the effect to any scrolling element, for example the window object or any other element you may have. Once you have downloaded it, you have to include Stellar.js in your page using the usual script element after you have included jQuery as shown below: Īfter completing this step you’re all set up to adopt a parallax scrolling effect in your pages. If you want to employ Bower, you have to type the command: bower install jquery.stellar You can obtain Stellar.js by visiting its GitHub repository or through Bower. The first step is to download the plugin and include it in your page. Getting started with Stellar.js is very easy. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |