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 where you 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 will 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 the 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 that makes adjusting 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 jasminetracey/nuxt-parallax

All photos used are taken from Pexels