article:
Elements Design: Vector Logo Elements
article:
Elements Design: Bookshelf

JS Plugin: skrollr - parallax scrolling for the masses

Advertisement

"Skrollr - parallax scrolling for the masses."

"Stand-alone Parallax* scrolling lib with zero dependencies (seriously, you don't need jQuery) in just over 7.3k minified (3.4k gzipped).

Designer friendly. No JavaScript skills needed. Just plain CSS."


Plugin: skrollr


Usage

HTML
We are using the HTML5 data attributes to attach key frames to DOM elements. The numbers represent the key frame position (the top scroll offset in pixel). The highest key frame found in the document will be used to set the the max top scroll offset.

<div data-0="padding:0px;" data-1000="padding:300px;">WOOOT</div>
or
<div data-0="padding:0px;color:hsl(0,50%,50%);" data-1000="padding:300px;color:hsl(360,50%,50%);">WOOOT</div>
or

And you can specify easing functions for each property using square brackets. That is an extension to the default CSS syntax.
<div data-0="padding[bounce]:0px;color[cubic]:hsl(0,50%,50%);" data-1000="padding:300px;color:hsl(360,50%,50%);">WOOOT</div>
or

skrollr automatically sets the prefixed properties for you. You not just don't have to use prefixed properties, it's even wrong to do so. The following will rotate an element in every browser that supports transform, no matter if they call it "-moz-transform" or "-webkit-transform".

<div data-0="transform:rotate(0deg);" data-1000="transform:rotate(180deg);">Look ma, I'm rotating!</div>

CSS
"
skrollr will add a skrollr class to the HTML element when calling init and will remove a no-skrollr class if present. This allows fallback CSS rules to create a good user experience on unsupported devices or when JavaScript or skrollr are disabled.

All elements under skrollr's control (elements with appropriate data-attributes) will get the skrollable class.

In addition we add the rendered or unrendered class, depending on whether an element is currently being styled by skrollr, that means the current scroll offset is in between the key frames of that element, or not.
"

Plugin: skrollr


Using anchors

There are two modes for key frames, namely absolute and relative move.

Absolute mode is what you already know about. The key frames are in absolute values, so how much the document has been scrolled down.

The syntax is data-[offset]-[anchor], where offset can be any integer (0 is default) and anchor can be either start (default) or end. Either offset or anchor can be ommited in some situations.

Examples of key frames and their meaning:
  • data-0 = data-start = data-0-start: When the scroll top is 0.
  • data-100 = data-100-start: When the scroll top is 100.
  • data--100 = data--100-start: When the scroll top is -100 (sounds like nonsense, but keep in mind that interpolation will be relative to this point).
  • data-end = data-0-end: When offset is 0, but counting from the bottom of the document instead of from the top. In short: when you reach the bottom of the page.
  • data-100-end: 100px before we reach the bottom.
  • data--100-end: 100px after we reach the bottom (again, it's up to you whether you need it).

Relative mode is something which has not been mentioned yet, even though it's very powerful. Instead of defining key frames relative to the document, we are able to define them depending on the position of any element in relation to the viewport.

The syntax is data-[offset]-(viewport-anchor)-[element-anchor], where offset can again be any integer and defaults to 0. Both viewport-anchor (mandatory) and element-anchor (optional) can be one of top, center or bottom. If element-anchor is ommitted, the value of viewport-anchor will be taken (just like with background-position).

Examples of key frames and their meaning:
  • data-top = data-0-top = data-top-top = data-0-top-top: When the element's top is aligned with the top of the viewport.
  • data-100-top = data-100-top-top: When the element's top is 100px above the top of the viewport.
  • data--100-top = data--100-top-top: When the element's top is 100px below the top of the viewport.
  • data-top-bottom= data-0-top-bottom: When the bottom of the element is at the top of the viewport (it's just not visible).
  • data-center-center = data-0-center-center: When the element is at the center of the viewport.
  • data-bottom-center = data-0-bottom-center: When the element's center is at the bottom of the viewport, thuss the upper half of the element is visible.

Plugin: skrollr


Using constants

The syntax for absolute mode is not data-[offset]-[anchor] and for relative mode it's not data-[offset]-(viewport-anchor)-[element-anchor]. In both cases offset can be preceeded by a constant which can be passed to the ├Čnit method. The name of the constant needs to be preceeded with an underscore.

Example:

skrollr.init({
    constants: {
        foobar: 1337
    }
});
or
<div data-_foobar="left:0%;" data-_foobar--100="left:50%;" data-_foobar-100="left:100%;"></div>
<!--Equal to-->
<div data-1337="left:0%;" data-1237="left:50%;" data-1437="left:100%;"></div>

Limitations

  • All numeric values have to have the same unit. It's not possible to animate from 0% to 100px. skrollr won't complain, but results are .
  • Animations between values which are composed of multiple numeric values like margin:0 0 0 0; are only possible for the same number of values. margin:0px 0px 0px 0px; to margin:0px 100px 50px 3px; is fine, but not margin:10px; to margin:5px 10px;.
  • Animations between CSS transforms only work when they use the same functions in same order. From rotate(0deg) scale(1) to rotate(1000deg) scale(5) is fine.
  • Color animations don't support named values like "red" or hex values like "#ff0000". Instead, you have to use rgb(), rgba(), hsl() and hsla. Don't worry, there's a skrollr plugin for IE < 9 to support hsl() (without "a"!) and to fall rgba back to rgb.
  • Color animations only work for same color functions. hsl() to hsl() or hsla() is fine, but not rgb() to hsl(). Which makes sense, because animating from the same colors in rgb space and in hsl space results in different animations (hsl gives you the nice rainbow stuff).

JavaScript

All there is to do is to call skrollr.init([options]);. Subsequent calls to init() will just return the same skrollr instance again.

Example:
skrollr.init({
    easing: {
        //This easing will sure drive you crazy
        wtf: Math.random,
        inverted: function(p) {
            return 1 - p;
        }
    }
});


Examples skrollr

- The "main" example
- Demonstrating different anchors
- Demonstrating data-anchor-target
- Drawing a SVG path
- Creating a fixed nav
- Snapping
- Snapping with nav and deep linking
- Using two custom easing functions to create a circular motion
- Parallax background with constant speed
- gradientsmotherfucker



source
github
download

Advertisement
Tags: plugin, ajax, jquery, parallax, html, css3, js, javascript, develop, layout, internet, website, dynamic

Leave a Comment

No Comment

© Creative3x Ltd.