npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-parallax-view

v0.2.2

Published

Create a composite control that displays different images that react to the mouse movement to create a depth effect

Downloads

66

Readme

Vue Parallax View

Create a composite control that displays different images that react to the mouse movement to create a depth effect

Drag Racing

Demo

the thompsons demo

Installation

Install the library and css into your project

$ yarn add vue-parallax-view

or

$ npm i vue-parallax-view

Usage

Configure your main.js

import VueParallaxView from "vue-parallax-view"
Vue.use(VueParallaxView)
import "vue-parallax-view/dist/vue-parallax-view.css";

All left to do is configure the layers array and passe it to the component. In this example I'm using images from the assets directory, if this is your case use the require(...) function.

parameters

  • name: unique name for the layer. Make sure this is unique
  • horizontalDisplacement: the amount of horizontal displacement for this layer. See displacement for more information
  • verticalDisplacement: the amount of vertical displacement for this layer. See displacement for more information
  • image: image resource to be use for this layer. Can be from the assets folder (use require() function), an absolute url or a relative url for your public/static folder.
  • class: add a custom class to control how this specific layer looks
data() {
    return {
      layers: [
        {
          name: "bg_sky",
          horizontalDisplacement: 0,
          verticalDisplacement: 0,
          image: require('@/assets/bg/layer_sky.png')
        },
        {
          name: "bg_clouds",
          horizontalDisplacement: 0.1,
          verticalDisplacement: 0.1,
          image: require('@/assets/bg/layer_clouds.png')
        },
        {
          name: "bg_mountain",
          horizontalDisplacement: 0.075,
          verticalDisplacement: 0.075,
          image: require('@/assets/bg/layer_bg_mountains.png')
        },
        {
          name: "bg_pines",
          horizontalDisplacement: 0.11,
          verticalDisplacement: 0.11,
          image: require('@/assets/bg/layer_bg_pines.png')
        },
        {
          name: "ground",
          horizontalDisplacement: 0.15,
          verticalDisplacement: 0.15,
          image: require('@/assets/bg/layer_ground.png')
        },
        {
          name: "pines",
          horizontalDisplacement: 0.3,
          verticalDisplacement: 0.3,
          image: require('@/assets/bg/layer_pines.png')
        }
      ]
    }
  }

And in your template add the markup. Although width and height are optional feel free to configure them to match your UI. You can use 300px, 100%, 50vw, etc.

 <vue-parallax-view :layers="layers" :width="'400px'" :height="'350px'"  />

Displacement

A brief explanation on how displacement works:

Images are scaled in order to allow the parallax effect. If the images where the same size as the portrait containing them the translation wouldn't work. To solve this the displacement parameter is created. It can be interpreted as a scaling factor.

For example a horizontalDisplacement of 0.2 means there is a 20% of the image being hidden. This is distributed equally on the axis, for this case 10% is hidden for the right and left sides of the image.

The way this react to the movement of the mouse is: if the mouse is centered horizontally on the screen the image is considered centered and there is a 10% of the image not being shown for each side. As the mouse gets further away from the horizontal center of the screen the opposite hidden area of the image stars to appear. This also applies for vertical displacement.

The greater the value the more noticeable the movement will be.

My images look bad !

There is a base style for each layer:

  position: absolute;
  transform-origin: left bottom;
  will-change: transform;
  transition: 300ms transform linear;
  background-repeat: no-repeat;
  background-size: cover;

You can override these in any way you like with the class parameter:

  {
    name: "pines",
    horizontalDisplacement: 0.3,
    verticalDisplacement: 0.3,
    image: require('@/assets/bg/layer_pines.png'),
    class:"my-custom-layer-class"
  }

If you still don't see the changes try to give more specificity:

 <vue-parallax-view class="my-parallax" :layers="layers" :width="'400px'" :height="'350px'"  />
.my-parallax .my-custom-layer-class {
  position: absolute;
  transform-origin: left bottom;
  will-change: transform;
  transition: 300ms transform linear;
  background-repeat: no-repeat;
  background-size: cover;
}

:warning: WARNING

Be careful when playing with the transition rule. Using anything but linear will result on a choppy animation. The same occurs if you decrease the time.

Enjoying this component ? buy me a beer :beer:

qqwhpypxxwc6w5pms8s4d3zz8w37t6rfa5hq89u5pg

Licence

Vue Parallax View is open source and released under the MIT Licence.

Copyright (c) 2019 Angel Arcoraci