Scatter Background

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

• Scatter Button
  • Prerequisites
  • Installation
  • Getting Started
    • Codepen Demo
    • Slotted Content
  • Available Props
    • columns
    • rows
    • disableReposition
    • distanceRange
    • distanceUnit
    • scaleMin
    • scaleMax
  • Changing Default Styling
    • CSS Variables
  • Authors
  • License

Prerequisites

Requires Vue 3

Installation

npm i @ecl-design/scatter-background

Getting Started

Importing and using the component:

<script>
  import ScatterBackground 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-background {
    --scatter-node-grouped-color: red;
    --scatter-node-spread-color: blue;
  }

</style>

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 background has horizontally.

rows

• Type: number
• Default: 4
• Description: The number of nodes the background has 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 background 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.

enforceCircularNodes

• Type: boolean
• Default: false
• Description: Enforces a square aspect ratio on scattered nodes (when not hovered), meaning they do not reflect the ratio of the parent container and instead appear circular.

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.

Styles 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 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-background-padding: 0.3rem 1rem

//background of the background when not covered with nodes
--scatter-background-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