Lesson Outline

Building a Parallax Header Directive

We're going to build another directive now, and this one will allow us to add an image to the top of our content area that will have a parallax effect added to it. As the content area scrolls, the header image will have a transformation applied that shrinks it, which gives a feeling of depth to the screen. The image appears to be in the background and moving slower than the content being scrolled, which is like the effect of looking out of your car window and the trees on the side of the road appear to move faster than the hills off in the distance.

This is a popular effect, and I've rebuilt this several times in the past. I've rebuilt it once more for this module to make it much easier to use in an application. I think this is an interesting example because we will be applying a directive to the <ion-content> area like this:

<ion-content
  [scrollEvents]="true"
  appParallaxHeader
  parallaxImagePath="/assets/autumn.jpeg"
  [parallaxHeight]="300"
>
  <div class="main-content">Normal content goes here</div>
</ion-content>

This will:

• Insert an element above the content area
• Listen for scroll events and transform the image accordingly

What I think is interesting about this example is that if you were to think about building this functionality, it would probably seem more obvious to build it as a component since we are adding a completely new element to the page. You could indeed build this functionality into a component if you wish, but I think this highlights the flexibility of directives.

Let's get into building it.

Generate the directive with the following command:

ionic g directive directives/ParallaxHeader