Wtc-perspective-card NPM

WTC Perspective Card

wtc-perspective-card provides a way to create a fake 3d card animation.

Installation

$ npm install wtc-perspective-card

Demo

https://codepen.io/shubniggurath/pen/99df48ac9073736b0bbf5bd0e062a096?editors=0110

Usage

Import it into your project.

import PerspectiveCard from "wtc-perspective-card";

Import the stylesheet with sass or use the css file.

@import "~wtc-perspective-card";

Add your markup.

<div class="card">
  <div class="card__transformer">
    <div class="card__artwork card__artwork--front">
      <img
        src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/982762/9b1b5b5-1.png"
      />
    </div>
    <div class="card__artwork card__artwork--rear">
      <img
        src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/982762/pokemon_card_backside_in_high_resolution_by_atomicmonkeytcg_dah43cy-fullview.png"
      />
    </div>
    <div class="card__shine"></div>
  </div>
</div>

You now have 2 options to initalize the component.

Instanciating

1. Using The Decorator function

If you are using just add data-decorator="PerspectiveCard" to your markup.

<div class="perspective-card" data-decorator="PerspectiveCard">
  <img class="perspective-card__img" src="path/image.jpg" />
</div>

And then write your decorator code to take a set of DOM elements and decorate them with the class

const decorate = function (decorator, nodeSet) {
  const controllers = [];
  Array.from(nodeSet).forEach((node) => {
    const controller = new decorator(node, node.dataset);
    node.data = node.data || {};
    node.data.controller = controller;
    controllers.push(controller);
  });
  return controllers;
};

Then feed your DOM elements to the decorator code

const controllers = decorate(
  PerspectiveCard,
  document.querySelectorAll('[data-decorator="PerspectiveCard"]')
);

2. Vanilla JS

Plain vanilla javascript with ES6 and module imports.

const card = new PerspectiveCard(document.getElementById("card"));

Classes

PerspectiveCard

This sets up the basic perspective card. This class expects markup at least conforming to:

.perspective-card
  .perspective-card__transformer
    .perspective-card__artwork.perspective-card__artwork--front
      img
    .perspective-card__artwork.perspective-card__artwork--back
      img
    .perspective-card__shine

This class is designed to be used with a decorator function (provided by the new wtc-decorator static class) or used directly like:

const p = new PerspectiveCard(element);

Kind: global class

PerspectiveCard
- new PerspectiveCard(element, settings)
- instance
  - .motionOff : boolean
  - .element : HTMLElement
  - .position : Array
  - .tPoint : Array
  - .lookPoint : Array
  - .center : Array
  - .zoom : Array
  - .zoomSize : Number
  - .intensity : Number
  - .size : Array
  - .debug : Boolean
  - .ambient : Boolean
  - .axis : Array
  - .playing : Boolean
  - .lastFrameTime : Number
  - .delta : Number
  - .lastDelta : Number
  - .pointerControlled : Boolean
  - .play(delta, raf)
  - .calculateLookDifferential()
  - .pointerMove(e)
  - .pointerEnter(e)
  - .pointerLeave(e)
  - .resize(e)
  - .intersect(entries, observer) ⇒
- static
  - .targetTo(eye, center, up) ⇒ mat4

new PerspectiveCard(element, settings)

The PerspectiveCard constructor. Creates and initialises the perspective card component.

Param	Type	Description
element	HTMLElement	The element that contains all of the card details
settings	Object	The settings of the component

perspectiveCard.motionOff : boolean

(getter/setter) The motion value

Kind: instance property of PerspectiveCard
Default: true

perspectiveCard.element : HTMLElement

(getter/setter) The element value

Kind: instance property of PerspectiveCard
Default: null

perspectiveCard.position : Array

(getter/setter) The position of the element relative to the viewport.

Kind: instance property of PerspectiveCard
Default: 0, 0

perspectiveCard.tPoint : Array

(getter/setter) The 3D target look point. This is the point that the look point will animate towards.

Kind: instance property of PerspectiveCard
Default: 0, 0, -800

perspectiveCard.lookPoint : Array

(getter/setter) The 3D look point. This is the point that the card look look at.

Kind: instance property of PerspectiveCard
Default: 0, 0, -800

perspectiveCard.center : Array

(getter/setter) The 3D point that the card sits at.

Kind: instance property of PerspectiveCard
Default: 0, 0, 0

perspectiveCard.zoom : Array

(getter/setter) The current zoom value. If this is very different to the Z component of the center point, the animation frame will attempt to animate towards this.

Kind: instance property of PerspectiveCard
Default: 0, 0, 0

perspectiveCard.zoomSize : Number

(getter/setter) The target zoom value

Kind: instance property of PerspectiveCard
Default: 40

perspectiveCard.intensity : Number

(getter/setter) The intensity for the ambient animation.

Kind: instance property of PerspectiveCard
Default: 10

perspectiveCard.size : Array

(getter/setter) The size of the element.

Kind: instance property of PerspectiveCard
Default: 0, 0

perspectiveCard.debug : Boolean

(getter/setter) Debug setting.

Kind: instance property of PerspectiveCard
Default: false

perspectiveCard.ambient : Boolean

(getter/setter) Ambient setting. Setting to tru will automatically animate the card.

Kind: instance property of PerspectiveCard
Default: false

perspectiveCard.axis : Array

(getter/setter) The axis of the element relative to the top-left point.

Kind: instance property of PerspectiveCard
Default: 0, 0

perspectiveCard.playing : Boolean

(getter/setter) Whether the simulation is playing. Setting this to true will start up a requestAnimationFrame with the play method.

Kind: instance property of PerspectiveCard
Default: false

perspectiveCard.lastFrameTime : Number

(getter/setter) The amount of time the last frame took

Kind: instance property of PerspectiveCard
Default: 0

perspectiveCard.delta : Number

(getter/setter) The animation delta. We use this and not the RaF delta because we want this to pause when the animation is not running.

Kind: instance property of PerspectiveCard
Default: 0

perspectiveCard.lastDelta : Number

(getter/setter) The animation's last frame delta delta.

Kind: instance property of PerspectiveCard
Default: 0

perspectiveCard.pointerControlled : Boolean

(getter/setter) Whether the card animates based on the position of the pointer. If this is true it will set the pointermove event listener, otherwise it will try to remove it.

Kind: instance property of PerspectiveCard
Default: false

perspectiveCard.play(delta, raf)

This is the main run-loop function. It is responsible for taking the various previously set properies and transforming the card. This can be called individually, or (more commonly) as the callback to a animation frame.