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);

ClickablePerspectiveCard ⇐ PerspectiveCard

The clickable perspective card adds functionality that allows the zooming the card by clicking on it. In doing so the card flips and animates up to a modal style display.

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()
  - .touchStart()
  - .pointerMove(e)
  - .pointerEnter(e)
  - .pointerLeave(e)
  - .updatePosition(e)
  - .intersect(entries, observer) ⇒
  - .hideIntersect(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.