vguillou / parallax-element Goto Github PK

Just noting that this looks fantastic on Safari 9.0.3 on OS X El Capitan and again on Safari on an iPad II with iOS 9.2.1.

I am noting that on the iPad in Portrait rotation mode it's best to stretch the height of the upper (depth:0) layers so that they're taller. Otherwise, you can see where the two photos meet together behind the scenes. You can simulate this by re-sizing a standard browser so that it's narrower than it is tall.

In testing this with IE 11 on a Windows 8.1 computer I'm seeing that there is no parallax feature—everything is all on the same layer. Polymer is providing the expected paper effects like shadows and such but parallax-element doesn't seem to be supporting this browser from what I can see.

Is this supposed to work on newer versions of IE?

In my particular implementation of the "real world" example I noticed that the mouse scrolling worked great but the up/down cursor keys and the page up/dn keys didn't do anything. I spent some time on this and now I think I've got a working solution for me. Feel free to roll this into parallax-element somewhere if you want to with the following caveat: the keycodes for page up and down aren't consistent across browsers. So a proper approach would be to find out which browser it is and then to use the correct keycodes on a per-browser basis. Since I don't care about other browsers for my vanity website I'm just coding it for my Mozilla-based browser.

This went into my index.html's header:

    <script>
    // translate into the parallax-element's scroller functionality.
    function pageScroll(vLines) {
      var scroller = document.querySelector('#parallax').scroller;
      scroller.scrollTop = scroller.scrollTop + vLines;
    }
    document.onkeydown = function(e) {
      e = e || event;
      switch(e.keyCode) {
        case 33: // page up
          pageScroll(-360);
          return false;
        case 34: // page down
          pageScroll(360);
          return false;
        case 38: // up cursor
          pageScroll(-36);
          return false;
        case 40: // down cursor
          pageScroll(36);
          return false;
      }
    }
    </script>

And my initial reference to the parallax-element gets decorated with an id tag like this:
<parallax-element id="parallax">

And that's it. It now listens for up/down cursor and page up/dn and translates this into your scroller. Note that the numbers in the pageScroll() calls are positive or negative depending upon direction and I chose values which make my website scroll nicely. I'd suggest matching the up/down values and then multiplying those by ten for the page up/dn values as I've done.

Hi, could you give more information about Safari compatibility? (Is there any documentation about this?)
Best regards
VVL

Not that it's necessarily your problem, but the Polymer Starter Kit comes with a pre-installation of Browsersync. Per the online tutorials it allows you to point many browsers and devices at the same testing link like http://192.168.0.50:5000 and the Browsersync JavaScript gets injected right after the body tag, allowing all these browsers to work in tandem. If you scroll in one browser, all others scroll similarly.

It looks like something regarding the parallax-element's scrolling behavior is faking out the Browsersync's normal trapping of the scroll function, not sure why. I can fire up a Safari on the MacBook and then point my iPhone and my iPad at the same external address. If I click the fullscreen button in one browser, it will change states in the iPad, for example. So I know that Browsersync appears to be trapping mouse clicks... just not the scrolling feature.

Interestingly, if I do a two-finger scrolling gesture on either the iPad or the iPhone it wants to mimic this behavior on the other portable. So it suggests that parallax-element is faking out Browsersync for the single-finger scroll gesture.

I don't necessarily expect you to troubleshoot this or to care much. Just noting the incompatibility.

Am wondering if its easy or you could add a demo of horizontal scroll.
The reason being that I think a combination of horizontal and vertical scrolling is what a few high end apps do.
For example airbnb.

It would be cool to do it with polymer.

Great work and really awesome

This component doesn't seem to be working in Polymer 2.0. I copied the demo code verbatim and nothing appears on the screen. There is no console output indicating an error.

I'm trying to use this within a paper-header-panel, but I'm not sure if I'm doing something wrong or if it was never designed to be used with a header-panel in the first place. What happens is that parallax-element creates a nested scroll view within the header-panel's scroll view

After adding parallax-element to the latest version of Polymer Starter Kit (PSK v1.1.1 - Polymer V1.2.0), the following error shows in the console. Might this be a bug?

https://gist.github.com/samcarecho/4cc6b7a7eff9bff30779

Hi,

I am trying to add 2 consective parallax layers but it seems to break things.
No error in the console.

Is it possible to do it? If not which would be the best alternative?