nckprsn / scrollme

A jQuery plugin for adding simple scrolling effects to web pages.
1.47k stars 319 forks source link

Doesn't work with jquery 3.4.1 #67

Open solyum opened 3 years ago

solyum commented 3 years ago

I need to used old jquery version (j2.1.1) to make it work

carlosnpz commented 3 years ago

I think this plugin was abandoned. What a pitty, it was so great...

portavoznet commented 10 months ago

I've fixed the code so that it works with the latest versions of jQuery.

`// ---------------------------------------------------------------------------------------------------- // ScrollMe // A jQuery plugin for adding simple scrolling effects to web pages // http://scrollme.nckprsn.com // ---------------------------------------------------------------------------------------------------- var scrollme = ( function( $ ) { // ---------------------------------------------------------------------------------------------------- // ScrollMe object var _this = {}; // ---------------------------------------------------------------------------------------------------- // Properties

_this.document = $( document );
_this.window = $( window );

_this.body_height = 0;

_this.viewport_height = 0;

_this.viewport_top = 0;
_this.viewport_bottom = 0;

_this.viewport_top_previous = -1;

_this.elements = [];
_this.elements_in_view = [];

_this.property_defaults =
{
    'opacity' : 1,
    'translatex' : 0,
    'translatey' : 0,
    'translatez' : 0,
    'rotatex' : 0,
    'rotatey' : 0,
    'rotatez' : 0,
    'scale' : 1,
    'scalex' : 1,
    'scaley' : 1,
    'scalez' : 1
};

_this.scrollme_selector = '.scrollme';
_this.animateme_selector = '.animateme';

_this.update_interval = 10;

// Easing functions

_this.easing_functions =
{
    'linear' : function( x )
    {
        return x;
    },

    'easeout' : function( x )
    {
        return x * x * x;
    },

    'easein' : function( x )
    {
        x = 1 - x;
        return 1 - ( x * x * x );
    },

    'easeinout' : function( x )
    {
        if( x < 0.5 )
        {
            return ( 4 * x * x * x );
        }
        else
        {
            x = 1 - x;
            return 1 - ( 4 * x * x * x ) ;
        }
    }
};

// Document events to bind initialisation to

_this.init_events =
[
    'ready',
    'page:load', // Turbolinks
    'page:change' // Turbolinks
];

// ----------------------------------------------------------------------------------------------------
// Initialisation conditions

_this.init_if = function() { return true; }

// ----------------------------------------------------------------------------------------------------
// Initialisation

_this.init = function()
{
    // Cancel if initialisation conditions not met

    if( !_this.init_if() ) return false;

    // Load all elements to animate

    _this.init_elements();

    // Get element & viewport sizes

    _this.on_resize();

    // Recalculate heights & positions on resize and rotate

    _this.window.on( 'resize orientationchange' , function(){ _this.on_resize(); } );

    // Recalculate heights & positions when page is fully loaded + a bit just in case

    _this.window.on('load', function(){ setTimeout( function(){ _this.on_resize(); } , 100 ) });

    // Start animating

    setInterval( _this.update , _this.update_interval );

    return true;
}

// ----------------------------------------------------------------------------------------------------
// Get list and pre-load animated elements

_this.init_elements = function()
{
    // For each reference element

    $( _this.scrollme_selector ).each( function()
    {
        var element = {};

        element.element = $( this );

        var effects = [];

        // For each animated element

        $( this ).find( _this.animateme_selector ).addBack( _this.animateme_selector ).each( function()
        {
            // Get effect details

            var effect = {};

            effect.element = $( this );

            effect.when = effect.element.data( 'when' );
            effect.from = effect.element.data( 'from' );
            effect.to = effect.element.data( 'to' );

            if( effect.element.is( '[data-crop]' ) )
            {
                effect.crop = effect.element.data( 'crop' );
            }
            else
            {
                effect.crop = true;
            }

            if( effect.element.is( '[data-easing]' ) )
            {
                effect.easing = _this.easing_functions[ effect.element.data( 'easing' ) ]
            }
            else
            {
                effect.easing = _this.easing_functions[ 'easeout' ];
            }

            // Get animated properties

            var properties = {};

            if( effect.element.is( '[data-opacity]' ) )    properties.opacity    = effect.element.data( 'opacity' );
            if( effect.element.is( '[data-translatex]' ) ) properties.translatex = effect.element.data( 'translatex' );
            if( effect.element.is( '[data-translatey]' ) ) properties.translatey = effect.element.data( 'translatey' );
            if( effect.element.is( '[data-translatez]' ) ) properties.translatez = effect.element.data( 'translatez' );
            if( effect.element.is( '[data-rotatex]' ) )    properties.rotatex    = effect.element.data( 'rotatex' );
            if( effect.element.is( '[data-rotatey]' ) )    properties.rotatey    = effect.element.data( 'rotatey' );
            if( effect.element.is( '[data-rotatez]' ) )    properties.rotatez    = effect.element.data( 'rotatez' );
            if( effect.element.is( '[data-scale]' ) )      properties.scale      = effect.element.data( 'scale' );
            if( effect.element.is( '[data-scalex]' ) )     properties.scalex     = effect.element.data( 'scalex' );
            if( effect.element.is( '[data-scaley]' ) )     properties.scaley     = effect.element.data( 'scaley' );
            if( effect.element.is( '[data-scalez]' ) )     properties.scalez     = effect.element.data( 'scalez' );

            effect.properties = properties;

            effects.push( effect );
        });

        element.effects = effects;

        _this.elements.push( element );
    });
}

// ----------------------------------------------------------------------------------------------------
// Update elements

_this.update = function()
{
    window.requestAnimationFrame( function()
    {
        _this.update_viewport_position();

        if( _this.viewport_top_previous != _this.viewport_top )
        {
            _this.update_elements_in_view();
            _this.animate();
        }

        _this.viewport_top_previous = _this.viewport_top;
    });
}

// ----------------------------------------------------------------------------------------------------
// Animate stuff

_this.animate = function()
{
    // For each element in viewport

    var elements_in_view_length = _this.elements_in_view.length;

    for( var i=0 ; i<elements_in_view_length ; i++ )
    {
        var element = _this.elements_in_view[i];

        // For each effect

        var effects_length = element.effects.length;

        for( var e=0 ; e<effects_length ; e++ )
        {
            var effect = element.effects[e];

            // Get effect animation boundaries

            switch( effect.when )
            {
                case 'view' : // Maintained for backwards compatibility
                case 'span' :
                    var start = element.top - _this.viewport_height;
                    var end = element.bottom;
                    break;

                case 'exit' :
                    var start = element.bottom - _this.viewport_height;
                    var end = element.bottom;
                    break;

                default :
                    var start = element.top - _this.viewport_height;
                    var end = element.top;
                    break;
            }

            // Crop boundaries

            if( effect.crop )
            {
                if( start < 0 ) start = 0;
                if( end > ( _this.body_height - _this.viewport_height ) ) end = _this.body_height - _this.viewport_height;
            }

            // Get scroll position of reference selector

            var scroll = ( _this.viewport_top - start ) / ( end - start );

            // Get relative scroll position for effect

            var from = effect[ 'from' ];
            var to = effect[ 'to' ];

            var length = to - from;

            var scroll_relative = ( scroll - from ) / length;

            // Apply easing

            var scroll_eased = effect.easing( scroll_relative );

            // Get new value for each property

            var opacity    = _this.animate_value( scroll , scroll_eased , from , to , effect , 'opacity' );
            var translatey = _this.animate_value( scroll , scroll_eased , from , to , effect , 'translatey' );
            var translatex = _this.animate_value( scroll , scroll_eased , from , to , effect , 'translatex' );
            var translatez = _this.animate_value( scroll , scroll_eased , from , to , effect , 'translatez' );
            var rotatex    = _this.animate_value( scroll , scroll_eased , from , to , effect , 'rotatex' );
            var rotatey    = _this.animate_value( scroll , scroll_eased , from , to , effect , 'rotatey' );
            var rotatez    = _this.animate_value( scroll , scroll_eased , from , to , effect , 'rotatez' );
            var scale      = _this.animate_value( scroll , scroll_eased , from , to , effect , 'scale' );
            var scalex     = _this.animate_value( scroll , scroll_eased , from , to , effect , 'scalex' );
            var scaley     = _this.animate_value( scroll , scroll_eased , from , to , effect , 'scaley' );
            var scalez     = _this.animate_value( scroll , scroll_eased , from , to , effect , 'scalez' );

            // Override scale values

            if( 'scale' in effect.properties )
            {
                scalex = scale;
                scaley = scale;
                scalez = scale;
            }

            // Update properties

            effect.element.css(
            {
                'opacity' : opacity,
                'transform' : 'translate3d( '+translatex+'px , '+translatey+'px , '+translatez+'px ) rotateX( '+rotatex+'deg ) rotateY( '+rotatey+'deg ) rotateZ( '+rotatez+'deg ) scale3d( '+scalex+' , '+scaley+' , '+scalez+' )'
            } );
        }
    }
}

// ----------------------------------------------------------------------------------------------------
// Calculate property values

_this.animate_value = function( scroll , scroll_eased , from , to , effect , property )
{
    var value_default = _this.property_defaults[ property ];

    // Return default value if property is not animated

    if( !( property in effect.properties ) ) return value_default;

    var value_target = effect.properties[ property ];

    var forwards = ( to > from ) ? true : false;

    // Return boundary value if outside effect boundaries

    if( scroll < from && forwards ) { return value_default; }
    if( scroll > to && forwards ) { return value_target; }

    if( scroll > from && !forwards ) { return value_default; }
    if( scroll < to && !forwards ) { return value_target; }

    // Calculate new property value

    var new_value = value_default + ( scroll_eased * ( value_target - value_default ) );

    // Round as required

    switch( property )
    {
        case 'opacity'    : new_value = new_value.toFixed(2); break;
        case 'translatex' : new_value = new_value.toFixed(0); break;
        case 'translatey' : new_value = new_value.toFixed(0); break;
        case 'translatez' : new_value = new_value.toFixed(0); break;
        case 'rotatex'    : new_value = new_value.toFixed(1); break;
        case 'rotatey'    : new_value = new_value.toFixed(1); break;
        case 'rotatez'    : new_value = new_value.toFixed(1); break;
        case 'scale'      : new_value = new_value.toFixed(3); break;
        default : break;
    }

    // Done

    return new_value;
}

// ----------------------------------------------------------------------------------------------------
// Update viewport position

_this.update_viewport_position = function()
{
    _this.viewport_top = _this.window.scrollTop();
    _this.viewport_bottom = _this.viewport_top + _this.viewport_height;
}

// ----------------------------------------------------------------------------------------------------
// Update list of elements in view

_this.update_elements_in_view = function()
{
    _this.elements_in_view = [];

    var elements_length = _this.elements.length;

    for( var i=0 ; i<elements_length ; i++ )
    {
        if ( ( _this.elements[i].top < _this.viewport_bottom ) && ( _this.elements[i].bottom > _this.viewport_top ) )
        {
            _this.elements_in_view.push( _this.elements[i] );
        }
    }
}

// ----------------------------------------------------------------------------------------------------
// Stuff to do on resize

_this.on_resize = function()
{
    // Update viewport/element data

    _this.update_viewport();
    _this.update_element_heights();

    // Update display

    _this.update_viewport_position();
    _this.update_elements_in_view();
    _this.animate();
}

// ----------------------------------------------------------------------------------------------------
// Update viewport parameters

_this.update_viewport = function()
{
    _this.body_height = _this.document.height();
    _this.viewport_height = _this.window.height();
}

// ----------------------------------------------------------------------------------------------------
// Update height of animated elements

_this.update_element_heights = function()
{
    var elements_length = _this.elements.length;

    for( var i=0 ; i<elements_length ; i++ )
    {
        var element_height = _this.elements[i].element.outerHeight();
        var position = _this.elements[i].element.offset();

        _this.elements[i].height = element_height;
        _this.elements[i].top = position.top;
        _this.elements[i].bottom = position.top + element_height;
    }
}

// ----------------------------------------------------------------------------------------------------
// Bind initialisation

_this.document.on( _this.init_events.join( ' ' ) , function(){ _this.init(); } );

// ----------------------------------------------------------------------------------------------------

return _this;

// ----------------------------------------------------------------------------------------------------

})( jQuery );

scrollme.init();`