3. Parallax effect

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Parallax effect

  • I

    I would love to have some parallax effect to images, but I can’t get the angular plugins to work in Onsen UI.
    Like this effect:
    http://oblador.github.io/angular-parallax/

    I have included
    https://github.com/oblador/angular-parallax
    and
    https://github.com/oblador/angular-scroll (required by angular-parallax).

    But the images is not getting the wanted effect. It seems as the scroll event does not fire.

    Has anyone used parallax effect to images or has any tip to other libraries?

    These effects would be a great addition to Onsen UI components if they where to be added in the standard library…

    0

  • Hi @ingljo. You are partially correct - the scroll event actually is fired, however it is on another element, not the one which the parallax is listening to. I took a look at the implementation and they seem to be listening on $document, whereas if you have a ons-page in Onsen it will fire the event for the .page__content element.

    I didn’t see a way to change the element on which the lib is listening, but in that case we can just manually call the handler like this:

    document.querySelector('.page__content').addEventListener('scroll',  function (e) {
  $document.triggerHandler('scroll');   
});

    and you’re good to go :)

    Here’s a Demo.

    Maybe not the most elegant and probably not the most performant, but it seems to work.

    As for adding an effect like this to the core Onsen library it does sound interesting and we may consider it at some point, but for now maybe it’s better if an external lib like the one you mentioned is used since that way you have more flexibility. Also since Onsen UI is focused mostly for mobile app development I don’t think this would be a commonly used feature as it makes more sense for desktop websites, at least in my opinion.

    Note 1: you may consider calling it using some filter with window.requestAnimationFrame or something similar if you’re receiving poor performance.

    Note 2: Currently in the demo we did the provided code in a somewhat random place. In general you may need to listen to a init event which the page fires to do setup like this :) You can use the ons-init attribute for that.

    0