Parallax in Ionic 2 (RESOLVED)

Ionic Framework ionic-v3
1

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,

2

This works fine in RC2.

3

Hi,
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?

4

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.

5

@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';

...

@Component({
    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,
Ryan

1 Like
6

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

EDIT: It’s updated now: http://www.joshmorony.com/how-to-create-a-directive-in-ionic-2-parallax-header/

EDIT 2: I have a new tutorial with a better parallax implementation: http://www.joshmorony.com/high-performance-parallax-animation-in-ionic-2/

3 Likes
7

It helped a lot, thank you!

8

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

9

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.

Thanks,
Marc

1 Like
10

@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

11

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.

Cheers,
Marc

12

any update on this guys ?

13

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
14

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

15

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

16

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