Skip to content

Instantly share code, notes, and snippets.

@Kelier Kelier/.vue
Created Jan 7, 2019

Embed
What would you like to do?
2018の回顾 [typewriter effect]
<template>
<div class="home">
<div class="slogan">2018の回顾 🤦🏻‍♂️</div>
<div class="title shining">点击探索 🍖</div>
<audio style="display:none" id="type"></audio>
<audio style="display:none" id="bg"></audio>
<div id="typedtext"></div>
</div>
</template>
<style lang="less">
#typedtext {
transition: all 0.5s ease;
height: auto;
width: auto;
overflow: scroll;
position: relative;
margin: 0 auto;
padding-top: 3em;
font-family: cursive;
font-size: 14px;
letter-spacing: 1px;
padding-bottom: 20px;
box-sizing: content-box;
}
.slogan {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
font-size: 38px;
font-weight: 100;
font-family: auto;
animation: ease-in 1s ease forwards;
}
.slogan-hide {
animation: ease-out 1s ease-out forwards;
}
.shining {
animation: ease-in 0.8s ease infinite 1.6s alternate-reverse;
}
.title {
opacity: 0;
position: absolute;
top: 60%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
font-weight: 100;
font-family: auto;
color: #666;
}
@keyframes ease-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes ease-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
<script>
import bg from "../assets/bg.mp3";
import type from "../assets/type.wav";
import lords from "../lords/showtime";
const { Howl } = require("howler");
// 展示的文本
const myWords = lords;
export default {
data: () => {
return {
aText: myWords,
// 打印delay的速度
iSpeed: 100,
// 数组开始打印的位置
iIndex: 0,
// 一行文本的长度
iArrLength: myWords[0].length,
// 多行文本滚动限度
iScrollAt: 20,
// 文本标位初始值
iTextPos: 0,
// 初始化占位内容
sContents: '',
// 当前光标所在行
iRow: 0,
// 字符计时器和行数计时器
lTimer: null,
wTimer: null,
};
},
methods: {
/**
* @function 播放音乐
* @param {String} type 音乐类型
* @param {Stream} source 音乐流媒体
*/
playSound(type, source) {
let sound = new Howl({
src: [source],
loop: true
});
this[type + 'Sound'] = sound;
sound.once('load', function() {
// 兼容部分浏览器无法触发touch
let btn = document.querySelector('#' + type);
let event = document.createEvent('Events');
event.initEvent('touchend', true, true);
btn.dispatchEvent(event);
sound.play();
});
},
/**
* @function 打印字符
*/
typewriter() {
let _ = this;
_.sContents = '';
// 设置最大显示行数
_.iRow = Math.max(0, _.iIndex - _.iScrollAt);
let destination = document.getElementById("typedtext");
// 元素打印完当前行移位下一行
while (_.iRow < _.iIndex) {
_.sContents += _.aText[_.iRow++] + "<br />";
}
// 拼接字符串
destination.innerHTML =
_.sContents + _.aText[_.iIndex].substring(0, _.iTextPos) + "_";
// 光标向右移动
if (_.iTextPos++ == _.iArrLength) {
_.iTextPos = 0;
// 移到行尾行号加1
_.iIndex++;
if (_.iIndex != _.aText.length) {
// 每次打印到下一行进行字符长度重新赋值
_.iArrLength = _.aText[_.iIndex].length;
_.wTimer = setTimeout(_.typewriter, 500);
} else {
// 文本打印完毕,去掉光标
destination.innerHTML = destination.innerHTML.substring(
0,
destination.innerHTML.length - 1
);
_.typeSound.pause();
}
} else {
_.lTimer = setTimeout(_.typewriter, _.iSpeed);
}
},
/**
* @function 启动打印机
*/
launch() {
document.querySelector(".slogan").className = "slogan slogan-hide";
document.querySelector(".shining").className = "title slogan-hide";
this.playSound("bg", bg);
this.playSound("type", type);
this.typewriter();
},
/**
* @function 判断是否PC
* @return {boolean} flag 终端的判断值
*/
isPC() {
let userAgentInfo = navigator.userAgent;
let Agents = [
"Android",
"iPhone",
"SymbianOS",
"Windows Phone",
"iPad",
"iPod"
];
let flag = true;
for (let v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false;
break;
}
}
return flag;
}
},
mounted() {
if (this.isPC()) {
document.addEventListener("click", () => {
this.launch();
});
} else {
document.addEventListener("touchstart", () => {
this.launch();
});
}
},
destroyed() {
this.lTimer = clearInterval(this.lTimer);
this.wTimer = clearInterval(this.wTimer);
if (this.isPC()) {
document.removeEventListener("click", () => {
this.launch();
});
} else {
document.removeEventListener("touchstart", () => {
this.launch();
});
}
}
};
</script>
@Kelier

This comment has been minimized.

Copy link
Owner Author

commented Jan 7, 2019

publish build version to Netlify.com 💯

http://2018summary.netlify.com

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.