1.2.1 • Published 2 years ago

@ecl-design/scatter-background v1.2.1

Weekly downloads
-
License
GNU
Repository
-
Last release
2 years ago

Scatter Button

An interactive background made up of scattered points. On hover, the points return to the element to create it's background.

Prerequisites

Requires Vue 3

Installation

npm i @ecl-design/scatter-button

Getting Started

Importing and using the component:

<script>
  import "@ecl-design/scatter-background/style" //REQUIRED
  import ScatterButton from "@ecl-design/scatter-background"

</script>

<template>
  <scatter-background :columns="10"
                      :rows="3"
                      :distance-range="50"
                      distance-unit="rem">
    <div>
      Slotted Element
    </div>
  </scatter-background>
</template>

<style>

  .scatter-button {
    --scatter-node-grouped-color: red;
    --scatter-node-spread-color: blue;
  }

</style>

Remember to import the component styling as well, the scatter effect will not work otherwise.

Codepen Demo

Slotted Content

The component is intended for use as a wrapper element. Other elements can be slotted into the component as shown above.

Available Props

columns

  • Type: number
  • Default: 16
  • Description: The number of nodes the button horizontally.

rows

  • Type: number
  • Default: 4
  • Description: The number of nodes the button vertically.

disableReposition

  • Type: boolean
  • Default: false
  • Description: By default, nodes will reposition themselves every time they scatter, enabling this prop disables that behaviour. Instead, nodes will retain their initial position when scattered.

distanceRange

  • Type: number
  • Default: 150
  • Description: The maximum distance a node will travel away from the button when scattered, use distanceUnit to specify the css unit. The node will pick a random distance between + distanceRange and - distanceRange for both it's x and y positions.

distanceUnit

  • Type: any valid css unit: px, rem, vw, etc.
  • Default: px
  • Description: The unit that distanceRange is measured in.

scaleMin

  • Type: number
  • Default: 0.1
  • Description: The minimum scale that a node will transform to when scattered.

scaleMax

  • Type: number
  • Default: 0.5
  • Description: The maximum scale that a node will transform to when scattered.

Changing Default Styling

The component comes with a number of css variables that can be overridden to change it's styling.

Font size and color are inherited by default.

CSS can also be overridden directly with the vue :deep() selector.

CSS Variables

  //Node color when spread out (not-hovered)
  --scatter-node-spread-color: grey

  //Node color when grouped in button background (hovered)
  --scatter-node-grouped-color: grey

  //Node opacity when spread out
  --scatter-node-spread-opacity: 0.5
  
  //Node opacity when grouped
  --scatter-node-grouped-opacity: 1
  
  //controls the border radius of nodes when spread out, fully round by default
  --scatter-node-border-radius: 100%

  //transition time for transform, color, opacity, and border-radius
  --scatter-node-transition-time: 0.4s
  
  --scatter-button-padding: 0.3rem 1rem
  
  //background of the button when not covered with nodes
  --scatter-button-background: transparent

Authors

This package was created by Elliott Chisholm-Loxley, lead developer at ECL Web Design

License

This project is licensed under the GNU License - see the LICENSE.md file for details

1.2.1

2 years ago

1.2.0

2 years ago

1.1.0

2 years ago

1.0.0

2 years ago