0.5.9 • Published 6 years ago
vue-autotyper v0.5.9
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
- 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 */ }
}
{ ... },
{ ... }
.
.
.
]
}
}
}
}
- Setup Template Part
<div style="width: 600px; height: 600px;">
<VueAutotyper v-bind:data="autotyper_data"></VueAutotyper>
</div>
Examples
- 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"
}
]
}
}
}
}
- 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
}
}
]
}
}
}
}
- 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