<h1>Wpromotions.eu is <span class="ds-pencil-text" data-wait="2500" data-words='["good", "awesome", "best"]'></span><img class="ds-pencil" src="https://www.wpromotions.eu/wp-content/uploads/2020/06/pencil.png"/></h1>
<script>
class TypeWriter {
constructor(txtElement, words, wait = 3000) {
this.txtElement = txtElement;
this.words = words;
this.txt = '';
this.wordIndex = 0;
this.wait = parseInt(wait, 10);
this.type();
this.isDeleting = false;
}
type() {
const current = this.wordIndex % this.words.length;
const fullTxt = this.words[current];
if (this.isDeleting) {
this.txt = fullTxt.substring(0, this.txt.length - 1);
}
else {
this.txt = fullTxt.substring(0, this.txt.length + 1);
}
this.txtElement.innerHTML = `<span class="txt">${this.txt}</span>`;
//type speed for when it is typing, deleting and pausing after deletion
let typeSpeed = 300;
//select pencil icon for writing animation
const typingElement = document.querySelector('.ds-pencil');
if (this.isDeleting) {
typeSpeed /= 4;
}
if (this.isDeleting) {
typingElement.className = "ds-pencil erasing-animation";
}
else {
typingElement.className = "ds-pencil writing-animation";
}
if (!this.isDeleting && this.txt === fullTxt) {
typeSpeed = this.wait;
this.isDeleting = true;
typingElement.className = "ds-pencil";
}
else if (this.isDeleting && this.txt === '') {
this.isDeleting = false;
this.wordIndex++;
// pause time before the word start typing
typeSpeed = 1000;
}
setTimeout(() => this.type(), typeSpeed)
}
}
document.addEventListener('DOMContentLoaded', init);
function init() {
const txtElement = document.querySelector('.ds-pencil-text');
const words = JSON.parse(txtElement.getAttribute('data-words'));
const wait = txtElement.getAttribute('data-wait');
new TypeWriter(txtElement, words, wait);
}
</script>
<style>
.ds-pencil-section {
overflow: hidden;
}
.ds-pencil-section h1 {
white-space: nowrap;
}
.ds-pencil-text {
margin-right: 5px;
}
.ds-pencil {
max-width: 8vw;
}
.erasing-animation {
-webkit-animation-name: erasing;
animation-name: erasing;
-webkit-animation-duration: 1.8s;
animation-duration: 1.8s;
}
@-webkit-keyframes erasing {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
10% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
60% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
70% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes erasing {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
10% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
60% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
70% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
.writing-animation {
-webkit-animation-name: writing;
animation-name: writing;
-webkit-animation-duration: 4s;
animation-duration: 4s;
}
@-webkit-keyframes writing {
0% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
2% {
-webkit-transform: translate(30px, -40px);
transform: translate(30px, -40px);
}
4% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
6% {
-webkit-transform: translate(30px, -40px);
transform: translate(30px, -40px);
}
8% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
10% {
-webkit-transform: translate(30px, -40px);
transform: translate(30px, -40px);
}
12% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
14% {
-webkit-transform: translate(30px, -40px);
transform: translate(30px, -40px);
}
16% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
18% {
-webkit-transform: translate(30px, -40px);
transform: translate(30px, -40px);
}
20% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
22% {
-webkit-transform: translate(30px, -40px);
transform: translate(30px, -40px);
}
24% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
26% {
-webkit-transform: translate(30px, -40px);
transform: translate(30px, -40px);
}
28% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
30% {
-webkit-transform: translate(30px, -40px);
transform: translate(30px, -40px);
}
32% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
34% {
-webkit-transform: translate(30px, -40px);
transform: translate(30px, -40px);
}
36% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
38% {
-webkit-transform: translate(30px, -40px);
transform: translate(30px, -40px);
}
40% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
42% {
-webkit-transform: translate(30px, -40px);
transform: translate(30px, -40px);
}
44% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
46% {
-webkit-transform: translate(30px, -40px);
transform: translate(30px, -40px);
}
48% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
50% {
-webkit-transform: translate(30px, -40px);
transform: translate(30px, -40px);
}
52% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
54% {
-webkit-transform: translate(30px, -40px);
transform: translate(30px, -40px);
}
56% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
58% {
-webkit-transform: translate(30px, -40px);
transform: translate(30px, -40px);
}
60% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
62% {
-webkit-transform: translate(30px, -40px);
transform: translate(30px, -40px);
}
64% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
66% {
-webkit-transform: translate(30px, -40px);
transform: translate(30px, -40px);
}
68% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
70% {
-webkit-transform: translate(30px, -40px);
transform: translate(30px, -40px);
}
72% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
74% {
-webkit-transform: translate(30px, -40px);
transform: translate(30px, -40px);
}
76% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
78% {
-webkit-transform: translate(30px, -40px);
transform: translate(30px, -40px);
}
80% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
82% {
-webkit-transform: translate(30px, -40px);
transform: translate(30px, -40px);
}
84% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
86% {
-webkit-transform: translate(30px, -40px);
transform: translate(30px, -40px);
}
88% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
90% {
-webkit-transform: translate(30px, -40px);
transform: translate(30px, -40px);
}
92% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
94% {
-webkit-transform: translate(30px, -40px);
transform: translate(30px, -40px);
}
96% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
98% {
-webkit-transform: translate(30px, -40px);
transform: translate(30px, -40px);
}
100% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
@keyframes writing {
0% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
2% {
-webkit-transform: translate(30px, -40px);
transform: translate(30px, -40px);
}
4% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
6% {
-webkit-transform: translate(30px, -40px);
transform: translate(30px, -40px);
}
8% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
10% {
-webkit-transform: translate(30px, -40px);
transform: translate(30px, -40px);
}
12% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
14% {
-webkit-transform: translate(30px, -40px);
transform: translate(30px, -40px);
}
16% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
18% {
-webkit-transform: translate(30px, -40px);
transform: translate(30px, -40px);
}
20% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
22% {
-webkit-transform: translate(30px, -40px);
transform: translate(30px, -40px);
}
24% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
26% {
-webkit-transform: translate(30px, -40px);
transform: translate(30px, -40px);
}
28% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
30% {
-webkit-transform: translate(30px, -40px);
transform: translate(30px, -40px);
}
32% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
34% {
-webkit-transform: translate(30px, -40px);
transform: translate(30px, -40px);
}
36% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
38% {
-webkit-transform: translate(30px, -40px);
transform: translate(30px, -40px);
}
40% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
42% {
-webkit-transform: translate(30px, -40px);
transform: translate(30px, -40px);
}
44% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
46% {
-webkit-transform: translate(30px, -40px);
transform: translate(30px, -40px);
}
48% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
50% {
-webkit-transform: translate(30px, -40px);
transform: translate(30px, -40px);
}
52% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
54% {
-webkit-transform: translate(30px, -40px);
transform: translate(30px, -40px);
}
56% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
58% {
-webkit-transform: translate(30px, -40px);
transform: translate(30px, -40px);
}
60% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
62% {
-webkit-transform: translate(30px, -40px);
transform: translate(30px, -40px);
}
64% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
66% {
-webkit-transform: translate(30px, -40px);
transform: translate(30px, -40px);
}
68% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
70% {
-webkit-transform: translate(30px, -40px);
transform: translate(30px, -40px);
}
72% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
74% {
-webkit-transform: translate(30px, -40px);
transform: translate(30px, -40px);
}
76% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
78% {
-webkit-transform: translate(30px, -40px);
transform: translate(30px, -40px);
}
80% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
82% {
-webkit-transform: translate(30px, -40px);
transform: translate(30px, -40px);
}
84% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
86% {
-webkit-transform: translate(30px, -40px);
transform: translate(30px, -40px);
}
88% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
90% {
-webkit-transform: translate(30px, -40px);
transform: translate(30px, -40px);
}
92% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
94% {
-webkit-transform: translate(30px, -40px);
transform: translate(30px, -40px);
}
96% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
98% {
-webkit-transform: translate(30px, -40px);
transform: translate(30px, -40px);
}
100% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
}
</style>