104 lines
3.1 KiB
JavaScript
104 lines
3.1 KiB
JavaScript
const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"
|
|
const typeWriterSpeed = 60;
|
|
|
|
window.onload = function() {
|
|
document.querySelectorAll(".scramble").forEach(item => {
|
|
item.addEventListener("mouseover", scramble);
|
|
});
|
|
|
|
window.addEventListener('scroll', function() {
|
|
let parallax = document.querySelector('.parallax')
|
|
let scrollPosition = window.pageYOffset;
|
|
|
|
let newSize = (document.querySelector('#content').offsetHeight * 0.66);
|
|
if(newSize < window.innerHeight)
|
|
newSize = window.innerHeight;
|
|
parallax.style.height = newSize + "px";
|
|
|
|
parallax.style.transform = 'translateY(' + scrollPosition * .5 + 'px)';
|
|
})
|
|
document.querySelectorAll(".typewriter").forEach(item => {
|
|
observer.observe(item);
|
|
});
|
|
}
|
|
|
|
function sleep(milliseconds) {
|
|
return new Promise(resolve => setTimeout(resolve, milliseconds));
|
|
}
|
|
|
|
function replaceSpacesWithNbsp(string) {
|
|
if (string == null) return;
|
|
return string.replace(/ /g, "\xa0");
|
|
}
|
|
|
|
function scramble(event){
|
|
scrambleLetters(event.target);
|
|
}
|
|
|
|
function scrambleLetters(element) {
|
|
let iterations = 0;
|
|
const originalValue = element.dataset.value;
|
|
|
|
let interval = setInterval(() => {
|
|
element.innerText = element.innerText.split("")
|
|
.map((letter, index) => {
|
|
if(index < iterations){
|
|
return originalValue[index];
|
|
}
|
|
return letters[Math.floor(Math.random() * letters.length)];
|
|
}).join("")
|
|
|
|
iterations += 1 / 3;
|
|
|
|
if(iterations > originalValue.length){
|
|
clearInterval(interval);
|
|
element.innerText = originalValue;
|
|
}
|
|
}, 30);
|
|
}
|
|
|
|
async function typeWriter(element) {
|
|
let typeWriterText = element.getAttribute("data-value");
|
|
let output = element.innerText;
|
|
|
|
// write the main text
|
|
for(let i = 0; i < typeWriterText.length; ++i){
|
|
output += typeWriterText.charAt(i);
|
|
// sleep for typeWriterSpeed milliseconds
|
|
await sleep(typeWriterSpeed);
|
|
element.innerText = output;
|
|
}
|
|
|
|
//try and do the paragraphs associated
|
|
let hiddenElementId = element.getAttribute("data-show");
|
|
|
|
if(hiddenElementId == null) return;
|
|
|
|
let hiddenElement = document.getElementById(hiddenElementId);
|
|
let hiddenElementSpeed = 5;
|
|
|
|
let paragraphs = hiddenElement.querySelectorAll("p");
|
|
for (let p of paragraphs){
|
|
let hiddenElementText = p.getAttribute("data-value");
|
|
//hiddenElementText = replaceSpacesWithNbsp(hiddenElementText);
|
|
p.innerHtml = "";
|
|
|
|
for (let i = 0; i < hiddenElementText.length; ++i){
|
|
p.innerText += hiddenElementText.charAt(i);
|
|
await sleep(hiddenElementSpeed);
|
|
}
|
|
|
|
await sleep(50);
|
|
}
|
|
}
|
|
|
|
let observer = new IntersectionObserver(function(entries) {
|
|
for (let entry of entries){
|
|
// If the element is visible, start the animation
|
|
if(entry.isIntersecting) {
|
|
typeWriter(entry.target);
|
|
observer.unobserve(entry.target);
|
|
}
|
|
}
|
|
}, { threshold: 0.7 });
|