wtc-perspective-card
v2.7.0
wtc-perspective-card provides a way to create a fake 3d card animation.
12/weekUpdated 3 years agoMITUnpacked: 104.6 KB
Published by Liam Egan
npm install wtc-perspective-cardWTC Perspective Card
wtc-perspective-card provides a way to create a fake 3d card animation.
Installation
``sh`
$ npm install wtc-perspective-card
Demo
https://codepen.io/shubniggurath/pen/99df48ac9073736b0bbf5bd0e062a096?editors=0110
Usage
Import it into your project.
`javascript`
import PerspectiveCard from "wtc-perspective-card";
Import the stylesheet with sass or use the css file.
`scss`
@import "~wtc-perspective-card";
Add your markup.
`html`
/>
/>
You now have 2 options to initalize the component.
$3
#### 1. Using The Decorator function
If you are using just add data-decorator="PerspectiveCard" to your markup.
`html`
And then write your decorator code to take a set of DOM elements and decorate them with the class
`javascript`
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
`javascript`
const controllers = decorate(
PerspectiveCard,
document.querySelectorAll('[data-decorator="PerspectiveCard"]')
);
#### 2. Vanilla JS
Plain vanilla javascript with ES6 and module imports.
`javascript`
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__shineThis 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()
* .pointerMove(e)
* .pointerEnter(e)
* .pointerLeave(e)
* .resize(e)
* .intersect(entries, observer) ⇒
* _static_
* .targetTo(eye, center, up) ⇒ mat4
$3
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 |
$3
(getter/setter) The motion valueKind: instance property of PerspectiveCard
Default: true
$3
(getter/setter) The element valueKind: instance property of PerspectiveCard
Default: null
$3
(getter/setter) The position of the element relative to the viewport.Kind: instance property of PerspectiveCard
Default: [0, 0]
$3
(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]
$3
(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]
$3
(getter/setter) The 3D point that the card sits at.Kind: instance property of PerspectiveCard
Default: [0, 0, 0]
$3
(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]
$3
(getter/setter) The target zoom valueKind: instance property of PerspectiveCard
Default: 40
$3
(getter/setter) The intensity for the ambient animation.Kind: instance property of PerspectiveCard
Default: 10
$3
(getter/setter) The size of the element.Kind: instance property of PerspectiveCard
Default: [0, 0]
$3
(getter/setter) Debug setting.Kind: instance property of PerspectiveCard
Default: false
$3
(getter/setter) Ambient setting.
Setting to tru will automatically animate the card.Kind: instance property of PerspectiveCard
Default: false
$3
(getter/setter) The axis of the element relative to the top-left point.Kind: instance property of PerspectiveCard
Default: [0, 0]
$3
(getter/setter) Whether the simulation is playing. Setting this to
true will start up a requestAnimationFrame with the method.Kind: instance property of PerspectiveCard
Default: false
$3
(getter/setter) The amount of time the last frame tookKind: instance property of PerspectiveCard
Default: 0
$3
(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
$3
(getter/setter) The animation's last frame delta delta.Kind: instance property of PerspectiveCard
Default: 0
$3
(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
$3
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.Kind: instance method of PerspectiveCard
Access: public
| Param | Type | Default | Description |
| --- | --- | --- | --- |
| delta | number | | The delta of the animation |
| raf | boolean | true | This just determines whether to run the next RAF as a part of this call |
$3
Calculates the difference between the look point and the look point targetKind: instance method of PerspectiveCard
Access: public
$3
The event listener for the pointer move event.
This sets the target point to a value based on the pointer's positionKind: instance method of PerspectiveCard
Access: public
| Param | Type | Description |
| --- | --- | --- |
| e | event | The pointer event object |
$3
The event listener for the pointer enter event
This sets the pointerControlled property to true, updates the target
zoom and adds the class perspective-card--over to the element.Kind: instance method of PerspectiveCard
Access: public
| Param | Type | Description |
| --- | --- | --- |
| e | event | The pointer event object |
$3
The event listener for the pointer leave event
This sets the pointerControlled property to false, updates the
target zoom and removes the class perspective-card--over to the element.Kind: instance method of PerspectiveCard
Access: public
| Param | Type | Description |
| --- | --- | --- |
| e | event | The pointer event object |
$3
The event listener for the resize and scroll events
This updates the position and size of the element and sets the
axis for use in animation. This is bound to a debouncer so that
it doesn't get called a hundred times when scrolling or
resizing.Kind: instance method of PerspectiveCard
Access: public
| Param | Type | Description |
| --- | --- | --- |
| e | event | The pointer event object |
$3
Listener for the intersection observer callbackKind: instance method of PerspectiveCard
Returns: void
Access: public
| Param | Type | Description |
| --- | --- | --- |
| entries | object | the object that contains all of the elements being calculated by this observer |
| observer | object | the observer instance itself |
$3
Generates a matrix that makes something look at something else.Kind: static method of PerspectiveCard
Returns: mat4 - out
| Param | Type | Description |
| --- | --- | --- |
| eye | vec3 | Position of the viewer |
| center | vec3 | Point the viewer is looking at |
| up | vec3 | vec3 pointing up |
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.Kind: global class
Extends: PerspectiveCard
Created: Jan 28, 2020
Version: 2.0.0
Author: Liam Egan
Todo
- [ ] Add some extra functionality here like a close button and keyboard close
* ClickablePerspectiveCard ⇐ PerspectiveCard
* new ClickablePerspectiveCard(element, settings)
* .enlarged : Boolean
* .tweening : Boolean
* .tweenTime : Number
* .tweenDuration : Number
* .onEndTween : function
* .targetPosition : Vec2 \| Array
* .screenPosition : Vec2 \| Array
* .screenScale : Number
* .targetDimensions : Vec2 \| Array
* .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
* .resize(e)
* .play(delta, raf)
* .calculateLookDifferential()
* .pointerMove(e)
* .pointerEnter(e)
* .pointerLeave(e)
* .intersect(entries, observer) ⇒
$3
The ClickablePerspectiveCard 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 |
$3
(getter/setter) Whether the card is enlarged or not. This is a BIG
setter and is really responsible for generating the tweening values
setting up the tween and initialising it.Kind: instance property of ClickablePerspectiveCard
Default: false
$3
(getter/setter) Whether the card is in a tweening state. This just
enforces a boolean value.Kind: instance property of ClickablePerspectiveCard
Default: false
$3
(getter/setter) The current tween time.Kind: instance property of ClickablePerspectiveCard
Default: 0
$3
(getter/setter) The current tween duration.Kind: instance property of ClickablePerspectiveCard
Default: 0
$3
(getter/setter) The function to call when the tween ends.Kind: instance property of ClickablePerspectiveCard
Default: null
$3
(getter/setter) The target position on-screen for the card.Kind: instance property of ClickablePerspectiveCard
Default: [0,0]
$3
(getter/setter) The current position on-screen for the card.
This also updates the element's styles left and top. So this
should only be set during a tween.Kind: instance property of ClickablePerspectiveCard
Default: [0,0]
$3
(getter/setter) The card's current scale value.Kind: instance property of ClickablePerspectiveCard
Default: 0
$3
(getter/setter) The target dimensions for the card.Kind: instance property of ClickablePerspectiveCard
Default: [0,0]
$3
(getter/setter) The motion valueKind: instance property of ClickablePerspectiveCard
Default: true
Overrides: motionOff
$3
(getter/setter) The element valueKind: instance property of ClickablePerspectiveCard
Default: null
Overrides: element
$3
(getter/setter) The position of the element relative to the viewport.Kind: instance property of ClickablePerspectiveCard
Default: [0, 0]
Overrides: position
$3
(getter/setter) The 3D target look point. This is the point that the
look point will animate towards.Kind: instance property of ClickablePerspectiveCard
Default: [0, 0, -800]
Overrides: tPoint
$3
(getter/setter) The 3D look point. This is the point that the card
look look at.Kind: instance property of ClickablePerspectiveCard
Default: [0, 0, -800]
Overrides: lookPoint
$3
(getter/setter) The 3D point that the card sits at.Kind: instance property of ClickablePerspectiveCard
Default: [0, 0, 0]
Overrides: center
$3
(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 ClickablePerspectiveCard
Default: [0, 0, 0]
Overrides: zoom
$3
(getter/setter) The target zoom valueKind: instance property of ClickablePerspectiveCard
Default: 40
Overrides: zoomSize
$3
(getter/setter) The intensity for the ambient animation.Kind: instance property of ClickablePerspectiveCard
Default: 10
Overrides: intensity
$3
(getter/setter) The size of the element.Kind: instance property of ClickablePerspectiveCard
Default: [0, 0]
Overrides: size
$3
(getter/setter) Debug setting.Kind: instance property of ClickablePerspectiveCard
Default: false
Overrides: debug
$3
(getter/setter) Ambient setting.
Setting to tru will automatically animate the card.Kind: instance property of ClickablePerspectiveCard
Default: false
Overrides: ambient
$3
(getter/setter) The axis of the element relative to the top-left point.Kind: instance property of ClickablePerspectiveCard
Default: [0, 0]
Overrides: axis
$3
(getter/setter) Whether the simulation is playing. Setting this to
true will start up a requestAnimationFrame with the play method.Kind: instance property of ClickablePerspectiveCard
Default: false
Overrides: playing
$3
(getter/setter) The amount of time the last frame tookKind: instance property of ClickablePerspectiveCard
Default: 0
Overrides: lastFrameTime
$3
(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 ClickablePerspectiveCard
Default: 0
Overrides: delta
$3
(getter/setter) The animation's last frame delta delta.Kind: instance property of ClickablePerspectiveCard
Default: 0
Overrides: lastDelta
$3
(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 ClickablePerspectiveCard
Default: false
Overrides: pointerControlled
$3
The event listener for the resize and scroll events
This updates the position and size of the element and sets the
axis for use in animation. This is bound to a debouncer so that
it doesn't get called a hundred times when scrolling or
resizing.Kind: instance method of ClickablePerspectiveCard
Overrides: resize
Access: public
| Param | Type | Description |
| --- | --- | --- |
| e | event | The pointer event object |
$3
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.Kind: instance method of ClickablePerspectiveCard
Overrides: play
Access: public
| Param | Type | Default | Description |
| --- | --- | --- | --- |
| delta | number | | The delta of the animation |
| raf | boolean | true | This just determines whether to run the next RAF as a part of this call |
$3
Calculates the difference between the look point and the look point targetKind: instance method of ClickablePerspectiveCard
Overrides: calculateLookDifferential
Access: public
$3
The event listener for the pointer move event.
This sets the target point to a value based on the pointer's positionKind: instance method of ClickablePerspectiveCard
Overrides: pointerMove
Access: public
| Param | Type | Description |
| --- | --- | --- |
| e | event | The pointer event object |
$3
The event listener for the pointer enter event
This sets the pointerControlled property to true, updates the target
zoom and adds the class perspective-card--over to the element.Kind: instance method of ClickablePerspectiveCard
Overrides: pointerEnter
Access: public
| Param | Type | Description |
| --- | --- | --- |
| e | event | The pointer event object |
$3
The event listener for the pointer leave event
This sets the pointerControlled property to false, updates the
target zoom and removes the class perspective-card--over` to the element.Kind: instance method of ClickablePerspectiveCard
Overrides: pointerLeave
Access: public
| Param | Type | Description |
| --- | --- | --- |
| e | event | The pointer event object |
$3
Listener for the intersection observer callback
Kind: instance method of ClickablePerspectiveCard
Overrides: intersect
Returns: void
Access: public
| Param | Type | Description |
| --- | --- | --- |
| entries | object | the object that contains all of the elements being calculated by this observer |
| observer | object | the observer instance itself |