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-background

v1.0.1

Published

## Project setup ``` yarn install ```

Downloads

11

Readme

vue-parallax-background

Made for use in Vue 2.x

A lightweight component, whose only dependencies are Vue.js and core.js! Provides parallax effect for components with both mousemove, and scroll events.

Installation

npm i vue-parallax-background or yarn add vue-parallax-background

Usage

The background images are retrieved from the assets/img directory.

Basic usage

The component can be used to setup a background image that responds to scroll events:

<template>
    <parallax-background
      :bg-img="bgImg" 
      :friction="friction"
      fixed // Optional fixed attribute to set position to fixed
      speedFactor="0.8"
      event-type="scroll"
      height="70"
    />
    ...
</template>
<script>
import ParallaxBackground from "@/components/ParallaxBackground/ParallaxBackground";
export default {
  name: "SomeComponent",
  components: { ParallaxBackground },
  data: () => ({
    bgImg: "geo building.jpg",
    friction: 1 / 1000
  })
};
</script>

Mouse movement

It can respond to mouse movement over the component itself:

<template>
    <parallax-background
      class="parallaxBg"
      :bg-img="bgImg"
      :friction="friction"
      speedFactor="0.8"
      event-type="mousemove"
      height="70"
    />
</template>
<script>
import ParallaxBackground from "@/components/ParallaxBackground/ParallaxBackground";
export default {
  name: "LandingPage",
  components: { ParallaxBackground },
  data: () => ({
    bgImg: "geo building.jpg",
    friction: 1 / 1000
  })
};
</script>

Gradients

You can pass in gradients to be used alone, or to be layered on-top of your image! Just put the CSS as a string into an array and pass them into the component with property binding:

<template>
    <parallax-background
      class="parallaxBg"
      :bg-img="bgImg"
      :friction="friction"
      speedFactor="0.8"
      :gradients="gradients"
      event-type="mousemove"
      height="70"
    />
</template>
<script>
import ParallaxBackground from "@/components/ParallaxBackground/ParallaxBackground";
export default {
  name: "LandingPage",
  components: { ParallaxBackground },
  data: () => ({
    bgImg: "geo building.jpg",
    friction: 1 / 1000,
    gradients: [
      "radial-gradient(closest-side,rgba(52, 121, 182, 0.2), rgba(8, 8, 8, 0.4))",
      "linear-gradient(to bottom, rgba(52, 121, 182, 0.4), rgb(8, 8, 8))"
    ]
  })
};
</script>

Pass content into the component

You can use the content slot to pass content into the component that will be layered on top of the image:

<template>
    <parallax-background
      class="parallaxBg"
      :bg-img="bgImg"
      :friction="friction"
      speedFactor="0.8"
      :gradients="gradients"
      event-type="mousemove"
      height="70"
    >
        <template v-slot:content>
            <article style="padding-top: 10em;">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget sit
                amet tellus cras adipiscing enim. Nunc lobortis mattis aliquam
                faucibus purus in massa. Rutrum quisque non tellus orci ac auctor. A
                lacus vestibulum sed arcu. Enim ut tellus elementum sagittis vitae
                et. Dui id ornare arcu odio.
            </article>
        </template>
</template>
<script>
import ParallaxBackground from "@/components/ParallaxBackground/ParallaxBackground";
export default {
  name: "LandingPage",
  components: { ParallaxBackground },
  data: () => ({
    bgImg: "geo building.jpg",
    friction: 1 / 1000,
    gradients: [
      "radial-gradient(closest-side,rgba(52, 121, 182, 0.2), rgba(8, 8, 8, 0.4))",
      "linear-gradient(to bottom, rgba(52, 121, 182, 0.4), rgb(8, 8, 8))"
    ]
  })
};
</script>

Props

| Prop | Type | Description | |------------- |--------- |------------------------------------------------------------------------------------------------------------------------------------------ | | bgImg | String | Name of the image to lookup including the file type. Must be located in @/assets/img | | breakpoint | String | Used to control breakpoints in the page, which handles the scroll listener adding and removal for page resizing | | direction | String | Determines which direction the parallax should work on; moves the image "up" or "down" | | eventType | String | Can be either "mousemove" or "scroll". Determines what event the parallax effect works with | | fixed | Boolean | If present, determines if the background image is fixed or not | | friction | Number | Friction co-efficient. Ex) 1/1000. Used by mousemove events, determines how responsive the image is to mouse movement | | gradients | Array | An array of CSS gradients, as strings. These can be used without a background image, or in conjunction with one | | height | String | Height of the containing element for the image. Pass in the raw number, and it is converted to the "vh" equivalent | | speedFactor | Number | Used with the scroll event, determines how quickly the image moves in response to page scrolling. Higher numbers equate to more movement |