Parallax Scrolling plugin Stellar.js

The design trends that have been hotly debated in recent years are visually poor scrolling effects. Whether you like it or not, many websites use it. In this tutorial, I'll introduce visual poor scrolling and use the jquery plugin stellar.js to create a visual difference scrolling effect.

What is parallax Scrolling (Parallax scrolling)?

Parallax scrolling is when the user scrolls the page, the foreground and background move at different speeds, creating a 3D effect. This effect can be a good addition to the site, but if abused, it will be very annoying. Some sites that are completely driven by this effect are not elegant. Because this effect usually uses a large image to do the background, the site resources increase greatly, resulting in very slow loading.

There are examples of such abuses, such as the website that introduces Kinvara Saukoni 3, and the size of 20MB (formerly 50MB!). ) of the Oakley–i AM invincible.

Now that we have a sense of the effect, let's look at how to use stellar.js to create it.

What is Stellar.js?

Stellar.js is a jquery plugin that makes it easy to add parallax scrolling effects to your website. Although maintenance has been discontinued, it is very stable, compatible with the latest version of jquery, and is used by many developers. This plugin is popular in the jquery plugin library, which you may have already heard about.

Now, let's see how to use it.

Stellar.js Getting Started

Stellar.js is easy to get started with. The first step is to download the plugin and link it to your page. Access to Stellar.js's GitHub repository via Bower. If you want to use bower, you can do this by using the following command:

install jquery.stellar 

After downloading, refer to the page:

<script src="path/to/jquery/jquery.min.js"></script> <script src="path/to/jquery.stellar.min.js"></script>

When you are finished, start adding a visual difference scrolling effect to the page. This plugin allows you to add effects to any scrolling element, such as window objects, or other elements. To use the jquery selector to select the desired element, bind the stellar() method.

For window objects, you can use the following method:

This allows the Stellar.js library to search for parallax backgrounds or elements when the elements are scrolled and reposition them.
Use Stellar.js on one page to create an example of a parallax scrolling effect.

Options

Stellar.js is as flexible as any other plug-in. Many parameters can be set to meet the requirements. Stellar.js allows you to define normal options, which are applied to each element. The normal configuration must be set through the stellar() method, and the corresponding element is set to the data-* property. I do not describe each of the configuration of the use, the specific can be seen here.

The first normal option is to set the direction of the effect. The classic scrolling effect is from top to bottom, or vice versa. You can also specify a left-to-right effect, or vice versa. Complete by horizontalScrolling setting verticalScrolling the bool value and. Its default value is true .

Another interesting option is responsive . It is used to load specify resize whether the page is refreshed or not when the event is triggered. The default is false .

Finally, let's explain the hideDistantElements options. Specifies whether to hide elements that move out of sight. If you don't want to hide it, set it to false .

The single element option is data-stellar-background-ratio more commonly used. The value of a positive integer can be changed to affect the speed at which it is applied to the element. For example, it data-stellar-background-ratio="0.5" means changing the speed to half of the natural scrolling speed. If you want this property value to be less than 1, it is recommended to set it in the style table background-attachment: fixed; .

Now you know this plugin, you can configure it, it's time to watch the game.

Demonstrate

Use the attributes described above to make an example. First, we need to set the tag. In the following code, you will create 6 containing some text div :

 <  div class= "content" id= "Content1";  <  p>  TEXT here</ p>  </ div>  <  div class= "content" id= "Content2";  <  p>  TEXT here</ p>  </ div>  <  div class= "content" id= "Content3" data-stellar-background-ratio= "0.5";  <  p>  TEXT here</ p>  </ Div>  <  div class= "content" id= "content4" data-stellar-background-ratio= "0.5";  <  P>  TEXT here</ p>  </ div>  <  div class= "content" id= "CONTENT5" data-stellar-background-ratio= "0.5";  <  p>  TEXT here</ p>  </ Div>  <  div class= "content" id= "content6" data-stellar-background-ratio= "0.5";  <  P>  TEXT here</ p>  </ div>  

Add some CSS: Three images will be used in the demo, each repeated two times. Because to add to the last Mulberry element data-stellar-background-ratioproperty, so you also set the background-attachment: fixed;。

Parallax Scrolling plugin Stellar.js