Perstrok.js

Minimal library for creating multiple perspective strokes for texts, that follow mouse movement.

Try the Demo samples.

Features

• Flexible - works for any texts and any types of html tags
• Lightweight - under 12KB minified and gzipped
• Compatible - IE10+ support, mobile support
• No dependencies - written in ES6 JavaScript, no jQuery required

Getting Started

1. Installation
2. Usage
3. Options
4. API / Events
5. Browser Support

Installation

Using NPM

$ npm install perstrok.js --save

jsDelivr CDN

<script src="https://cdn.jsdelivr.net/perstrok.js/1.0.2/perstrok.min.js"></script>

Usage

Perstrok was developed with a modern JavaScript workflow in mind. To use it, it's recommended you have a build system in place that can transpile ES6, and bundle modules.

If you don't have any ES6 workflow setup, you can alternatively use the library in a more "classic" way, by including the minified version of the library into your project. For more details, please refer to the Without ES6 example below.

For more usage examples, please refer to Demo samples.

ES6

Simply import perstrok.js, then instantiate it.

// import perstrok.js
import Perstrok from 'perstrok.js'

// create a new instance
const instance = new Perstrok('#selector', { /* options here */ })

// generate the strokes
instance.init()

Without ES6

Simply include perstrok.min.js into your project, then instantiate it. This can be done either by using the jsDelivr CDN, or by including it from the dist folder.

<!-- include perstrok.min.js -->
<script src="path/to/perstrok.min.js"></script>

// create a new instance
var instance = new Perstrok('#selector', { /* options here */ })

// generate the strokes
instance.init()

Options

Settings overview list:

Perstrok('#selector', {
    strokes: 4,
    thickness: 1,
    distance: 20,
    perspective: 700,
    coeff: 0.5,
    colors: [],
    mousemove: true,
    nowrap: true
})

Option details are detailed below.

Option | Type | Default | Description ---|---|---|--- strokes | integer | 4 | Defines the number of strokes to generate. thickness | integer | 1 | Defines the thickness (in pixels) for the stroke lines. distance | integer | 20 | Specify the distance (in pixels) on the z-axis, to place between each text stroke. perspective | integer | 700 | This property allows you to change the perspective on how the 3D strokes are viewed (refers to CSS3 perspective property). coeff | float | 0.5 | Value between 0 and 1, which defines the coefficient of influence between the mouse and the perspective movement (0 is equal to null / 1 is equal to 100% influence). colors | array | [] | Specify an array of colors to be used for the strokes. The first element will be the closest stroke. Default color will be the same used as your selector color. (e.g. ['#ff9900', 'red', 'rgb(23, 12, 255)']) mousemove | boolean | true | Enable or disable the mouse tracking. If enabled, you'll have access to the additional listener: instance.on('move'). nowrap | boolean | true | If set to true, text will only wrap after or before a whitespace character.

API / Events

Perstrok exposes the following methods, and corresponding events:

• init
• draw
• destroy

Note that all methods are chainable, and all events includes on, off, and once listeners.

.init()

Used to generate the strokes for the text contained within the selector.

// generate the strokes
instance.init()

// 'init' is emitted AFTER the strokes have been generated
instance.on('init', () => {
  // ...
})

.draw(axisX, axisY)

Used to manually draw strokes using a custom perspective point. Parameters axisX and axisY are in pixels. They'll be used as origin point, relative to the center of your selector.

// manually draw strokes
instance.draw(axisX, axisY)

// 'draw' is emitted AFTER the strokes have been drawn
instance.on('draw', () => {
  // ...
})

.destroy()

Used to completely remove the strokes from the selector. Restore the initial state.

// destroy completely the strokes
instance.destroy()

// 'destroy' is emitted AFTER the strokes have been destroyed
instance.on('destroy', () => {
  // ...
})

Browser Support

Perstrok is fully supported by Evergreen Browsers (Edge, Opera, Safari, Firefox & Chrome) and IE 10+ Browsers.

License

MIT © 2016 Sylvain Simao