How to use jarallax parallax plugin with Nuxt.js
Tags: nuxt, jarallax, parallax
Published: 2020-06-18 21:18:33

---
canonical_url: https://jasminetracey.com/posts/how-to-use-jarallax-parallax-plugin-with-nuxt-js
---

Adding parallax to your nuxt website is really easy. I will show you how to add it using the jarallax plugin and newly created nuxt project.

### Resources
* [Nuxt.js](https://nuxtjs.org/)
* [Jarallax Plugin](https://github.com/nk-o/jarallax)


From your terminal application change directory to the location in where you to create this new project. Create a new project using the following command
```bash
npx create-nuxt-app parallax
```

Open your project in your favourite editor for this tutorial i'll be using visual studio code.
```bash
cd parallax
code .
```

To begin we will need to install the jarallax and the object-fit-images plugin
```bash
npm install --save jarallax object-fit-images
```

Create the `plugins/jarallax.js` file in the plugins directory. Here we are importing the plugins and calling the functions after they window has loaded
```js
import 'object-fit-images'
import { jarallax, jarallaxVideo } from 'jarallax'

window.addEventListener('load', function(event) {
  jarallaxVideo()

  jarallax(document.querySelectorAll('.jarallax'), {
    speed: 0.2
  })

  jarallax(document.querySelectorAll('.jarallax-video'), {
    speed: 0.2,
    videoSrc: 'https://youtu.be/mru3Q5m4lkY'
  })
})

```

For the plugin to work we will need to also add some css styles. So in your assets directory create a folder called css and in that folder create your main.css
```css
.jarallax {
  position: relative;
  z-index: 0;
}

.jarallax > .jarallax-img {
  position: absolute;
  object-fit: cover;
  /* support for plugin https://github.com/bfred-it/object-fit-images */
  font-family: 'object-fit: cover;';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
```

The next step is to add those two files to the `nuxt.config.js` so nuxt can know to compile them
```js
export default {
    css: ['@/assets/css/main.css'],

    plugins: [
      { src: '~/plugins/parallax.js', ssr: false }
    ]
}
```

Now for the magic we are going to be updating our `pages/index.vue` so we can the plugin in action
```vue
<template>
  <div>
    <div class="first jarallax">
      <img
        src="https://images.pexels.com/photos/2951096/pexels-photo-2951096.jpeg?cs=srgb&dl=photo-of-woman-wearing-head-scarf-2951096.jpg&fm=jpg"
        class="jarallax-img"
      />
      <h1>Hello Jarallax</h1>
    </div>

    <p>
      Jarallax is an open-source javascript library which makes adjusting css
      based on interaction easy. With Jarallax it's easy to create a parallax
      scrolling website.
    </p>

    <div class="jarallax second">
      <img
        src="https://images.pexels.com/photos/936048/pexels-photo-936048.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
        class="jarallax-img"
      />
    </div>

    <p>Jarallax can also be used with videos</p>

    <div class="third jarallax-video"></div>

    <div>
      <p>
        Photo by
        <a href="https://www.pexels.com/@eben-odonkor-1531463" target="_blank"
          >Eben Odonkor</a
        >
        from
        <a
          href="https://www.pexels.com/photo/photo-of-woman-wearing-head-scarf-2951096/"
          target="_blank"
          >Pexels</a
        >
      </p>

      <p>
        Photo by
        <a
          href="https://www.pexels.com/@nappy?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels"
          target="_blank"
          >Nappy</a
        >
        from
        <a
          href="https://www.pexels.com/photo/five-women-laughing-936048/"
          target="_blank"
          >Pexels</a
        >
      </p>
    </div>
  </div>
</template>

<style scoped>
.first {
  height: 600px;
}

.second {
  height: 350px;
}

.third {
  height: 600px;
}

h1 {
  color: #ffffff;
  text-align: center;
  font-size: 64px;
}

p {
  font-size: 20px;
}
</style>

```
Source Code is available at https://github.com/jasminetracey/nuxt-parallax

All photos used are taken from Pexels