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