|
|
@@ -1,63 +1,107 @@
|
|
|
-(function($) {
|
|
|
- $.fn.smoove = function(options) {
|
|
|
- options = $.extend({
|
|
|
- offset: 50,
|
|
|
- left: false,
|
|
|
- right: false,
|
|
|
- top: false,
|
|
|
- bottom: false,
|
|
|
- opacity: 0,
|
|
|
- transition: "margin 0.3s ease-in, opacity 0.7s ease-in"
|
|
|
- }, options);
|
|
|
-
|
|
|
+/*! jQuery Smoove v0.2 | (c) 2014 Adam Bouqdib | abemedia.co.uk/license */
|
|
|
+(function ($){
|
|
|
+
|
|
|
+ $.fn.smoove = function (options){
|
|
|
+ var settings = $.extend({}, $.fn.smoove.defaults, options);
|
|
|
+ settings.items = $(this);
|
|
|
if($('body').width() == $(window).width()) $('body').css('overflow-x','hidden');
|
|
|
-
|
|
|
- var $items = $(this);
|
|
|
- function smooveIt() {
|
|
|
- $items.each(function() {
|
|
|
- params = $.extend(options, $(this).data());
|
|
|
- $(this).css({
|
|
|
- WebkitTransition : params.transition,
|
|
|
- MozTransition : params.transition,
|
|
|
- MsTransition : params.transition,
|
|
|
- OTransition : params.transition,
|
|
|
- transition : params.transition
|
|
|
- });
|
|
|
- itemtop = $(window).scrollTop() + $(window).height() - $(this).offset().top;
|
|
|
-
|
|
|
- if(itemtop < params.offset - params.top) {
|
|
|
- $(this).css({
|
|
|
- opacity: params.opacity,
|
|
|
- position: 'relative'
|
|
|
+ $(window).on('scroll resize', function() { $.fn.smoove.init(settings) });
|
|
|
+ $.fn.smoove.init(settings);
|
|
|
+ };
|
|
|
+
|
|
|
+ $.fn.smoove.defaults = {
|
|
|
+ offset: 50,
|
|
|
+ move: false,
|
|
|
+ moveX: false,
|
|
|
+ moveY: false,
|
|
|
+ moveZ: false,
|
|
|
+ rotate: false,
|
|
|
+ rotateX: false,
|
|
|
+ rotateY: false,
|
|
|
+ scale: false,
|
|
|
+ opacity: 0,
|
|
|
+ transition: "all 1s ease, opacity 1.5s ease",
|
|
|
+ transformStyle: 'preserve-3d',
|
|
|
+ transformOrigin: false,
|
|
|
+ perspective: 1000
|
|
|
+ };
|
|
|
+
|
|
|
+ $.fn.smoove.init = function (settings){
|
|
|
+ settings.items.each(function() {
|
|
|
+ $item = $(this);
|
|
|
+ params = $.extend({}, settings, $item.data());
|
|
|
+
|
|
|
+ $item.css({
|
|
|
+ WebkitTransition : params.transition.replace('transform','-webkit-transform'),
|
|
|
+ MozTransition : params.transition.replace('transform','-moz-transform'),
|
|
|
+ OTransition : params.transition.replace('transform','-o-transform'),
|
|
|
+ transition : params.transition
|
|
|
+ });
|
|
|
+ if(!$item.data('offsettop')) $item.data('offsettop', $item.offset().top);
|
|
|
+ itemtop = $(window).scrollTop() + $(window).height() - $item.data('offsettop');
|
|
|
+
|
|
|
+ if(itemtop < params.offset) {
|
|
|
+ if(params.opacity !== false) $item.css({opacity: params.opacity});
|
|
|
+ var transforms = [];
|
|
|
+ if(params.move) transforms['translate'] = params.move;
|
|
|
+ if(params.moveX) transforms['translateX'] = params.moveX;
|
|
|
+ if(params.moveY) transforms['translateY'] = params.moveY;
|
|
|
+ if(params.moveZ) transforms['translateZ'] = params.moveZ;
|
|
|
+ if(params.rotate) transforms['rotate'] = params.rotate + 'deg';
|
|
|
+ if(params.rotateX) transforms['rotateX'] = params.rotateX + 'deg';
|
|
|
+ if(params.rotateY) transforms['rotateY'] = params.rotateY + 'deg';
|
|
|
+ if(params.scale !== false) transforms['scale'] = params.scale;
|
|
|
+ transform = '';
|
|
|
+ for(i in transforms) {
|
|
|
+ transform += i + '(' + transforms[i] + ') ';
|
|
|
+ }
|
|
|
+
|
|
|
+ if(params.moveZ || params.rotateX || params.rotateY){
|
|
|
+ $item.parent().css({
|
|
|
+ WebkitPerspective : params.perspective,
|
|
|
+ MozTransformPerspective : params.perspective,
|
|
|
+ MsTransformPerspective : params.perspective,
|
|
|
+ OTransformPerspective : params.perspective,
|
|
|
+ transformPerspective : params.perspective
|
|
|
+ /*,
|
|
|
+ WebkitTransformStyle : params.transformstyle,
|
|
|
+ MozTransformStyle : params.transformstyle,
|
|
|
+ MsTransformStyle : params.transformstyle,
|
|
|
+ OTransformStyle : params.transformstyle,
|
|
|
+ transformStyle : params.transformstyle
|
|
|
+ */
|
|
|
});
|
|
|
- if(params.top) {
|
|
|
- $(this).css('margin-top', params.top);
|
|
|
- $(this).css('margin-bottom', -params.top);
|
|
|
- }
|
|
|
- else if(params.bottom) {
|
|
|
- $(this).css('margin-bottom', params.bottom);
|
|
|
- $(this).css('margin-top', -params.bottom);
|
|
|
- }
|
|
|
- if(params.left) {
|
|
|
- $(this).css('margin-left', params.left);
|
|
|
- $(this).css('margin-right', -params.left);
|
|
|
- }
|
|
|
- else if(params.right) {
|
|
|
- $(this).css('margin-right', params.right);
|
|
|
- $(this).css('margin-left', -params.right);
|
|
|
- }
|
|
|
}
|
|
|
- else {
|
|
|
- $(this).css({
|
|
|
- opacity : 1,
|
|
|
- margin: '',
|
|
|
- position: ''
|
|
|
+ if(transform) {
|
|
|
+ $item.css({
|
|
|
+ WebkitTransform : transform,
|
|
|
+ MozTransform : transform,
|
|
|
+ MsTransform : transform,
|
|
|
+ OTransform : transform,
|
|
|
+ transform : transform
|
|
|
});
|
|
|
}
|
|
|
- });
|
|
|
- }
|
|
|
- $(window).scroll(function() { smooveIt(); });
|
|
|
- $(window).resize(function() { smooveIt(); });
|
|
|
- smooveIt();
|
|
|
- }
|
|
|
-})(jQuery);
|
|
|
+ if(params.transformOrigin) {
|
|
|
+ $item.css({
|
|
|
+ WebkitTransformOrigin : params.transformOrigin,
|
|
|
+ MozTransformOrigin : params.transformOrigin,
|
|
|
+ MsTransformOrigin : params.transformOrigin,
|
|
|
+ OTransformOrigin : params.transformOrigin,
|
|
|
+ transformOrigin : params.transformOrigin
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ $item.css({
|
|
|
+ opacity : 1,
|
|
|
+ WebkitTransform : '',
|
|
|
+ MozTransform : '',
|
|
|
+ MsTransform : '',
|
|
|
+ OTransform : '',
|
|
|
+ transform : '',
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+}( jQuery ));
|
Adam Bouqdib