DEV Community

Jasmine Tracey
Jasmine Tracey

Posted on • Updated on • Originally published at jasminetracey.com

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

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

npx create-nuxt-app parallax
Enter fullscreen mode Exit fullscreen mode

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

cd parallax
code .
Enter fullscreen mode Exit fullscreen mode

To begin we will need to install the jarallax and the object-fit-images plugin

npm install --save jarallax object-fit-images
Enter fullscreen mode Exit fullscreen mode

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

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'
  })
})

Enter fullscreen mode Exit fullscreen mode

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

.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;
}
Enter fullscreen mode Exit fullscreen mode

The next step is to add those two files to the nuxt.config.js so nuxt can know to compile them

export default {
    css: ['@/assets/css/main.css'],

    plugins: [
      { src: '~/plugins/parallax.js', ssr: false }
    ]
}
Enter fullscreen mode Exit fullscreen mode

Now for the magic we are going to be updating our pages/index.vue so we can the plugin in action

<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>

Enter fullscreen mode Exit fullscreen mode

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

All photos used are taken from Pexels

Discussion (7)

Collapse
rwsimon profile image
rw-simon

Hey Jasmine!

I followed your instructions, but the animations on my page are very laggy, both in dev and production. I took your exact code, no extra settings or plugins.
Where would I need to look to find why that is? Did you experience similar laggy behaviour?

Thanks for your follow up! Would love to use jarallax in my nuxt application.
Simon

Collapse
jasminetracey profile image
Jasmine Tracey Author

Hey Simon,

Sorry for the delayed response. I didn't experience any lagging with the plugin. It is currently running on my site jasminetracey.com.
Are you loading images or videos from the internet or locally? That could be a reason for the lag

Collapse
mikeoxhuge profile image
Mike

Hi, not working for me. Literally copied code from your github repo and all I have is static images and no video. No parallax effect at all

Collapse
jasminetracey profile image
Jasmine Tracey Author

Hey, thanks for reading my tutorial. Sorry for the late response. I cloned the project from my Github and the parallax works.
If you could share your code i'd be happy to debug it

Collapse
mikeoxhuge profile image
Mike

Hi, thanks for your kind offer. I used v-parallax from Vuetify and it works just fine. I've sent you a connection request on LinkedIn.
Thank you and have a nice day ;)

Collapse
kgrosvenor profile image
kgrosvenor

Your website is throwing a client error.

Collapse
enigmanations profile image
ref • Edited on

This Parallax is not working after I tried to navigate to another page using 'nuxt-link'