hi — i am working on a project that involves a backdrop of floating words, along with a centered button. once this button is tapped, 3 words are randomly selected, while the others, along with the button, fade away.
here is the javascript:
// Interval and words for placing words randomly
var interval = 100; // Interval between word placements (in milliseconds)
var buttonClicked = false; // Flag to control word population
var words = [
"U let me bum two cigarettes",
"i have thought about you since",
"your right index finger was wrapped in a bandage",
"You had a heart tattoo on your left arm",
"I just wanted to make sure you were okay",
"we bumped into each other in the produce section looking at bananas",
"You noticed me but avoided my gaze",
"I'll never be able to explain",
"I cannot sleep",
"You wear high heels and more when no one sees you",
"snow flakes fall upon tender flesh",
"watch me bleed",
"you smiled but still left",
"We exchanged glances",
"Has anyone seen you recently?",
"You told me you were sober and that I was pretty",
"Let's have breakfast",
"I liked ur necklace on saturday",
"You said kiss me",
"You used to read missed connections in our bed",
"What are the chances?",
"If you loved me I wouldn't have to guess",
"Just another self inflicted tragedy",
"I wanted to take you home",
"To have someone to talk with about anything",
"Cupid may be real",
"Blue's my Favorite Color",
"A shimmering full moon silhouetting",
"not in my mind. I didn't think",
"you disappeared",
"Get back to me",
"did you change your number?",
"Spring is coming",
"you saw me seeing you",
"Gorbachev says it's ok",
"You talk about your dad",
"I walked up and you left",
"many moons ago",
"a genuine woman posting",
"It's been a while",
"I hope you are safe",
"you were driving a blue Toyota corolla right before noon",
"Everyone already knows",
"We never got a chance to talk",
"The valley is beautiful",
"maybe you could come over",
"If you know who I am",
"i know it's you",
"You've moved and I want to see you again",
"You don’t critically think",
"telling you how I wish my gf had your lust for adventure",
"I have no way of contacting you",
"Never forget",
"But it’s just the way of the world",
"You are really coming apart at the seams",
"I’m sorry you had to move",
"Who knew?",
"It's Safer to Have a Gun in the House",
"if you’re looking for a home",
"I get butterflies",
"How will you defend yourself?",
"change will control everything in your life",
"Thank you",
"I have several young zebra finches that are looking for forever homes",
"I hope we can talk",
"I hope you got home safely",
"in her body",
"I know you're real",
"I broke my foot last night",
"Strawberry Fields",
"Let's hang out at my place",
"Remember me?",
"you were flirting with me",
"Will you be serious right now?",
"You know who you are",
"Let’s have a conversation",
"We should have stayed in touch",
"Cant help but think there's more to it",
"Do you like the way it’s turning out?",
"we couldn’t stop looking at each other",
"I'd like to see u again",
"I wish I had talked to you",
"I am Anti-Drama",
"not sure what it was about you",
"yes I am aware",
"I should have said more",
"Just curious",
"i held the door open for you this morning",
"We grew close and then both of our lives fell apart",
"I know it sounds made up",
"Was there more of a connection?",
"I hate to see you",
"I know it's you",
"Wish I had ran in the other direction when I had the chance",
"You plasma cut a hole into my heart",
"There's almost no chance",
"This is so ridiculous",
"you were searching for something that wasn't",
"it's spring, the season of renewal",
];
// Set the overflow property of the body to hidden
document.body.style.overflow = 'hidden';
// Array to store positions of placed words
var usedPositions = [];
// Flag to track if the button has been clicked
var buttonClicked = false;
// Function to check if a position is already used
function isPositionUsed(x, y) {
for (var i = 0; i < usedPositions.length; i++) {
var pos = usedPositions[i];
if (Math.abs(pos.x - x) < 200 && Math.abs(pos.y - y) < 50) {
return true;
}
}
return false;
}
// Function to apply typewriter effect to a word with different speeds
function applyTypewriterEffect(wordElement, word, speeds) {
var i = 0;
var interval = setInterval(function() {
if (i < word.length) {
wordElement.innerHTML += word.charAt(i);
i++;
} else {
clearInterval(interval);
}
}, speeds.shift()); // Use different speed for each character
}
// Function to generate a random font size
function getRandomFontSize() {
return Math.floor(Math.random() * 20) + 10 + 'px'; // Adjust the range of font sizes as needed
}
// Function to place words at random positions
var wordPlacementInterval = setInterval(function() {
if (!buttonClicked) {
var currentWord = words.shift();
if (currentWord) {
var word = document.createElement('span');
word.style.position = 'absolute'; // Make sure the position is absolute
var x, y;
// Generate non-overlapping random positions
do {
x = Math.random() * (window.innerWidth - 200);
y = Math.random() * (window.innerHeight - 50);
} while (isPositionUsed(x, y));
word.style.top = y + 'px'; // Set the top position
word.style.left = x + 'px'; // Set the left position
word.style.fontSize = getRandomFontSize(); // Set a random font size
word.style.animation = 'floating 5s ease-in-out infinite'; // Adjust duration and timing function as needed
document.body.appendChild(word);
// Generate different speeds for each character (adjust as needed)
var speeds = Array.from({
length: currentWord.length
}, () => Math.floor(Math.random() * 50) + 10);
// Apply typewriter effect to the word with different speeds for each character
applyTypewriterEffect(word, currentWord, speeds);
// Store the position of the placed word
usedPositions.push({
x: x,
y: y
});
} else {
clearInterval(wordPlacementInterval);
}
}
}, 1000); // Change interval as needed
// Function to select three random words from the displayed words
function selectRandomWords() {
// Get all word elements
var wordElements = document.querySelectorAll('span');
// Convert NodeList to an array
var wordElementsArray = Array.from(wordElements);
// Shuffle the array of word elements
wordElementsArray.sort(() => Math.random() - 0.5);
// Select the first three word elements to remain on the screen
var remainingWords = wordElementsArray.slice(0, 3);
// Fade out the non-selected words
wordElementsArray.forEach(function(wordElement) {
if (!remainingWords.includes(wordElement)) {
$(wordElement).fadeOut();
}
});
// Fade out the button
$("button").fadeOut();
// Set buttonClicked to true to stop word population
buttonClicked = true;
}
// Attach an event listener to the button
$("button").on('click', function() {
selectRandomWords();
});
$("button").hover(function() {
var self = this;
var pos = -(Math.floor(Math.random() * 5) + 1) * 55
setTimeout(function() {
$(self).find("ul").css("margin-top", pos + "px");
}, 500);
}, function() {
$(this).find("ul").css("margin-top", "0px");
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>I am trying to get these 3 final randomly selected words to float into the center of the screen, each on its own line, to read like a poem. but there’s something wrong with my code, can someone please help? right now they are staying place where they were before the button was clicked.