/jquery.transe.js

Transformable scroll elements! (with mobile support)

Primary LanguageJavaScript

#Something about You like animations, scroll-events and css transforms? Awesome, me too! But the thing is, that a fancy thing is not necessarily the same as a fancy thing. So I wrote this plugin to make everything fancy! But see for yourself:

#Usage (wiki) It's quite simple!

Standard Prozedure: include the jQuery-lib and jQuery.transe.js:

<script src="jquery.js"></script>
<script src="jquery.transe.js"></script>

<!--
You can optional include the TweenMax library
(or TweenLite with its CSS-Plugin)
<script src="TweenMax.js"></script>
-->

Initialize Transe on the element you wish to transform. You must at least set a start- and end-offset, the css-property as well as the from- and to-values.

$('.elem').transe({
    start: 0,
    end: 1000,
    css: 'transform',
    from: 'rotate(0deg)',
    to: 'rotate(180deg)'
});

If you've a lot elements to Transe, it's even possible (and recommended) to wrap an array around your objects:

$.transe([
    document.body, {
        start: 0,
        end: 500,
        css: 'backgroundColor',
        from: 'rgb(255, 255, 255)',
        to: 'rgb(0, 0, 0)'
    },
    '.elem', {
        start: 0,
        end: 500,
        css: 'left',
        from: 0,
        to: 100
    }
]);

#Examples Take a look at https://github.com/yckart/jQuery.transe.js/tree/master/examples.

#Options There're lot of options you can set.

  • container The container where you're scrolling in. (default: window)

    • Possibles
      • Each element which is in your DOM

  • direction Which direction you're scrolling. (default: 'y')

    • Possibles
      • y // vertical
      • x // horizontal

  • start The position where the transformation starts (default 0)

    • Possibles
      • All numbers between 0 and Infinity

  • end The position where the transformation ends (default 0)

    • Possibles
      • All numbers between 0 and Infinity

  • css The property to transform (default: '')

    • Possibles
      • You can actually use ANY css2 / css3-property that expects a number as value. Here's an overview

  • from The initial value of your property (default: '')

    • Possibles
      • You can use almost any value which you can use with jQuer.fn.css too.

  • to The end value of your property (default: '')

    • Possibles
      • You can use almost any value which you can use with jQuer.fn.css too.

  • tween You like smooth animations? Me too! You can use the TweenLite library and their possibilities.

    • use Enables the power of TweenLite (default: false)
    • speed The animation duration duration (default: 1)
    • easing The easing method for your animations (default: '')

  • easing The easing method applies for your total scroll transform (default: 'linear')

    • Possibles
      • 'linear'
      • 'swing'
      • ...and all methods you write or make possible via the easing plugin.

  • offsetter The property which is used to do your transformation (default: scroll)

    • Possibles
      • 'scroll'
      • 'position'
      • 'margin'
      • 'transform'
      • New: any integer, so you can use the mousewheel delta

#Callbacks

  • isHidden Fire's a callback if the element is hidden
  • isVisible Same as above but if it is visible

#Public Methods

  • option Get and set options after instantiation
    • Get: $('.elem').transe('option') returns all options that have been applied to the element.
    • Get: $('.elem').transe('option', 'css') returns the applied css-property
    • Set: $('.elem').transe('option', 'scrollProperty', 'transform') sets the scrollProperty to transform
  • destroy Removes the Transe instance, returning target element to it's initial state

#Todo Add

  • Color support for rgba and hex
  • Make it possible to use units (px, %, em etc.)
  • Create a workaround to make 4-digit margin/padding strings possible

Fix

  • Fix the destroy method (doesn't work with multiple instances)

#Browser Support Transe works with all browsers that supports thes CSS-Property you use. If you've the need to support CSS3-features like transforms you can you libraries like:

#Credits

@yckart #transe

##Thanks

###License Copyright (c) 2012 Yannick Albert (http://yckart.com/)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.