0 article rate

  • Created: Apr 27, 2022
  • 3 min read

How to Create an Extensible Parallax Effect Directive for Vue

How to Create an Extensible Parallax Effect Directive for Vue.

I had a case when I needed to refactor code in my work. More precisely, I had to remove unnecessary libraries. One of these libraries created parallax effects when scrolling the page.

This library was used on many pages and in different ways. But it was poorly adaptive and complex to maintain or extend. For example, it didn't support 3d transformations, and for the only element on the site that required it, another library was installed.

Therefore, it was decided to write its directive, replacing both libraries and removing two dependencies at once. With the ability to extend the functionality and use in Vue 3.


Implementing the default solution

The basic functionality, which is enabled by default without options, is to work with two card columns, with several of them inside. The important point is that one of the columns must be greater in height than the one next. 

For example, here:

Parallax effect.

You need to replicate a similar layout using FlexBox or Grid CSS. And set align-seft: flex-start to the column, which should be adjusted to the height of the next column. This is necessary to correctly calculate the pixels by which the column should move while scrolling.

In this case, the layout looks like this:

When using the default directive, you just need to import the mad-parallax.js file into the component and use it on the column you want to move.


Implementing a solution with custom options

Default solutions can make life a lot easier, but they may not be suitable in some cases. So, in addition to the default solution, you can specify custom parameters for element shifts when scrolling. 

For example, here:

Parallax effect with options.

To get this effect, you need to set the desired options for the cards to move. For example, we have to move the second and third cards. We need to set the following options:

In the first card, we turn off the parallax. Obviously, the units within the parameters are pixels. For the second card, we set maxMove: 20. For the third card, maxMove: 40. Thus the cards will appear one after the other while scrolling.

Component source code:


The nice thing about using a directive with options is that you can animate any element on the page: cards, images, or even a header specifying the shift you want. Also, you can extend the directive with functions you need or move to Vue 3 easily.

You can look at the implementation here and learn the source code and documentation for the directive in detail on GitHub.

Remote Tech Staff.
Application Design Proccess.

Software Architecture 101 - Introduction to the World...

Software Architecture 101 -...

Software Architecture 101 - Introduction to the World of Application Design

Hello, everyone!Today, I would like to introduce you to the world of application design.Designing applications can be called a multidisciplinary...

Strapi - Things to Keep in Mind Before Migrating to This CMS

Strapi: Things to Keep in Mind Before Migrating to...

Strapi: Things to Keep in Mind Before...

Strapi: Things to Keep in Mind Before Migrating to This CMS

When it comes to CMS, the modern market has already stepped so much that the choice is becoming increasingly difficult. There are so many options for...

How to use HTML5 semantic tags?

How to Use HTML5 Semantic Tags?

How to Use HTML5 Semantic Tags?

How to Use HTML5 Semantic Tags?

A properly designed website will be better ranked by search robots and more likely to get on the first page of search engines.And if this is...