tgomilar/paroller.js

Parallax scrolling jQuery plugin

paroller.js's Issues

Great plugin! Thanks

Thank you very much for your work!

How to use without bootstrap

Hey !

I'm trying to put paroller on my html, but it doesn't work.
I was wondering if it's because I don't use the bootstrap grid ?
For now, I position my elements (in % ) out of the screen and I would like to make them enter horizontally when the user scrolls.
Do you have any idea of how I should proceed ?
Thanks in advance

Issues since update - 1.3.1

I ran NPM update to update the plugin to v1.3.1. This throws an error when I run npm start, see below:

[email protected] start /Users/mike/Documents/Design Work/Design work/Fort Productions/Website/build/templates
gulp
module.js:557
throw err;
^
Error: Cannot find module 'vinyl'
at Function.Module._resolveFilename (module.js:555:15)
at Function.Module._load (module.js:482:25)
at Module.require (module.js:604:17)
at require (internal/module.js:11:18)
at Object. (/usr/local/lib/node_modules/gulp/node_modules/gulp-util/index.js:2:9)
at Module._compile (module.js:660:30)
at Object.Module._extensions..js (module.js:671:10)
at Module.load (module.js:573:32)
at tryModuleLoad (module.js:513:12)
at Function.Module._load (module.js:505:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: gulp
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/mike/.npm/_logs/2018-03-07T21_07_47_992Z-debug.log`

I have a live version of the site running v1.0 of the plugin and that has no issues.

paroller.js not working good on first load of page

When I hard refresh the page in middle section, then paroller js transform: translateY(); css not working properly on div <div class="col col-6" data-paroller-factor="0.4" data-paroller-type="foreground" data-paroller-direction="vertical">, after that when i scroll this its working fine.. I want that this should be work fine on first hard refresh... when We wo simple refresh of page this also woke fine, but when we see middle of page then do hard refresh Ctrl+F5 transform: translateY(); css not working properly.

After hard refresh this incorrect css added: (On middle of the page, without scroll)
transform: translateY(318px);

After scroll: (Correct css apply):
transform: translateY(-16px);

Combining with Masonry (Isotope)

Hello. Excellent plugin 👍

I realise this may be more of an issue with http://masonry.desandro.com/, however when used in conjunction, paroller.js appears to calculate the starting background position as if the Masonry grid were not there. Therefore when placed below the Masonry grid the parallax affect is too early.

NPM & modules support?

It would be cool to have support for including via NPM & bundling with webpack. Please consider this enhancement :)

paroller install question

I've got paroller working on my site, but only if I set data-paroller-type="foreground". If dont set type (default) or set to "background" nothing happens. Any suggestions?

The property bckground-position is not processed correctly

If i open the page - everything works correctly.
Here is an example of the correct operation of the plugin:
https://farm5.staticflickr.com/4401/36438165715_f82a044cb1_o_d.gif

Note that the property is calculated correctly.

But, if the window was scrolled down, then updated - the properties of some elements are filled in incorrectly.
Here is an example.
https://farm5.staticflickr.com/4416/36301150511_e1c0958506_o_d.gif

Note that the property is calculated incorrectly:
https://image.prntscr.com/image/nFNjmrtaTtitr_RRl4gX7A.png

Default Setup not working?

Hey,

I have set up my div like this:

<div class="col-sm-12" id="some-div" data-paroller-factor="0.3" data-paroller-type="foreground" data-paroller-direction="horizontal">
        <div class="row">
            <div class="div-container col-sm-6">
                <img src="<?php echo plugins_url('module/images/'). 'placeholder.jpeg'; ?>" class="img-responsive" />
                <p>TAGLINE</p>
            </div>
        </div>

        <div class="row">
            <div class="div-container col-sm-6 col-sm-offset-6">
                <p>ANOTHER TAGLINE</p>
                <img src="<?php echo plugins_url('module/images/'). 'placeholder.jpeg'; ?>" class="img-resposnive" />
            </div>
        </div>

        <div class="row">
            <div class="div-container col-sm-6">
                <h3>YET ANOTHER TAGLINE</h3>
                <img src="<?php echo plugins_url('module/images/'). 'placeholder.jpeg'; ?>" class="img-responsive" />
            </div>
        </div>
    </div>

And my jQuery:

    //parallax scroll
    $('#some-div').paroller();

    $('.div-container').paroller({
        factor: 0.5,
        factorXs: 0.2,
        type: 'foreground',
        direction: 'horizontal'
    })

my console outputs:

TypeError: $(...).paroller is not a function

What am I doing wrong?

I've checked my element and can see the <script> for paroller before my main.js file for my module and well after jQuery include.

Followed steps on website for basic usage (will play with later .. when it works)

Disable on mobile?

Hi! Not really an issue but is there a way to destroy/dissable the function? Im thinking about disabling it on mobile.

Initialize Paroller on an element

Hi,
I want to use this plugin for a targeted element like this:
$(".my-element").paroller({ factor: '0.5', type: 'foreground', direction: 'horizontal' });
As long as i send options via jQuery options, i suppose it doesn't need any data-paroller-* attributes, but the parallax effect does not working when i remove all data-paroller-* attributes.

Destroy paroller

Hello! How can I destroy paroller? For example, on small devices I don't need it.

Stopping the transition from going negative

hello. This isn't an issue, sorry for posting here.. rather its a question..

Is there any way to stop the plugin once the element has reached its initial place?

I have two squares, initially starting off (without paroller), they are positioned exactly on top of each other (one is absolutely positioned on top of the other)

Now I've set a horizontal paroller direction on one of them, with a factor of 1.

What I want is to stop any more transition once it reaches its original position, so I want to stop translateX(0) and not let it go negative.

I hope that makes sense, thanks in advance and once again apologies for posting here. Is there a better place to post questions?

missing h1 tag after adding paroller.js

Hello, I added paroller to http://dev2.heliosipm.com/services/systems-and-data.html and im now experiencing an issue where my H1 tag is hidden unless i adjust the window size. This isn't a responsive or media query issue, once i drag the window back to original size the text displays, making it smaller or larger doesn't make it dissapear...its only on load that im required to change screensize in either direction before my h1 tag will display.

Smoother initialization

I don't really like how it looks when my page loads with Paroller for parallax background-containers.

Did I something wrong?

My CSS:

.parollerFrame {
    width: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    overflow: hidden;
    min-height: 400px;
}

My issue is that Paroller belongs with white-gaps in background in State 2, until the first scroll event accurs. (see text and image)

State 1: No Paroller (Good)
Your own HTML and CSS loads, all looks fine.

State 2: Paroller initialization (Ugly)
Paroller was executed and the positions of the backgrounds become really strange. And nothing changes, until State 3.

Stage 3: Paroller in Action (Nice)
Only after the first wheel-event, Paroller does his job fine and moves the images to the correct positions.

How could I solve this, so that the visitor doesn't see the parollerFrames staying in state 2?

---

New standalone fork

Hello.
I made an independent fork for my personal needs: https://github.com/ange007/paroller.js-modern

Since the code is heavily rewritten then the usual PR seems to me not appropriate.
If the work done is of interest, you can transfer the code here.

Changes from the original:

• AMD and CommonJS init support
• New plugin structure (class/prototype)
• Recalculation when resizing a window
• reinit and destroy functions
• Removed code duplication
• Other...

Is it possible to run the script without the data-paroller-factor attribute?

I need to set the parallax effect for the block (created in the page builder), in the settings of which it is not possible to add additional attributes.

Can I somehow make the script work using only the class?

Temperamental scroll position

Hello,

Firstly, thanks for an awesome library!

I've found a recurring issue which breaks the layout of a page. All I can guess is that the paroller elements are scrolling too early/late.

Sometimes when you load the page, the paroller elements scroll into the correct position, however, other times, they're completely wrong.

It's worth noting that the issue seems to be more severe on elements further down the page, and the higher elements are not affected as much.

See screenshots from the link above as an example:

Broken:

Working:

This seems to be the case even in the latest browsers, however, I've tested on all browsers, like Chrome 60 - 70, Edge, IE, Firefox and Safari.

I am hoping to find a solution and cause of the issue so I can both fix this and prevent it from happening again.

I would really appreciate some help on this and I am grateful for your time.

Thank you

Add a reverse option

Currently when you scroll down, the elements move up. Recently I need them to do the opposite on a recent project.

I can easily add this option in. Would a pull request containing this feature be welcome?

Remove jQuery requirement?

Any chance you'd consider a pure JS version of this?

question for creating a widget with paroller

Hi I try to create a widget with paroller for elementor and it works great in the frontend but it doesn't work in preview. It doesn't give me any error but there's no parallax effect. I guess the problem comes from their way to base it on $scope variable. My code is this one

( function( $ ) {
	var WidgetHelloWorldHandler = function( $scope, $ ) {
		
		$scope.find('.background-paroller').paroller({ factor: '-0.2'}); 
		
		
	};
	
	// Make sure you run this code under Elementor..
	$( window ).on( 'elementor/frontend/init', function() {
		elementorFrontend.hooks.addAction( 'frontend/element_ready/parallax.default', WidgetHelloWorldHandler );
	} );


	
} )( jQuery );

for

<div class="jumbotron background-paroller text-center bg-faded my-5"
             style="background: url(<?php  echo $image[url];  ?>) no-repeat center;"
             data-paroller-factor="-0.2">
            <h1 class="heading-1 py-5 text-white">Hello Parallax!</h1>
            <p class="text-white">data-paroller-factor="-0.2"</p>
        </div>
			

Do you have any idea of what can block this ?
Thanks

Plugin not working

NPM Support & mobile bug

Hey,
first thanks for the awesome plugin. It would be nice if the plugin supports npm. The other thing is, that the horizontal parallax isn't working on mobile.
Cheers.

Making paroller stop scrolling when reached an area

I'm trying to use this with a site, inside a div the text scrolls but keeps scrolling if you scroll past it, I would like to have it stop when the page reaches an area, and start again once the user scrolls back up.

So basically reach a Y position stop scrolling, then when scroll back up past the Y position to add the effect again.

Transform unset on page resize

I am using the latest version of Paroller.js and jQuery.
I have no errors in console.

Paroller starts off good on page load, but as soon as I resize the page, the object I have floating, jumps down into its lowest position off of the screen. It doesn't maintain the objects current position. So as soon as the window resizes, transform is set to "unset"... why is it doing this, it should be maintaining its current transform position.

As soon as I scroll, it jumps back up into position

HTML:

<img src="{{ asset('img/frontend/ipad.png') }}" width="1300px" class="fadeIn" data-wow-duration="1s" data-wow-delay="0.5s" class="mega my-element" data-paroller-factor="-0.2" data-paroller-factor-lg="-0.2" data-paroller-factor-md="-0.2" data-paroller-factor-sm="-0.2" data-paroller-factor-xs="-0.2" data-paroller-type="foreground" data-paroller-direction="vertical" style=" margin-left:-420px;   margin-top:200px;  transform: translateY(-262px);"/>

SCRIPT:

$(function(){
   $("[data-paroller-factor]").paroller();
});

VIDEO:

Alignment issue on Firefox when applying CSS filters

I'm not sure if this is a Firefox bug or a plugin issue. Line 22 of CSS in this codepen is the problem: https://codepen.io/ADavidLiu-1478715687/pen/xaXLBK

Does anyone know how to fix this or an alternative to apply the filter? I've tried applying it to the parent container but the result is the same, leading me to think it is a bug in Firefox and not paroller. Thanks.

Height issue when image repeat is no-repeat

I am new to parallax effect and you are the first library that I chose to work with.I want a parallax effect to a background-image but it's not taking the viewport height. As you have mentioned in your demos in your documentation, I followed ,

html
class="jumbotron" style="background: url('https://unsplash.it/1920/800?image=950') no-repeat center; background-size: cover;" data-paroller-factor="0.5" data-paroller-factor-xs="0.2"

js
$('.jumbotron').paroller();

But this is only working when I have background-repeat:repeat. When I have no-repeat it scroll the half of the page and my inner content going to the white section where the background-image is not visible. Help me to solve this.

adding easing

I would like to add easing to my parallax animations, but don't know enough about data attributes to know how to do that with your plugin. For example, I am adding a horizontal parallax effect to heading tags, which is cool, but would be even cooler with some subtle easing added.
Thanks for considering it.

Update npm package

Please, update your package on the npm storage. You have different versions on github and npm storage.

Vertical Scrolling Position On Mobile Snaps Wrong

Hi there,

I've found an issue where if you scroll to the top of the page then the bottom whilst using a mobile - safari iphone. The vertical position is offset wrong until you scroll in the opposite direction again then it jumps back to the correct position?

Notice in the image below. The Text has gone over the line. If I then scroll up on my phone it pings back to the correct position instantly.

Any help in fixing this would be amazing. As I absolutely love this plugin!

alter data attribute with media queries?

Can you suggest a way to have a different data-paroller-factor on smaller screens than on desktop? I am using paroller to add parallax to text, and on smaller screens this creates issues. I'd like a desktop data-paroller-factor of -0.35 but on mobile either 0 or closer to 0. Not sure how to do this.
Thanks for any ideas you can suggest!

Content jumps down

First of all, this is an easy to use and great plugin for achieving parallax effects. Kudos to you! I'm still having an issue that resembles issue #50. When scrolling, the content at the top of the page jumps down. I've updated the plugin with the latest js but the problem is still there.

get scrolltop from other element

i have some issues to use paroller with other scripts like smooth-scrollbar ( https://github.com/idiotWu/smooth-scrollbar )
via smoothscroll i can pick the distance of top (
https://github.com/idiotWu/smooth-scrollbar/blob/574026fed21559d30d334b413b069c3ea2e0ca69/docs/api.md#scrollbarscrolltop )

but how can i pass that information to paroller?

Not working as expected on Firefox.

Tested on Opera/Edge and Firefox. It works flawlessly on Opera, assuming it works on Chrome as well since they are pretty much the same.
Demo: https://youtu.be/yAlT93jXbc0 The problem is that the video should be within the dotted frame.
Perfectly working example on Opera https://youtu.be/ykCNfrYkmE0 I forgot to add the dotted frame in this one but I ensure you, it is within the frame.
Code: https://codepen.io/anon/pen/JBGYWb

White Space Above Parallax Image

I think this is an awesome plugin...very smooth and easy to integrate. I am having an issue though with white space above my parallax image. The first instance is used on the header image on my homepage which is a full screen div with background but its fine - no white space. I use a bit of jQuery to size this first div to the browser window.

The second instance is further down the page in a div with padding where the white space above the parallax appears.

There aren't any errors in the code and I have tried restructuring my JS but have not been able to successfully fix. While there aren't any technical errors in the code I think it has to do with the script that initially sizes the browser but I'm not sure.

Has anyone run into a similar issue?

background images not keeping height on page scroll

On your demo site you have 2 examples of vertical parallax, one with "hello parallax" in the heading and one below it with "scrolling is fun". On your site, as on mine, the "scrolling is fun" example does not maintain the height of the background image as you scroll the page up and down. The top example maintains a height of 316px regardless of page scroll (at least on large screens). The lower one shrinks from 316px to about 237px in height when it is near the bottom of the pageview.

Inspecting your site I dont see any difference in the css between these 2 examples. The only difference is the data-paroller-factor (.5 and -.15 respectively) and the image sizes. On my site no matter what data-paroller-factor I use or image size, the background images do not maintain their height throughout page scroll, even with adding a min-height rule with !important.

I am trying to achieve what you have in your top example ("hello parallax") (a fixed height throughout) but instead getting what you have in the example below it ("scrolling is fun"). Any suggestions? Thank you

Destroy and re-initiate on window resize

Great plugin, very easy to use however I am having an issue where the values end up being wrong when the window is re-sized. This is due to the size of containers and objects changing due to media query breakpoints.
So I need to re-calculate the transforms on window resize. Is there a destroy/re-calc function?

enhancement question

Hi thanks for your great plugin
but I wonder if you consider adding option for center parallax elements in the viewport like this ?

Using Paroller on elements at the top of the page

Hi!

I am hoping to have an element positioned at the top of the page (a Hero Banner) and I want to implement paroller so that its' content parallaxes.

At the moment it seems on page-load paroller kicks in and applies the transform despite not started scrolling yet. For example transform: translateY(-84px);, which causes an unwanted gap.

How is it possible to have transform initiate at 0 or null so that it is only applied when the user starts scrolling.

Thank you and great job

Elements shift down only when at top of page

If I reload / visit a page and I'm at the very top, the elements that have Paroller applied to them are positioned where they're intended to be, however, when I start to scroll, they jump down from where they're intended to be, but the parallax effect works fine.

However, if I scroll down the page just a little bit from the top, and reload the page, the elements are positioned lower than where they're intended to be. As I start to scroll, they don't jump down, they just work as the parallax effect.

Any idea what's going on? Maybe Paroller isn't being initiated at the load of a new page?

Thanks in advance for your help!

requestAnimationFrame

Should this use rAF instead of on scroll?

`factor` overwrites the factor of other breakpoints

When I apply paroller to an element and I'd like to have a default behavior/factor, I can't override that default with breakpoint-specific factors (e.g. factorMd, factorXs).

Javascript:

$("#annoncer-screen").paroller({ factor: 0.3, factorMd: 0, type: 'foreground', direction: 'vertical' });

SCSS:

#annoncer-screen {
    width: 116.667vw;
    overflow: visible;
    z-index: 5;
    position: relative;
    left:8.333vw;
    img {
        width: 100%;
        transform: rotate(10deg);
        box-shadow: 0.5rem 4rem 4rem -1rem rgba(45, 62, 80, 0.6), 1rem 1rem 2.5rem 0rem rgba(0, 0, 0, 0.7);
    }
}
@media (min-width: 1024px) {
    #annoncer-screen {
        position: absolute;
        width: 1000px;
        left: 8.333vw;
    }
}

The breakpoint-specific values seem to work, as long as I do not set the 'default' factor value. In the code example above, factorMd seems to be overwritten or ignored when scrolling.
This seems to happen regardless of:

• Factor value (I tried 0, a positive value and a negative value)
• Positioning of the Paroller'd element (I've tried setting both to position: absolute, as well as the styling above)

Is this intended behavior? If so, how could I have a specific value for factorMd, which having a 'default' factor value for anything above that breakpoint?

Wrong background position on mobile after scroll+resize

Chrome Mobile (also Iphone 10 and all mobile devices when address bar exists)

Video with bug
https://www.youtube.com/watch?v=jgjHgtuands

i found it on other site but able to repeat it also on demo site.
Bug in calculation of background position after scroll page when address bar hides or appears. Paroller calculates right position in "scroll" event but after "resize" event handler calculates wrong offset without scrollTop

Can't make it work with Angular

Hello! I'm trying to add paroller into a angular project...

I'm calling $(window).parallax(); and have some elements with data attributes inside a ng-view but it seems is not working properly, nothing moves as aspected.

I also tried to call the elements via javascript but got the same result.

I don't know if I'm missing something here... Thank you for your time!

Jump on scroll vertically

Lovely plugin! I have a simple 2 full width containers with backgrounds, I set up the parallax vertically on the second container (which is below the first one.), the moment you start scrolling, the 2d container jumps down a distance before it starts smoothly parallax. is it a bug? thanks

I am using the latest version 1.4.6.

Use a delay?

I'm getting a weird issue with inconsistent placement of the parallax background on a fairly long-scrolling page with a bunch of high-res images in the foreground. It often corrects itself when I refresh the page. I'm thinking it could be a delay issue, as if the images are taking too long to load in some cases and paroller pulls incorrect dimensions. Is there an easy way to have Paroller load a bit later, after all of the items on the page have had a chance to load? Or does it do this already?

Elements with background scroll snap once after refresh

Hi, I'm having some trouble with the plugin.
It does work, I had no problem initiating it etc., however, when I scroll down to a paroller-initiated element (I only use vertically scrolled backgrounds in my project btw) and then refresh the page, the background-position value is wrong at first. It does change to a correct one, right after I scroll the page either up or down, but it happens in a snap and it just looks terrible :(

It's really weird, because I even copied the example from the plugin website and imported the same jquery and plugin versions to check it, and it still snapped after refresh.

Here's a screenshot of background-position before and after scrolling the page down about 80px after refresh:

Example is broken in Chrome

Title says it all, all images in your given example are 100% static and doesn't move an inch in the latest version of Chrome for MacOS.

Show your work

Hero section problem

Great plugin, however, I have a little issue and all my tries to solve it went with the wind.

I have a fullscreen hero section with a line of text centered vertically and horizontally, and I want the text to have vertical parallax animation on scroll.

The problem is when I apply paroller on the text (using data attributes) it's not centered anymore when page scroll = 0. It has a little bit of initial translate transform up or down depending on the direction I set. I can understand this is useful when applying paroller on an element in the middle of the page, but when it applied to an element in the first section (like hero section in my case) this initial transform will break the layout. The text element should be in its original place, then it moves slowly on scroll.

I tried to play with the calculations in the code but had no luck. If someone can give an advice I will appreciate it.

Regards