Vue CSS Variables Parallax

Allow to create powerfull parallax effects by using CSS Variables when the element gets to the viewport, a --scroll-amount css variable will be attached to it and will be updated by the scrolled amount.

Install

Install using NPM/Yarn.

npm install --save vue-custom-properties-parallax  # Using Yarn yarn add vue-custom-properties-parallax

Import this into your scripts.

import CustomPropertiesParallax from 'vue-custom-properties-parallax'  // Using CommonJS const CustomPropertiesParallax = require('vue-custom-properties-parallax')  Vue.use(CustomPropertiesParallax)

It also exports directive to use locally or in a mixin.

<script>   import { directive as customPropertiesParallaxDirective } from 'vue-custom-properties-parallax'    export default {     directives: {       'custom-properties-parallax': customPropertiesParallaxDirective     }   } </script>

Usage

In the CSS we have a --multiplier variable, which will manager the speed and direction.

<template>   <div v-custom-properties-parallax class="parallax">     <img src="/parallax-image.png" />   </div> </template>  <style>   .parallax {      /*      * All logic is handled by CSS.      */     img {       --multiplier: 0.1;       --opacity: calc(1 - calc(var(--scroll-amount) * 0.002));       --translate: calc(var(--scroll-amount) * var(--multiplier) * 1px);       opacity: var(--opacity);       transform: translateY(var(--translate));     }   } </style>

Custom Settings

Start the parallax only when the elements get to the center of the screen by passing center as a modifier

<my-element v-custom-properties-parallax.center />

You can disable --scroll-amount on mobile by passing mobileOff as an argument if you don't want to perform the effect on small devices

<my-element v-custom-properties-parallax:mobileOff.center />

...

example: https://codepen.io/nobrefelipe/pen/aqYyOy

inspired by: https://daverupert.com/2018/02/cheapass-parallax/