Fairlands!
The amusement park is found mostly everywhere! You can enjoy yourself riding with your family on various rollercoasters, attending attractions within the park.. eat and enjoy your time at the various locations that exist! Of course, accompanied by your very own friend, Fair!
Being the rascal dog he is, he's always got a set of rules for you to follow within the amusement park! Though, he can only attend to you in the daily roundabout routine of his go-around of the amusement park, he'll always be there for you at home too, don't worry!
(function() {
document.addEventListener('DOMContentLoaded', function() {
const textChunks = [
"I've been reviewing",
"the hospital archives",
"for months now.",
"The old films",
"from the orphanage ward",
"in the 50s.",
"No one questions why.",
"They assume it's for my research",
"on developmental psychology.",
"They don't know",
"I'm looking for something specific.",
"René Spitz documented it perfectly in 1952:",
"\"Infants deprived of their mothers",
"during the first year of life",
"for more than five months",
"deteriorate progressively...",
"Their face becomes vacuous;",
"their activity is restricted to",
"atypical, bizarre finger movements.",
"They are unable to sit, stand, walk or talk.\"",
"Those finger movements aren't random.",
"They're communicating.",
"The same message,",
"across decades,",
"across continents,",
"from every abandoned child."
];
const uncannyStartIndex = 15;
const uncannyEndIndex = 20;
const fontSizes = [
24, 26, 22, 28, 24, 22, 30, 24, 22, 32, 28,
26, 24, 22, 24, 26, 28, 24, 26, 24,
30, 34, 26, 28, 28, 36
];
const textRevealContainer = document.getElementById('text-reveal');
const containerHeight = textRevealContainer.offsetHeight;
const positionPercentages = [
3, 6, 9, 12, 15, 18, 21, 24, 27, 30, 33,
36, 39, 42, 45, 48, 51, 54, 57, 60,
65,
70, 75, 80, 85, 90, 95
];
const fadeRanges = [];
textChunks.forEach((chunk, index) => {
const startPosition = positionPercentages[index];
const nextPosition = (index < positionPercentages.length - 1)
? positionPercentages[index + 1]
: 100;
const rangeSize = nextPosition - startPosition;
const fadeInEnd = startPosition + (rangeSize * 0.3);
const fadeOutStart = nextPosition - (rangeSize * 0.3);
fadeRanges.push({
start: startPosition,
fadeInEnd: fadeInEnd,
fadeOutStart: fadeOutStart,
end: nextPosition
});
});
function createDistortedText(text, index) {
const container = document.createElement('span');
container.style.display = 'inline-block';
container.style.letterSpacing = '1px';
if (index === 20) {
const words = text.split(' ');
const wordsContainer = document.createElement('span');
wordsContainer.style.wordSpacing = '0.5em';
words.forEach((word, wordIndex) => {
const wordContainer = document.createElement('span');
wordContainer.style.display = 'inline-block';
if (wordIndex > 0) {
wordContainer.style.marginLeft = '0.4em';
}
if (word.toLowerCase() === "finger") {
[...word].forEach((letter, i) => {
const span = document.createElement('span');
span.textContent = letter;
span.style.display = 'inline-block';
span.style.position = 'relative';
const uniqueKeyframes = `
@keyframes shake-20-${i}-${Date.now()} {
0%, 10% { transform: translate(0px, 0px) rotate(0deg); }
12% { transform: translate(${Math.random() * 4 - 2}px, ${Math.random() * 4 - 2}px) rotate(${Math.random() * 8 - 4}deg); }
14% { transform: translate(0px, 0px) rotate(0deg); }
16% { transform: translate(${Math.random() * 4 - 2}px, ${Math.random() * 4 - 2}px) rotate(${Math.random() * 8 - 4}deg); }
18%, 100% { transform: translate(0px, 0px) rotate(0deg); }
}
`;
const styleElement = document.createElement('style');
styleElement.textContent = uniqueKeyframes;
document.head.appendChild(styleElement);
span.style.animation = `shake-20-${i}-${Date.now()} ${3 + Math.random() * 2}s infinite`;
span.style.textShadow = '0 0 3px rgba(255,255,255,0.3)';
wordContainer.appendChild(span);
});
} else {
wordContainer.textContent = word;
}
wordsContainer.appendChild(wordContainer);
});
container.appendChild(wordsContainer);
}
else if (index >= uncannyStartIndex && index <= 19) {
let deformationProgress;
if (index <= 18) {
deformationProgress = (index - uncannyStartIndex) / (18 - uncannyStartIndex);
} else if (index === 19) {
deformationProgress = 0.7;
}
const words = text.split(' ');
const wordsContainer = document.createElement('span');
wordsContainer.style.wordSpacing = '0.5em';
words.forEach((word, wordIndex) => {
const wordContainer = document.createElement('span');
wordContainer.style.display = 'inline-block';
if (wordIndex > 0) {
wordContainer.style.marginLeft = '0.4em';
}
const isFingerWord = word.toLowerCase() === "finger";
[...word].forEach((letter, i) => {
const span = document.createElement('span');
span.textContent = letter;
span.style.display = 'inline-block';
span.style.position = 'relative';
const maxRotation = 15 * deformationProgress;
const rotation = Math.random() * maxRotation - (maxRotation / 2);
const maxDisplacement = 4 * deformationProgress;
const xDisplacement = Math.random() * maxDisplacement - (maxDisplacement / 2);
const yDisplacement = Math.random() * maxDisplacement - (maxDisplacement / 2);
const scaleVariation = 0.3 * deformationProgress;
const scale = 1 + (Math.random() * scaleVariation - (scaleVariation / 2));
span.style.transform = `rotate(${rotation}deg) scale(${scale})`;
span.style.top = `${yDisplacement}px`;
span.style.left = `${xDisplacement}px`;
if (isFingerWord) {
const uniqueKeyframes = `
@keyframes shake-${wordIndex}-${i}-${Date.now()} {
0%, 10% { transform: translate(0px, 0px) rotate(${rotation}deg) scale(${scale}); }
12% { transform: translate(${Math.random() * 4 - 2}px, ${Math.random() * 4 - 2}px) rotate(${rotation + (Math.random() * 8 - 4)}deg) scale(${scale}); }
14% { transform: translate(0px, 0px) rotate(${rotation}deg) scale(${scale}); }
16% { transform: translate(${Math.random() * 4 - 2}px, ${Math.random() * 4 - 2}px) rotate(${rotation + (Math.random() * 8 - 4)}deg) scale(${scale}); }
18%, 100% { transform: translate(0px, 0px) rotate(${rotation}deg) scale(${scale}); }
}
`;
const styleElement = document.createElement('style');
styleElement.textContent = uniqueKeyframes;
document.head.appendChild(styleElement);
span.style.animation = `shake-${wordIndex}-${i}-${Date.now()} ${3 + Math.random() * 2}s infinite`;
span.style.textShadow = '0 0 3px rgba(255,255,255,0.3)';
}
wordContainer.appendChild(span);
});
wordsContainer.appendChild(wordContainer);
});
container.appendChild(wordsContainer);
} else {
container.textContent = text;
}
return container;
}
textChunks.forEach((chunk, index) => {
const chunkElement = document.createElement('div');
chunkElement.style.position = 'fixed';
chunkElement.style.left = '50%';
chunkElement.style.top = '50%';
chunkElement.style.transform = 'translate(-50%, -50%)';
chunkElement.style.width = '90%';
chunkElement.style.maxWidth = '900px';
chunkElement.style.textAlign = 'center';
chunkElement.style.color = 'white';
chunkElement.style.fontSize = `${fontSizes[index]}px`;
chunkElement.style.fontFamily = 'serif';
chunkElement.style.lineHeight = '1.5';
chunkElement.style.opacity = '0';
chunkElement.style.transition = 'opacity 0.3s ease';
chunkElement.style.padding = '0 20px';
chunkElement.style.textShadow = '0 0 1px rgba(255,255,255,0.3)';
chunkElement.style.zIndex = '100';
chunkElement.dataset.index = index;
chunkElement.className = 'text-chunk';
const textContent = createDistortedText(chunk, index);
chunkElement.appendChild(textContent);
textRevealContainer.appendChild(chunkElement);
});
const sectionTitle = document.querySelector('.section-title');
function updateTextVisibility() {
const scrollPosition = window.scrollY;
const sectionStart = document.getElementById('location').offsetTop;
const scrollInSection = scrollPosition - sectionStart;
if (scrollPosition > sectionStart + 100) {
sectionTitle.style.opacity = '0';
} else {
sectionTitle.style.opacity = '0.5';
}
if (scrollPosition < sectionStart) return;
const scrollPercentage = (scrollInSection / containerHeight) * 100;
const chunkElements = document.querySelectorAll('.text-chunk');
chunkElements.forEach((element, index) => {
const fadeRange = fadeRanges[index];
let opacity = 0;
if (scrollPercentage < fadeRange.start) {
opacity = 0;
}
else if (scrollPercentage >= fadeRange.start && scrollPercentage < fadeRange.fadeInEnd) {
const fadeInProgress = (scrollPercentage - fadeRange.start) / (fadeRange.fadeInEnd - fadeRange.start);
opacity = fadeInProgress;
}
else if (scrollPercentage >= fadeRange.fadeInEnd && scrollPercentage < fadeRange.fadeOutStart) {
opacity = 1;
}
else if (scrollPercentage >= fadeRange.fadeOutStart && scrollPercentage < fadeRange.end) {
const fadeOutProgress = (fadeRange.end - scrollPercentage) / (fadeRange.end - fadeRange.fadeOutStart);
opacity = fadeOutProgress;
}
else {
opacity = 0;
}
element.style.opacity = opacity;
});
}
let ticking = false;
window.addEventListener('scroll', function() {
if (!ticking) {
window.requestAnimationFrame(function() {
updateTextVisibility();
ticking = false;
});
ticking = true;
}
});
updateTextVisibility();
});
})();