loading...

How to use jarallax parallax plugin with Nuxt.js

jasminetracey profile image Jasmine Tracey ・2 min read

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

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

Posted on by:

jasminetracey profile

Jasmine Tracey

@jasminetracey

I am Jasmine Tracey, a frontend and backend developer. I have been in programming for almost five years. I have been mostly focused with web development, mobile development and UI designing

Discussion

pic
Editor guide