xdrm-brackets
/
xdrm.io
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat: typewriter animation for the homepage readme

This commit is contained in:
Adrien Marquès 2022-10-10 16:12:19 +02:00
parent 67e136b500
commit de0034ed5b
Signed by: xdrm-brackets
GPG Key ID: D75243CA236D825E
2 changed files with 71 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/Home.vue
View File

@ -21,10 +21,10 @@
<section class='readme'>
<div class='header'>README.md</div>
<p>Hi, I am another freelance developer !</p>
<p>I made this website so you can <u>browse</u> some of my skills and projects.</p>
<p>After 50+ projects since I started IT back in 2010, I still work hard for making projects maintainable so they last and can evolve..</p>
<p>For now, my technologies of choice are : <u>Go</u> and <u>IoT</u> (Arduino, Raspberry) projects.</p>
<p ref='text1'>Hi, I am another freelance developer !</p>
<p ref='text2'>I made this website so you can <u>browse</u> some of my skills and projects.</p>
<p ref='text3'>After 50+ projects since I started IT back in 2010, I still work hard for making projects maintainable so they last and can evolve.</p>
<p ref='text4'>For now, my technologies of choice are : <u>Go</u> and <u>IoT</u> (Arduino, Raspberry).</p>
</section>
<div class='scroll-arrow' @click='scrollNext()'>
@ -39,6 +39,7 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { go } from '@/service/scroller';
import { TypeWriter } from '@/service/typewriter';
@Component({
components: {},
@ -47,6 +48,27 @@
protected scrollNext() {
go('skill-picker', 0);
}
protected mounted() {
const t1 = new TypeWriter( this.$refs['text1'] as HTMLElement )
const t2 = new TypeWriter( this.$refs['text2'] as HTMLElement )
const t3 = new TypeWriter( this.$refs['text3'] as HTMLElement )
const t4 = new TypeWriter( this.$refs['text4'] as HTMLElement )
t1.init(false);
t2.init();
t3.init();
t4.init();
// wait 1s, anim 1.5s
setTimeout( () => t1.animate(1500), 1000 );
// wait 3s, anim 2s
setTimeout( () => t2.animate(2000), 3000 );
// wait 6s, anim 4s
setTimeout( () => t3.animate(4000), 6000 );
// wait 10s, anim 3s
setTimeout( () => t4.animate(3000), 10000 );
}
}
</script>

45
src/service/typewriter.ts Normal file
View File

@ -0,0 +1,45 @@
export class TypeWriter {
private target: HTMLElement;
private display: string|null;
private html: string|null;
constructor(target: HTMLElement){
this.target = target;
}
/* initialize with copying and clearing the original text */
public init(hide: boolean = true) {
this.html = this.target.innerHTML;
this.display = this.target.style.display;
this.target.innerHTML = '';
if( hide ){
this.target.style.display = 'none';
}
}
public animate(duration_ms: number) {
if( this.html == null || this.display == null ){
console.warn("[typewriter] init must be called first ; doing it anyway");
this.init();
}
const size = this.html!.length;
const letter_ms = duration_ms / size;
this.target.style.display = this.display!;
for( let i = 0, l = this.html!.length ; i < l ; i++ ){
setTimeout(
() => {
((i: number) => {
this.target.innerHTML = this.html!.substring(0, i+1);
})(i);
},
i*letter_ms);
}
}
};