Stellar Parallax Plugin __jquery

Stellar Parallax Plugin

Parallax scrolling refers to the process of Web page scrolling, the multi-level elements in different degrees of movement, the visual formation of three-dimensional movement effect of the Web page display technology. The main core is the foreground and background to move at different speeds, thus creating a 3D effect. Implemented using the Background-attachment property. Stellar.js is a jquery plugin that makes it easy to add parallax scrolling to your site. The following is an introduction to the simple use of stellar:

1. Introduction of JS Package

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

2. Referencing HTML and CSS styles

<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 </p>
</div>
<div class= "content" id= "content6" data-stellar-background-ratio= "0.5" >
    <p>text here</p>
</div> 
//css Style set content background, etc.

3.js Call Function

$.stellar ({
    horizontalscrolling:false,
    responsive:true
});

4. Detailed Parameters

name	Description
Horizontalscrolling and Verticalscrolling	This configuration item is used to set the direction of the parallax effect. Horizontalscrolling sets the horizontal direction, Verticalscro sets the vertical direction, is a Boolean value, and the default is True
Responsive	This configuration item is used to set whether the page is refreshed when the load or resize time is triggered, the value is a Boolean value, and the default is False
Hidedistantelements	The configuration item is used to set whether the element that is moving out of sight is hidden, whose value is a Boolean value, and set to False if you do not want to hide it
data-stellar-ratio= "2"	Defines the rate at which this element scrolls for the page, for example, 0.5 50%,2 for page scrolling is 200% of the page scroll, so the larger the number, the faster the page elements can scroll.
Data-stellar-background-ratio	The configuration item is used in a single element, and its value is a positive number, which is used to change the impact speed of the element being set. For example, a value of 0.3 indicates that the background has a scrolling speed of 0.3 times times the normal scrolling speed. If the value is decimal, it is best to set it in the style sheet

5. Examples

<! DOCTYPE html>  
Official website http://markdalgleish.com/projects/stellar.js/

code and related documents see GitHub homepage parallax scrolling effect-stellar Plugin

Https://github.com/Jianxq12/ITcast/tree/master/H5C3