https://github.com/billiebobbel23/cssvar-interaction

A tiny package to set CSS variabels using some Javascript and device API's.
https://github.com/billiebobbel23/cssvar-interaction

css css-variables event-listener interactive javascript

Last synced: 3 months ago
JSON representation

A tiny package to set CSS variabels using some Javascript and device API's.

• Host: GitHub
• URL: https://github.com/billiebobbel23/cssvar-interaction
• Owner: BillieBobbel23
• Created: 2019-07-07T17:28:07.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T07:35:32.000Z (over 2 years ago)
• Last Synced: 2025-02-21T06:16:19.170Z (3 months ago)
• Topics: css, css-variables, event-listener, interactive, javascript
• Language: JavaScript
• Size: 412 KB
• Stars: 1
• Watchers: 0
• Forks: 0
• Open Issues: 12
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# cssvar-interaction

![npm latest version](https://img.shields.io/npm/v/cssvar-interaction.svg)

![github version](https://img.shields.io/github/package-json/v/billiebobbel23/cssvar-interaction.svg)

![stats](https://img.shields.io/david/dev/billiebobbel23/cssvar-interaction)

![npm bundle size](https://img.shields.io/bundlephobia/minzip/cssvar-interaction.svg)

![npm downloads](https://img.shields.io/npm/dt/cssvar-interaction.svg)

A tiny JS powered NPM package to set/update CSS variables using eventListeners.

## Installation

Install using [Node Package Manager](https://npmjs.com): 

``npm install cssvar-interaction --save`` 

## Usage:

*For examples on CSS variables see the [MDN web docs](https://developer.mozilla.org/en-US/docs/Web/CSS/var)*

* Write some CSS using CSS variable ``--x`` and multiply it by 1 unit of measurement using ``calc()``.

  `` calc( var(--x) * 1px ) ``

* Apply it to a ``transform`` statement with any option:

    `` transform: translateX(calc(var(--x) * 1px));``

* use it on any CSS selector:

  ``` 

  div {

    transition: all linear 1s;  

    transform: translateX(calc(var(--x) * 1px));

  }

  ```

* Include the eventListeners into your document

  Using ```` tags:

  `` <script src="node_modules/cssvar-interation/dist/index.js" /> ``

  Using Javascript ``import``:

  `` import "cssvar-interaction/dist/bundle"; ``

## Values:

The following are some built-in variables:

**eventListeners:**

``--x`` and ``--y`` - current X and Y positions of pointer (within the viewport)

``--s`` Current scroll offset from top of document

**constants:**

``--w`` and ``--h`` - Current document width and height

``--vw`` and ``--vh`` - Viewport width and height

## Examples:

Run `` npm test `` in the root of your project to open an HTML demo page with some examples.