Parallax in Ionic 2 (RESOLVED)

I spent about 4 hours trying to get a parallax image in Ionic 2, testing in Chrome, but simply couldn’t get it. If anyone has a good way to do parallax, please post it here,

This works fine in RC2.

I am sorry but this is not working for me in RC2, do you have a codepen with an example that i can check it out, how you did it?

He wrote it a long time ago. If you cut and paste, it will not work. Just go step by step, and make incremental changes. Every error will be easily fixed; you won’t have to re-invent anything.

@tobiaspix there will be 1 important change:

In TobiasPage.ts, the tutorial says to add the code…

import { MyCustomDirective } from '../../components/my-custom-directive/my-custom-directive';


    templateUrl: 'build/pages/tobias-page/tobias-page.html',
    directives: [MyCustomDirective]

However, the @Component was deprecated in Angular RC6, so don’t add the import line or the directives[] line to that file.

Instead, open src > app > app.module.ts, and add

import { MyCustomDirective } from '../components/my-custom-directive/my-custom-directive';

…then in the same file, within the @NgModule(…), add MyCustomDirective to the declarations[] array.

I hope that helps,

1 Like

Just a heads up, I will hopefully be updating this tutorial very soon.

EDIT: It’s updated now:

EDIT 2: I have a new tutorial with a better parallax implementation:


It helped a lot, thank you!

UPDATE: Josh updated the tutorial, the link works now.

Just curious – is it possible to modify this directive to work on the img property of a ‘card’ component, as opposed to a single page header? Or would I want to start from scratch? I’m definitely not that experienced in building my own directives.


1 Like

@marcsyp hi , any updates regarding that… I am also wondering if I can use such directive for list of <ion-card> and <ion-card-header> and more importantely , can the whole card act in such a way? (as in Josh’s example)

I have followed Josh’s example and it works like a charm… but can this be done only for images! and what about list of item? can someone provide reading material to understand the magic how to manipulate ElasticHeader !

I am using RC 4 btw

I have not tried it nor have I seen any updated examples – sorry… still interested, as you are, but I’m busy working on other things.


any update on this guys ?

Yeah so I found a library called Rellax that has multi-device parallax capabilities in Vanilla JS, so I am going to try to write a wrapper for it next week and post it.

1 Like

@wilsonhobbs… that would be super cool, please let us know when its posted

Hello guys , thank you for your perfect examples and problem solving, you helped me a lot!
But i got one Question : Why ,in Apples devices , the image is not getting vanished ? (sometimes it does , and some not even)
Is it something about WKWebView plugin ??

Thanks , @joshmorony and rest

Hey, what have you done that reflect the coorect working parallax effect in chrome??