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
• Jarallax Plugin

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

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

cd parallax
code .

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

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

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

.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

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

<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

Comments

[Jovylle B]

This is a potential, continuous effort truly have good results.

[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

[Jasmine Tracey]

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

[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

[Jasmine Tracey]

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

[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 ;)

[kgrosvenor]

Your website is throwing a client error.

[ref]

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