oblador/angular-parallax

Lightweight & performant parallax scrolling for angular.js.

Hej, I'm Joel! 👋

My repos demand more time than I have, so I have to be ruthless in my prioritization. Send me a DM on Twitter if you want to help out.

Click for vanity statistics

angular-parallax's Issues

Is there a way to parallax CSS background images?

Hey man,

Cool script. Would be awesome to be able to animate background images out of the box though. Are you able to point me in the right direction?

Have problem with Foundation CSS

I'm trying to mix angular-parallax with foundation css but the animation is flickering. As soon as I remove foundation css, angular parallax works fine again. Could you have some insight?

Not working on mobiles

Tested under Chrome 32.0.1700.99 on Android 4.4.2 and also under Safari on iOS7 (sorry, don't know how to get the Safari version number).

The parallax effect doesn't seem to work under these browsers and OSes. It's as if the plugin just isn't loaded, as the images that are meant to be parallax are behaving as if they're just plonked into the markup.

The implementation is correct as everything is perfect on desktops.

The problem can be recreated on the example page for this repo: http://durated.github.io/angular-parallax/

Here's the markup I'm using:

<img src="/img/faded-houses.png" alt="Faded houses" du-parallax y="slow" style="margin-right: -400px" />
<img src="/img/bill-stack.png" alt="Stack of bills" du-parallax y="medium" style="margin-left: 120px" />

Stop Scrolling at Viewport Top

I'm wondering if someone could provide an example where you have a list of sections, and scroll through them, but stop the container at the top of the viewport.

Example: http://muse.adobe.com/

Example of custom animator

It would be nice to have a more in-depth example of using custom animators.

Not Working in iPad / iPhone

Hi,
Your Example does not work in iOS.
Any plans to update to make it work in iOS?

(Stellar.js has some info about ios issues)
Thx

No workie in IE

Doesn't work at all in IE10, IE9, IE Compatability of any type.

Problems in a Bootstrap Carousel

I'm having a problem where the 1st slide in a carousel (class='item active') gets a style="transform: translate3d(0px, -55px, 0px);" added that pushes that slide up while the others stay in place. Wondering if anyone can help with this.

Example with opacity?

All your examples are with the background. May you please show an example with opacity?

Error when testing on mobile emulator of Google Chrome

Hi, currently integrated angular-parallax in a web project and it does not work on mobile devices. It also seems that it chokes the whole web project on safari on my Iphone and other Apple devices, resulting in a complete CRASH of Safari!

This is the error I get when emulating any mobile device. When I remove the du-parallax attribute, the error is gone and the webproject runs again on Apple devices without Safari shutting down.

TypeError: Cannot read property 'compile' of undefined
at angular.js:6485
at forEach (angular.js:323)
at Object. (angular.js:6480)
at Object.invoke (angular.js:4182)
at Object.enforcedReturnValue as $get
at Object.invoke (angular.js:4182)
at angular.js:4000
at Object.getService as get
at directiveIsMultiElement (angular.js:7813)
at collectDirectives (angular.js:7145)angular.js:11598 (anonymous function)angular.js:8548 $getangular.js:6498 (anonymous function)angular.js:323 forEachangular.js:6480 (anonymous function)angular.js:4182 invokeangular.js:4035 enforcedReturnValueangular.js:4182 invokeangular.js:4000 (anonymous function)angular.js:4141 getServiceangular.js:7813 directiveIsMultiElementangular.js:7145 collectDirectivesangular.js:6993 compileNodesangular.js:7009 compileNodesangular.js:7009 compileNodesangular.js:7009 compileNodesangular.js:6904 compileui-router.js:3893 compileangular.js:8217 invokeLinkFnangular.js:7726 nodeLinkFnangular.js:7075 compositeLinkFnangular.js:6954 publicLinkFnui-router.js:3839 updateViewui-router.js:3801 (anonymous function)angular.js:14707 $get.Scope.$broadcastui-router.js:3218 $state.transitionTo.$state.transition.resolved.then.$state.transitionangular.js:13175 processQueueangular.js:13191 (anonymous function)angular.js:14388 $get.Scope.$evalangular.js:14204 $get.Scope.$digestangular.js:14493 $get.Scope.$applyangular.js:9650 doneangular.js:9840 completeRequestangular.js:9781 requestLoaded

Also, from my experience, the parallax effect is choppy on all desktop browsers when scrolling with the mouse, all but firefox. (probably because it has a smooth scroll).

Hope this helps you to improve this angular module. Kind regards

Parallax inside scrollable div

If I specify parallaxable elements inside scrollable div, it does not work. Am I missing anything?

chrome

The example doesn't work in chrome.

The example doesn't work in Firefox

The example doesn't work for me in Firefox, it just shows static images. Is this intended or a recent break? I saw older issues about IE but not Firefox.

In IE10/11 the transition jumps

Not sure if you guys have noticed this yet. But when in ie10/11 the animation jumps up then settles when doing the parallax.

Is positioning of element need to be static?

I am implementing in my project code similar to an example but nothing work. Can it be any problems with absolute positioning elements?

sample page is broken

I'm using Chrome 45.0.2454.85 on Windows 10.

TypeError: Cannot read property 'compile' of undefined
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:44:276
    at Array.forEach (native)
    at q (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:7:280)
    at Object.<anonymous> (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:44:209)
    at Object.d [as invoke] (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:35:36)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:36:288
    at Object.c [as get] (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:34:305)
    at ba (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:58:283)
    at ca (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:49:263)
    at N (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:47:351)

http://oblador.github.io/angular-parallax/

Dist file(angular-parallax.js) should contain full dependencies syntax

Instead of

angular.module('duParallax.directive', ['duScroll']).
directive('duParallax',
  function(scrollPosition){
  //.....

should be

angular.module('duParallax.directive', ['duScroll']).
directive('duParallax',
  ['scrollPosition', function(scrollPosition) {
    //.....
  }]

overflow-x:hidden causing gaps

When I set the overflow-x: hidden for the body and html the parallax scrolling no longer works. I get big gaps between the elements that are scrolling that are not there if I remove that attribute. It also seems that the scrolling effects no longer work. Do you have any idea why this might be the case?

Your demo fails... (EOM)

inconsistency in translate3d position

if I scroll slowly the css "transfrom: translated3d" is consistent but if i scroll too quickly from bottom to top then the translated3d is different each time .. this makes my divs break and create a white gap or cause unnecessary overlaps between divs.

It should output the same and consistent transform: translate3d value regardless of how fast or slow an user scroll.

Mobile implmentation

Hey thanks for the awesome library. I saw the commit "Enabled parallax for touch devices". Are there any instructions on how to get it working on iOS?

bower installer installs other package

angular-parallax git://github.com/brettdonohoo/angular-parallax.git

Add to NPM

The package does not appear to be available on npm just like angular-scroll