jQuery: Transe v2
more at: https://github.com/yckart/jQuery.transe.js
by acturbo
HTML
<script src="http://www.greensock.com/js/src/TweenMax.min.js"></script>
<div class="page">Transe</div>
CSS
html, body {
height: 2000px
}
.page {
width: 100%;
height: 100%;
color: black;
font: 700 35px/100px sans-serif;
text-align: center
}
JavaScript
/*!
* jquery.transe.js 0.2 - https://github.com/yckart/jQuery.transe.js
* Transformable scroll elements!
*
* Inspired by John Polacek's Scrollorama
*
* Copyright (c) 2012 Yannick Albert (http://yckart.com)
* Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php).
* 2013/01/18
*/
;(function ($, TweenLite, window, undefined) {
"use strict";
var pluginName = 'transe',
defaults = {
from: 0,
to: 0,
css: '',
start: '',
end: '',
container: $(window),
direction: 'y',
tween: {
use: false,
speed: 1,
easing: ''
},
easing: 'linear',
offsetter: 'scroll',
isHidden: $.noop,
isVisible: $.noop
},
Helpers = {
getUnit: function(val) { return (/[0-9]+([^ ,\)]*)(,*)/).exec(val); },
getIdentifier: function(matrix){ return matrix.split('('); },
matrixToArray: function(matrix){ return matrix.match(/(-?[0-9]+)/g); }
},
scrollProperty = {
scroll: {
y: function($elem) { return $elem.scrollTop(); },
x: function($elem) { return $elem.scrollLeft(); }
},
position: {
y: function($elem) { return parseFloat($elem.css('top')) * -1; },
x: function($elem) { return parseFloat($elem.css('left')) * -1; }
},
margin: {
y: function($elem) { return parseFloat($elem.css('marginTop')) * -1; },
x: function($elem) { return parseFloat($elem.css('marginLeft')) * -1; }
},
transform: {
y: function($elem) { return ($elem.css('transform') !== 'none' ? parseFloat(Helpers.matrixToArray($elem.css('transform'))[5]) * -1 : 0); },
x: function($elem) { return ($elem.css('transform') !== 'none'...