vue-autotyper

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.

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.

Lıcence

MIT © Bedirhan Karadoğan