[![Build Status](https://img.shields.io/travis/markdalgleish/stellar.js/master.svg?style=flat)](http://travis-ci.org/markdalgleish/stellar.js) [![Gitter](https://img.shields.io/badge/gitter-join%20chat-45cba1.svg?style=flat)](https://gitter.im/markdalgleish/stellar.js)
# Stellar.js
> **PLEASE NOTE:** This project is no longer maintained. If parallax scrolling is something you care about, please [apply to become a contributor to this project](https://github.com/markdalgleish/stellar.js/issues/116#issuecomment-76816489).
### Parallax scrolling made easy
Full guide and demonstrations available at the [official Stellar.js project page](http://markdalgleish.com/projects/stellar.js/).
## Download
Get the [development](https://raw.github.com/markdalgleish/stellar.js/master/jquery.stellar.js) or [production](https://raw.github.com/markdalgleish/stellar.js/master/jquery.stellar.min.js) version, or use a [package manager](https://github.com/markdalgleish/stellar.js#package-managers).
## Getting Started
Stellar.js is a jQuery plugin that provides parallax scrolling effects to any scrolling element. The first step is to run `.stellar()` against the element:
``` js
// For example:
$(window).stellar();
// or:
$('#main').stellar();
```
If you're running Stellar.js on 'window', you can use the shorthand:
``` js
$.stellar();
```
This will look for any parallax backgrounds or elements within the specified element and reposition them when the element scrolls.
## Mobile Support
Support in Mobile WebKit browsers requires a touch scrolling library, and a slightly tweaked configuration. For a full walkthrough on how to implement this correctly, read my blog post ["Mobile Parallax with Stellar.js"](http://markdalgleish.com/2012/10/mobile-parallax-with-stellar-js).
Please note that parallax backgrounds are not recommended in Mobile WebKit due to performance constraints. Instead, use parallax elements with static backgrounds.
## Parallax Elements
If you want elements to scroll at a different speed, add the following attribute to any element with a CSS position of absolute, relative or fixed:
``` html
<div data-stellar-ratio="2">
```
The ratio is relative to the natural scroll speed, so a ratio of 0.5 would cause the element to scroll at half-speed, a ratio of 1 would have no effect, and a ratio of 2 would cause the element to scroll at twice the speed. If a ratio lower than 1 is causing the element to appear jittery, try setting its CSS position to fixed.
In order for Stellar.js to perform its calculations correctly, all parallax elements must have their dimensions specified in pixels for the axis/axes being used for parallax effects. For example, all parallax elements for a vertical site must have a pixel height specified. If your design prohibits the use of pixels, try using the ['responsive' option](#configuring-everything).
## Parallax Backgrounds
If you want an element's background image to reposition on scroll, simply add the following attribute:
``` html
<div data-stellar-background-ratio="0.5">
```
As with parallax elements, the ratio is relative to the natural scroll speed. For ratios lower than 1, to avoid jittery scroll performance, set the element's CSS 'background-attachment' to fixed.
## Configuring Offsets
Stellar.js' most powerful feature is the way it aligns elements.
All elements will return to their original positioning when their offset parent meets the edge of the screen—plus or minus your own optional offset. This allows you to create intricate parallax patterns very easily.
Confused? [See how offsets are used on the Stellar.js home page.](http://markdalgleish.com/projects/stellar.js/#show-offsets)
To modify the offsets for all elements at once, pass in the options:
``` js
$.stellar({
horizontalOffset: 40,
verticalOffset: 150
});
```
You can also modify the offsets on a per-element basis using the following data attributes:
``` html
<div data-stellar-ratio="2"
data-stellar-horizontal-offset="40"
data-stellar-vertical-offset="150">
```
## Configuring Offset Parents
By default, offsets are relative to the element's offset parent. This mirrors the way an absolutely positioned element behaves when nested inside an element with a relative position.
As with regular CSS, the closest parent element with a position of relative or absolute is the offset parent.
To override this and force the offset parent to be another element higher up the DOM, use the following data attribute:
``` html
<div data-stellar-offset-parent="true">
```
The offset parent can also have its own offsets:
``` html
<div data-stellar-offset-parent="true"
data-stellar-horizontal-offset="40"
data-stellar-vertical-offset="150">
```
Similar to CSS, the rules take precedence from element, to offset parent, to JavaScript options.
Confused? [See how offset parents are used on the Stellar.js home page.](http://markdalgleish.com/projects/stellar.js/#show-offset-parents)
Still confused? [See what it looks like with its default offset parents.](http://markdalgleish.com/projects/stellar.js/#show-offset-parents-default) Notice how the alignment happens on a per-letter basis? That's because each letter's containing div is its default offset parent.
By specifying the h2 element as the offset parent, we can ensure that the alignment of all the stars in a heading is based on the h2 and not the div further down the DOM tree.
## Configuring Scroll Positioning
You can define what it means for an element to 'scroll'. Whether it's the element's scroll position that's changing, its margins or its CSS3 'transform' position, you can define it using the 'scrollProperty' option:
``` js
$('#gallery').stellar({
scrollProperty: 'transform'
});
```
This option is what allows you to run [Stellar.js on iOS](http://markdalgleish.com/projects/stellar.js/demos/ios.html).
You can even define how the elements are repositioned, whether it's through standard top and left properties or using CSS3 transforms:
``` js
$('#gallery').stellar({
positionProperty: 'transform'
});
```
Don't have the level of control you need? Write a plugin!
Otherwise, you're ready to get started!
## Configuring Everything
Below you will find a complete list of options and matching default values:
``` js
$.stellar({
// Set scrolling to be in either one or both directions
horizontalScrolling: true,
verticalScrolling: true,
// Set the global alignment offsets
horizontalOffset: 0,
verticalOffset: 0,
// Refreshes parallax content on window load and resize
responsive: false,
// Select which property is used to calculate scroll.
// Choose 'scroll', 'position', 'margin' or 'transform',
// or write your own 'scrollProperty' plugin.
scrollProperty: 'scroll',
// Select which property is used to position elements.
// Choose between 'position' or 'transform',
// or write your own 'positionProperty' plugin.
positionProperty: 'position',
// Enable or disable the two types of parallax
parallaxBackgrounds: true,
parallaxElements: true,
// Hide parallax elements that move outside the viewport
hideDistantElements: true,
// Customise how elements are shown and hidden
hideElement: function($elem) { $elem.hide(); },
showElement: function($elem) { $elem.show(); }
});
```
## Writing a Scroll Property Plugin
Out of the box, Stellar.js supports the following scroll properties:
'scroll', 'position', 'margin' and 'transform'.
If your method for creating a scrolling interface isn't covered by one of these, you can write your own. For example, if 'margin' didn't exist yet you could write it like so:
``` js
$.stellar.scrollProperty.margin = {
getLeft: function($element) {
return parseInt($element.css('margin-left'), 10) * -1;
},
getTop: function($element) {
return parseInt($element.css('margin-top'), 10) * -1;
}
}
```
Now, you can specify this scroll property in Stellar.js' configuration.
``` js
$.stellar({
scrollProperty: 'm
没有合适的资源?快使用搜索试试~ 我知道了~
橙色服务公司html5模板里面包含13个子页面,适合服务公司企业网站html5整站模板 .rar
共584个文件
svg:207个
js:130个
jpg:72个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 178 浏览量
2023-02-19
17:11:51
上传
评论
收藏 7MB RAR 举报
温馨提示
橙色服务公司html5模板里面包含13个子页面,适合服务公司企业网站html5整站模板。.rar
资源推荐
资源详情
资源评论
收起资源包目录
橙色服务公司html5模板里面包含13个子页面,适合服务公司企业网站html5整站模板 .rar (584个子文件)
bootstrap.css 130KB
style.css 113KB
all-skins.css 99KB
animate.css 70KB
theme.css 60KB
playful.css 36KB
font-awesome.css 34KB
functional.css 34KB
minimalist.css 31KB
header.css 30KB
font-awesome.min.css 28KB
style.css 25KB
ie7.css 20KB
slider-pro.css 15KB
slider-pro.css 15KB
site.css 14KB
bootstrap-select.css 14KB
slider-pro.min.css 12KB
switcher.css 11KB
simple-line-icons.css 11KB
responsive.css 7KB
magnific-popup.css 7KB
magnific-popup.css 7KB
owl.theme.css 6KB
bootstrap-select.min.css 6KB
index.css 5KB
simple.css 5KB
color.css 5KB
color2.css 5KB
color3.css 5KB
color5.css 5KB
color4.css 5KB
qunit.css 5KB
qunit.css 4KB
jquery.bxslider.css 4KB
parallax.css 4KB
jquery.bxslider.min.css 3KB
demo.css 2KB
yamm.css 2KB
master.css 2KB
flaticon.css 1018B
jquery.stellar.css 737B
color1.css 20B
closedhand.cur 326B
openhand.cur 326B
closedhand.cur 326B
openhand.cur 326B
fontawesome-webfont.eot 75KB
ElegantIcons.eot 58KB
Stroke-Gap-Icons.eot 45KB
Simple-Line-Icons.eot 35KB
Flaticon.eot 5KB
fpicons.eot 3KB
bx_loader.gif 8KB
AjaxLoader.gif 1KB
blank.gif 43B
blank.gif 43B
demo.html 116KB
index.html 94KB
home-2.html 65KB
typography.html 62KB
home.html 58KB
headers.html 53KB
index.html 51KB
services.html 44KB
about.html 40KB
blog-post.html 36KB
blog-main.html 35KB
privacy-policy.html 34KB
terms-of-use.html 27KB
contact.html 25KB
examples.html 22KB
404.html 19KB
flaticon.html 18KB
build-tool.html 8KB
index.html 7KB
index.html 6KB
jquery.stellar.html 6KB
signup.html 3KB
default.html 2KB
logo.html 2KB
analytics.html 2KB
test-ajax.html 970B
test-ajax-2.html 868B
index.html 853B
wordpress.html 407B
bg-2.jpg 426KB
02_home-2.jpg 341KB
01_home-1.jpg 302KB
4.jpg 226KB
04_services.jpg 192KB
bg-1.jpg 189KB
2.jpg 186KB
bg-1.jpg 183KB
03_about.jpg 158KB
3.jpg 120KB
05_blog.jpg 103KB
1.jpg 95KB
1.jpg 85KB
1.jpg 81KB
共 584 条
- 1
- 2
- 3
- 4
- 5
- 6
资源评论
reg183
- 粉丝: 1814
- 资源: 1万+
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功