README

Pointer

Create an alternate pointer in your interface, or a specific pointer for a button. This directive makes it easily possible by adding it to the element. The directive throws you back two custom-properties which you can use to animate anything.

Install

Install the package

npm install @sil/pointer

Import the package

import Pointer from '~/@sil/pointer

Define the component:

Vue.directive(Pointer);

Use the component with default values:

<any-element v-pointer />

About

When the directive is added, it will give you back a --x and a --y which are the values of your pointer relative to the viewport. You can use for instance for a pointer or animated background.

Options

By default the directive will return you with the current x and why on the page.

option	default	description
center	false	Calculate the value based on the center of the element
box	`element`	Calculate values based on either the `element`, `viewport` or the whole `page`
type	`pixel`	See below
min	null	Minimum return value for x and y
min_x	null	Minimum return value for x
min_y	null	Minimum return value for y
max	null	Maximum return value for x and y
max_x	null	Maximum return value for x
max_y	null	Maximum return value for y
var_x	`--x`	Property name for X to place value on.
var_y	`--y`	Property name for Y to place value on.

Type options:

type	output
default: pixel	Returns a value in pixels
percentage	Returns a value in percentage
scale	Returns a value between 0 to 1

Percentage

You can also choose type percentage, in this case directive will return the position of the pointer relative to the element which has the directive. When pointing in the ultimate center of the element the --x and --y will be 50%.

<any-element v-pointer="{ type: 'percentage' }">

Min / Max values

Give a min and max value to make sure the value doesn't go over the top.

<any-element v-pointer="{ type: 'percentage', min: 0, max: 100 }">

In this case the pointer won't give any value bigger than 100% and smaller than 0%.

Custom variables

By default the directive returns you a --x and --y. You can alter these by setting: (Make sure you add the -- otherwise your custom property won't work. )

<any-element v-pointer="{ x_var: '--horizontal', y_var: '--vertical' }">

This will return:

<any-element style="--horizontal: 50%; --vertical: 50%">

Examples

Button Background

<button v-pointer>Hoi</button>

button {
    display: inline-block;
    padding: 1rem 2rem;

    background-color: blue;
    border: none;

    font-family: sans-serif;
    font-size: 1rem;
    color: white;
}
button::before {
    content: '';

    position: absolute;
    top: var(
        --y,
        50%
    ); /* --y comes from the directive, the 50% is just a fallback */
    left: var(--x, 50%);

    display: block;
    width: 200%;
    height: 200%;

    background-image: radial-gradient(
        closest-side,
        rgba(0, 0, 0, 1),
        rgba(0, 0, 0, 0)
    );
}

Body Pointer

With this your pointer will be just a black dot.

<body v-pointer>
    <!-- Your html here -->
</body>

body {
    pointer: none;
}
body::before {
    content: '';

    position: absolute;
    top: var(
        --y,
        50%
    ); /* --y comes from the directive, the 50% is just a fallback */
    left: var(--x, 50%);

    display: block;
    width: 1rem;
    height: 1rem;

    background-image: radial-gradient(
        closest-side,
        rgba(0, 0, 0, 1) 100%,
        rgba(0, 0, 0, 0)
    );
}

Usage no npm install needed!