nckprsn / scrollme

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

How to Reload ScrollMe and Data-Attrs? #45

Open luispuig opened 7 years ago

luispuig commented 7 years ago

Hi,

I can't find the way to change de data-attrs with JS and after reaload scrollme.

Any idea?

Thanks

mrodriguezr commented 7 years ago

Hi @luispuig, to reload the settings you can use scrollme.init()

luispuig commented 7 years ago

It works great. I was testing it on a wrong way. Thanks!

luispuig commented 7 years ago

I found the problem. What I wanted is on onload:

obj = $j('.someElement'); obj.addClass('animateme'); obj.addClass('scrollme'); obj.data('when','enter'); obj.data('from',0.75); obj.data('to',0); obj.data('opacity','0'); obj.data('translatex',400);

scrollme.init();

The problem is that properties are not catched. The solution is changing this:

            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' );

for this: var properties = {};

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

Thanks

luispuig commented 7 years ago

Can anybody to help to do a pull request?

Naransim commented 4 years ago

Hello, I know this is an old question, but I tried with scrollme.init() and it didn't worked form me. I have some animated elements after a sliding object, every time I show the sliding object and colapse it again, the animated elements doesn't work like when the page was first loaded. I tried clearing the style attribute of those elements when the sliding object slides up or down and it worked.