@donkeyclip/motorcortex-slides

v2.0.2

Published

4 years ago

Slides plugin for MotorCortex

0High
0Medium
0Low

atrantidis

alexdor

prieston

motorcortex animation

MotorCortex-Slides

Table of Contents

Demo

Check it out here

Intro / Features

With MotorCortex-slides you can easily create attractive slideshows.

This Plugin exposes ten Incident:

Intro
Transition
SlideDateOneVid
Scrollslide
LtRslide
SlideDateTwo
BtTslide
BtTslideDate
LtRslideTop
RtLslide

Getting Started

Installation

$ npm install --save @donkeyclip/motorcortex-slides
# OR
$ yarn add @donkeyclip/motorcortex-slides

Importing and loading

import { loadPlugin } from "@donkeyclip/motorcortex";
import slides from "@donkeyclip/motorcortex-slides";
const SlidesPlugin = loadPlugin(slides);

Creating Incidents

Intro

const introClip = new Clip.Intro(
  {
    title: "Demo",
    subtitle: "Promo Plugin",
    description: `Lorem ipsum dolor, sit amet consectetur adipisicing elit. Totam
    eveniet eosdsdawdw numquam facilis libero iure natus, voluptatibus
    deserunt laboriosam, perspiciatis consequatur nostrum.`,
    month: "December",
    bgUrl:
      "https://donkeyclip.github.io/motorcortex-slides/demo/assets/kissmybutonbg.jpg",
    overlayColor: ["#101820D7", "#101820FF"],
    mainColor: "#FEE715FF",
  },
  {
    selector: ".container1",
  }
);

Intro Attrs

| Name | Are | Values | | ------------ | :-----------------------------------: | ------------------------------------------------: | | title | title text | string | | subtitle | subtitle text | string | | description | description text | string | | month | the month | string | | bgUrl | the path of background image | string | | overlayColor | the overlay color of background image | hex values or RGB(A) or text ("blue", "red", etc) | | mainColor | the main color of elements | hex values or RGB(A) or text ("blue", "red", etc) |

Transition

const transition = new Clip.Transition(
  {
    title: "test",
    speed: 2,
  },
  {
    selector: ".container2",
  }
);

Transition Attrs

| Name | Are | Values | | ----- | :----------------------------: | ---------: | | title | title text | string | | speed | animation speed. Defaults to 1 | num, min:0 |

SlideDateOneVid

new Clip.SlideDateOneVid(
  {
    title: ["the", "MOTORCORTEX TEAM", "Presents"],
    description: `Lorem ipsum dolor, sit amet consectetur adipisicing elit. Totam
    eveniet eosdsdawdw numquam facilis libero iure natus, voluptatibus
    deserunt laboriosam, perspiciatis consequatur nostrum.`,
    bgUrl:
      "https://donkeyclip.github.io/motorcortex-slides/demo/assets/kissmybutonbg.jpg",
    overlayColor: ["#101820D7", "#101820FF"],
    mainColor: "#FEE715FF",
    bgUrl2:
      "https://donkeyclip.github.io/motorcortex-slides/demo/assets/bg2.jpg",
    month: "December",
    day: `monday`,
    dayNumber: 20,
    year: 2019,
    vidDuration: 6000,
    vidLink: [
      "https://donkey-spaces.ams3.digitaloceanspaces.com/assets/motorcortex-slides/vid.mp4",
    ],
  },
  {
    selector: ".container3",
  }
);

SlideDateOneVid Attrs

| Name | Are | Values | | ------------ | :-----------------------------------: | ------------------------------------------------: | | title | title text | string | | subtitle | subtitle text | string | | description | description text | string | | month | the month | string | | day | the day name | string | | number | the number of day | string | | year | the year | string | | bgUrl | the path of background image | string | | bgUrl2 | the path of second background image | string | | overlayColor | the overlay color of background image | hex values or RGB(A) or text ("blue", "red", etc) | | mainColor | the main color of elements | hex values or RGB(A) or text ("blue", "red", etc) | | speed | animation speed. Defaults to 1 | num, min:0 |

Scrollslide

const scrolPresenter = new Clip.Scrollslide(
  {
    title: "Presenter",
    name: "name surname",
    position: "Web developer at kissmybuton",
    bgUrl:
      "https://donkeyclip.github.io/motorcortex-slides/demo/assets/bg3.jpg",
    overlayColor: ["#101820D7", "#101820FF"],
    mainColor: main,
  },
  {
    selector: ".container4",
  }
);

Scrollslide Attrs

| Name | Are | Values | | ------------ | :-----------------------------------: | ------------------------------------------------: | | title | title text | string | | name | second title | string | | position | subtitle | string | | bgUrl | the path of background image | string | | overlayColor | the overlay color of background image | hex values or RGB(A) or text ("blue", "red", etc) | | mainColor | the main color of elements | hex values or RGB(A) or text ("blue", "red", etc) | | speed | animation speed. Defaults to 1 | num, min:0 |

LtRslide

const ltrPresenter = new Clip.LtRslide(
  {
    title: "Presenter",
    name: "name surname",
    position: "Web developer at kissmybuton",
    bgUrl:
      "https://donkeyclip.github.io/motorcortex-slides/demo/assets/bg4.jpg",
    overlayColor: ["#101820D7", "#101820FF"],
    mainColor: main,
  },
  {
    selector: ".container6",
  }
);

LtRslide Attrs

SlideDateTwo

const dayTwo = new Clip.SlideDateTwo(
  {
    title: "Presenter",
    name: "name surname",
    position: "Web developer at kissmybuton",
    bigTitle: "Event",
    bgUrl:
      "https://donkeyclip.github.io/motorcortex-slides/demo/assets/bg5.jpg",
    overlayColor: ["#101820D7", "#101820FF"],
    dateOverlay: "#ff00b3",
    mainColor: "#00ff40",
    bgUrl2:
      "https://donkeyclip.github.io/motorcortex-slides/demo/assets/bg2.jpg",
    month: "December",
    day: `monday`,
    dayNumber: 22,
    year: 2019,
  },
  {
    selector: ".container7",
  }
);

SlideDateTwo Attrs

| Name | Are | Values | | ------------ | :--------------------------------------------------------------------------: | ------------------------------------------------: | | title | title text | string | | bigTitle | big title title text | string | | name | second title | string | | position | (secondary subtitle, can used to describe the job position of the presenter) | string | | month | the month | string | | day | the day name | string | | number | the number of day | string | | year | the year | string | | bgUrl | the path of background image | string | | bgUrl2 | the path of second background image | string | | overlayColor | the overlay color of background image | hex values or RGB(A) or text ("blue", "red", etc) | | dateOverlay | the overlay color of date container | hex values or RGB(A) or text ("blue", "red", etc) | | mainColor | the main color of elementes | hex values or RGB(A) or text ("blue", "red", etc) | | speed | animation speed. Defaults to 1 | num, min:0 |

BtTslide

const bttPresenter = new Clip.BtTslide(
  {
    title: "Presenter",
    name: "name surname",
    position: "Web developer at kissmybuton",
    bgUrl:
      "https://donkeyclip.github.io/motorcortex-slides/demo/assets/bg4.jpg",
    overlayColor: ["#101820D7", "#101820FF"],
    mainColor: main,
  },
  {
    selector: ".container10",
  }
);

BtTslide Attrs

BtTslideDate

const bttDay = new Clip.BtTslideDate(
  {
    title: "PresenterTEST",
    name: "name surname",
    position: "Web developer at kissmybuton",
    bgUrl:
      "https://donkeyclip.github.io/motorcortex-slides/demo/assets/bg3.jpg",
    overlayColor: ["#101820D7", "#101820FF"],
    dateOverlay: "#ff00b3",
    mainColor: "#00ff40",
    bgUrl2:
      "https://donkeyclip.github.io/motorcortex-slides/demo/assets/bg2.jpg",
    month: "December",
    day: `monday`,
    dayNumber: 21,
    year: 2019,
  },
  {
    selector: ".container16",
  }
);

BtTslideDate Attrs

| Name | Are | Values | | ------------ | :-----------------------------------: | ------------------------------------------------: | | title | title text | string | | name | second title | string | | position | subtitle | string | | month | the month | string | | day | the day name | string | | number | the number of day | string | | year | the year | string | | bgUrl | the path of background image | string | | bgUrl2 | the path of second background image | string | | overlayColor | the overlay color of background image | hex values or RGB(A) or text ("blue", "red", etc) | | dateOverlay | the overlay color of date container | hex values or RGB(A) or text ("blue", "red", etc) | | mainColor | the main color of elementes | hex values or RGB(A) or text ("blue", "red", etc) | | speed | animation speed. Defaults to 1 | num, min:0 |

LtRslideTop

const ltrPresenterTop = new Clip.LtRslideTop(
  {
    title: "Presenter",
    name: "JOE SMO",
    position: "Web developer at KissMyButton",
    bgUrl: "./bg2.jpg",
    overlayColor: ["#101820D7", "#101820FF"],
    mainColor: "blue",
    speed: 2,
  },
  {
    selector: ".container11",
  }
);

LtRslideTop Attrs

| Name | Are | Values | | ------------ | :-----------------------------------: | ------------------------------------------------: | | title | title text | string | | name | second title | string | | position | subtitle | string | | bgUrl | the path of background image | string | | overlayColor | the overlay color of background image | hex values or RGB(A) or text ("blue", "red", etc) | | mainColor | the main color of elementes | hex values or RGB(A) or text ("blue", "red", etc) | | speed | animation speed. Defaults to 1 | num, min:0 |

RtLslide

const rtlPresenter = new Clip.RtLslide(
  {
    title: "Presenter",
    name: "JOE SMO",
    position: "Web developer at KissMyButton",
    bgUrl: "./bg4.jpg",
    overlayColor: ["#101820D7", "#101820FF"],
    mainColor: "blue",
    speed: 2,
  },
  {
    selector: ".container4",
  }
);

RtLslide Attrs

| Name | Are | Values | | ------------ | :-----------------------------------: | ------------------------------------------------: | | title | title text | string | | name | second title | string | | position | subtitle | string | | bgUrl | the path of background image | string | | overlayColor | the overlay color of background image | hex values or RGB(A) or text ("blue", "red", etc) | | mainColor | the main color of elementes | hex values or RGB(A) or text ("blue", "red", etc) | | speed | animation speed. Defaults to 1 | num, min:0 |

Adding Incidents in your clip

clipName.addIncident(incidentName, startTime);

Contributing

In general, we follow the "fork-and-pull" Git workflow, so if you want to submit patches and additions you should follow the next steps:

Fork the repo on GitHub
Clone the project to your own machine
Commit changes to your own branch
Push your work back up to your fork
Submit a Pull request so that we can review your changes

License

MIT License