jquery.scroolly

当前版本: 0.0.3


jquery.scroolly是什么?

Scroolly是一个方便的jQuery插件,它极大地简化了滚动效果脚本编写。
Scroolly is a handy jQuery plugin that simplifies greatly scroll-effects scripting.

许可协议

MIT

关键词

scroolly , scroll , scroll-effect , parallax , sticky , jquery

安装方式

npm install jquery.scroolly@0.0.3

相关网址


jquery.scroolly使用说明

jQuery.Scroolly, what is it?

Scroolly is a handy jQuery plugin that simplifies greatly scroll-effects scripting.

Scroll-effects are some scripted scenarios that are attuned to web-page scrolling position or direction.

In Scroolly environment scrolling scenario is defined by set of rules that are applied to some DOM elements.

Scroolly tracks viewport scrolling position and direction and applies rules that match some criteria.

So what Scroolly scripting looks like? Here:

$('#element').scroolly([
    rule1,
    rule2,
    rule3
]);

Rules - are main building bricks of scroll effects. Each rule is a javascript object that consists of some conditions and actions.

Lets look at a simple sample:

$('#element').scroolly([{
    from: 'doc-top',
    to: 'doc-bottom',
    css: {
        color: 'red'
    }
}]);

This very rule means that when viewport is between top document border and bottom document border (and it’s always true so you can omit ‘from’ and ‘to’) the #element gets the defined css styling.

When conditions are met the actions are taken.

There is thorough documentation in Wiki. But before you go there, review the «Sticky» Scenario just to catch a grasp of what jQuery.Scroolly is about.

«Sticky» Scenario

Let's study typical scrolling scenario - «Sticky».

We have some «body» container (#container) that goes right after «header» and before «footer».

This «body» is headed with «search form» (#element) that we want to stick to viewport top border whenever viewport reaches it. We have pretty big footer, bigger than viewport height. So at some point viewport leaves «body» and we might want to unstick «search form» to leave it behind within «body».

jQuery.Scroolly Container Scenario

Lets see how it is made using jQuery.Scrolly. Lets say «Search form» (#element) is the first DOM child of «body» (#container). Our CSS will be:

#container{
    position: relative;
    padding-top: 100px;
}

#element{
    position: absolute;
}

Below is appropriate JS code. The reference to the container is supplied as the second param after the rules array:

$('#element').scroolly([
{
    to: 'con-top'
    css:{
        top:'0',
        bottom: '',
        position: 'absolute'
    }
},
{
    from: 'con-top',
    to: 'con-bottom - 100el = vp-top',
    css:{
        top: '0',
        bottom: '',
        position: 'fixed'

    }
},
{   
    from: 'con-bottom - 100el = vp-top',
    css:{
        top: '',
        bottom: '0',
        position: 'absolute'
    }
}
], $('#container'));

Interested?

Welcome to the Wiki :)

项目热度

项目信息

分享到

基本信息
开发语言
HTML
相关项目
0
相关仓库
0
Watchers
13
Stars
152
Forks
35
版本数量
2
最新发布
2016-02-01
首次发布
2016-02-01
仓库大小
21.9 MB

版本历史
0.0.3
2016-02-01
0.0.2
2016-02-01

贡献者
Boris Mossounov master waitxd Ivan Cherkasov