vue-autotyper

An autotyper library for Vue.js based web projects. You can take a look at to the demo from here.

Installation

npm install --save vue-autotyper

Usage

1. Setup Javascript Part

import VueAutotyper from 'vue-autotyper';

export default {
  components: {
    VueAutotyper
  },
  data: function() {
    return {
      autotyper_data: {
        replay: true,
        view: { /* General view model */ },
        timing: { /* General timing model */ },
        content: [
          {
            text: "Text 1"
          },
          {
            text: "Text 2",
            view: { /* View model for this text */ }
          },
          {
            text: "Text 3",
            timing: { /* Timing model for this text */ }
          }
          { ... },
          { ... }
          .
          .
          .
        ]
      }
    }
  }
}

2. Setup Template Part

<div style="width: 600px; height: 600px;">
  <VueAutotyper v-bind:data="autotyper_data"></VueAutotyper>
</div>

Examples

1. Example

<div style="width: 600px; height: 600px;">
  <VueAutotyper v-bind:data="autotyper_data"></VueAutotyper>
</div>

import VueAutotyper from 'vue-autotyper';

export default {
  components: {
    VueAutotyper
  },
  data: function() {
    return {
      autotyper_data: {
        replay: true,
        content: [
          {
            text: "Text 1"
          },
          {
            text: "Text 2",
          },
          {
            text: "Text 3"
          }
        ]
      }
    }
  }
}

2. Example

<div style="width: 600px; height: 600px;">
  <VueAutotyper v-bind:data="autotyper_data"></VueAutotyper>
</div>

import VueAutotyper from 'vue-autotyper';

export default {
  components: {
    VueAutotyper
  },
  data: function() {
    return {
      autotyper_data: {
        replay: true,
        content: [
          {
            text: "Text 1"
          },
          {
            text: "Text 2",
            view: {
              font: {
                size: '10px'
              }
            }
          },
          {
            text: "Text 3",
            timing: {
              typing_speed: 10,
              duration: 5000
            }
          }
        ]
      }
    }
  }
}

3. Example

<div style="width: 600px; height: 600px;">
  <VueAutotyper v-bind:data="autotyper_data"></VueAutotyper>
</div>

import VueAutotyper from 'vue-autotyper';

export default {
  components: {
    VueAutotyper
  },
  data: function() {
    return {
      autotyper_data: {
        replay: true,
        view: {
          font: {
              family: 'monospace',
              size: '30px',
              color: '#ffffff'
          },
          background: {
              color: '#000000',
              image: {
                  url: 'https://bedirhankaradogan.github.io/demos/vue-autotyper/assets/images/city.png'
              },
              layer: {
                  color: '#000000',
                  opacity: 0.7
              }
          }
        },
        timing: {
          typing_speed: 200,
          deleting_speed: 50,
          duration: 3000
        },
        content: [
          {
            text: "Text 1",
            view: {
              text_align: {
                  vertical: 'top',
                  horizontal: 'left'
              },
              background: {
                  layer: {
                      color: 'purple'
                  }
              }
            }
          },
          {
            text: "Text 2"
          },
          {
            text: "Text 3",
            view: {
              text_align: {
                  vertical: 'bottom',
                  horizontal: 'right'
              },
              background: {
                  layer: {
                      color: 'purple'
                  }
              }
            }
          }
        ]
      }
    }
  }
}

Data Model

data: {
  replay: true,
  view: { /* General view model */ },
  timing: { /* General timing model */ },
  content: [
    {
      text: "Text 1"
    },
    {
      text: "Text 2",
      view: { /* View model for this text */ }
    },
    {
      text: "Text 3",
      timing: { /* Timing model for this text */ }
    }
    { ... },
    { ... }
    .
    .
    .
  ]
}

View Model

Default view model is as follows.

view: {
  indent: {
    top: '20px',
    bottom: '20px',
    left: '20px',
    right: '20px'
  },
  font: {
    family: 'sans-serif',
    size: '20px',
    color: '#000000'
  },
  text_align: {
    vertical: 'center',
    horizontal: 'center'
  },
  background: {
    color: '#ffffff',
    image: {
      url: '',
      positionX: 'center',
      positionY: 'center'
    },
    layer: {
      color: '',
      opacity: 0.5
    }
  }
}

You can see detailed explaination of the view model in the table below.

| Property | Description | Default Value | Type | Expected Values | Example | | --- | --- | :---: | :---: | :---: | :---: | | indent.top | Indent of the autotyper from top | 20px | String | Any CSS top value | 50%, 30px, 20vh etc | | indent.bottom | Indent of the autotyper from bottom | 20px | String | Any CSS bottom value | 50%, 30px, 20vh etc | | indent.left | Indent of the autotyper from left | 20px | String | Any CSS left value | 50%, 30px, 20vh etc | | indent.right | Indent of the autotyper from right | 20px | String | Any CSS right value | 50%, 30px, 20vh etc | | font.family | Font family of the autotyper text | sans-serif | String | Any CSS font-family value | monospace, tahoma, arial etc | | font.size | Font size of the autotyper text | 20px | String | Any CSS font-size value | 50%, 30px, 20vh etc | | font.color | Color of the autotyper text | #000000 | String | Any CSS color value | #ffffff, purple, yellow etc | | text_align.vertical | Vertical align of the autotyper text | center | String | top, bottom, center | Only expected values | | text_align.horizontal | Horizontal align of the autotyper text | center | String | left, right, center | Only expected values | | background.color | Background color of the autotyper | #ffffff | String | Any CSS color value | #000000, purple, yellow etc | | background.image.url | Background image url of the autotyper | empty | String | Any url value | Any url value | | background.image.positionX | Background image position of the autotyper on X axis | center | String | Any CSS background-position-x value | left, right, top etc | | background.image.positionY | Background image position of the autotyper on Y axis | center | String | Any CSS background-position-y value | left, right, top etc | | background.layer.color | Background layer color of the autotyper | empty | String | Any CSS color value | #ffffff, purple, yellow etc | | background.layer.opacity | Background layer opacity of the autotyper | 0.5 | Integer | Any CSS opacity value | 1, 0.7, 0.3 etc |

Timing Model

Default timing model is as follows.

timing: {
  typing_speed: 100,
  deleting_speed: 20,
  duration: 2000
}

You can see detailed explaination of the timing model in the table below.

| Property | Description | Default Value | Type | Expected Values | Example | | --- | --- | :---: | :---: | :---: | :---: | | typing_speed | Typing speed of the autotyper in ms | 100 | Integer | Any integer value | 10, 200, 300 etc | | deleting_speed | Deleting speed of the autotyper in ms | 20 | Integer | Any integer value | 10, 200, 300 etc | | duration | Duration time of the autotyper in ms after typing finishes | 2000 | Integer | Any integer value | 3000, 5000, 10000 etc |

Lıcence

MIT © Bedirhan Karadoğan