Skip to content

Update index.html with custom background image and styling improvements #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
devinshende wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Update index.html with custom background image and styling improvements #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a52a4eb
Update index.html with custom background image and styling improvements
Nov 14, 2025
bf9e180
Add bomb and match sprites with erratic movement and explosion collis…
Nov 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added assets/bomb.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/match.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
64 changes: 55 additions & 9 deletions canvas.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,12 @@
will-change: transform, filter;
}

/* Match sprite sizing */
#char-1 {
width: 180px;
height: 180px;
}

/* Kristina sprite sizing */
#char-5 {
width: 100px;
Expand Down Expand Up @@ -158,7 +164,10 @@

<!-- Character Animation Layer -->
<div id="character-layer">
<div id="char-1" class="character" style="background-color: #a21f1f;"></div>
<!-- char-1 uses match.png sprite -->
<div id="char-1" class="character"
style="background-image: url('assets/match.png'); background-size: cover; background-position: center; background-repeat: no-repeat;">
</div>
<!-- char-2 uses Sabina.png sprite -->
<div id="char-2" class="character"
style="background-image: url('assets/Sabina.png'); background-size: cover; background-position: center; background-repeat: no-repeat;">
Expand All @@ -175,7 +184,10 @@
<div id="char-5" class="character"
style="background-image: url('assets/Kristina.png'); background-size: cover; background-position: center; background-repeat: no-repeat;">
</div>
<div id="char-6" class="character" style="background-color: #b393d9;"></div>
<!-- char-6 uses bomb.png sprite -->
<div id="char-6" class="character"
style="background-image: url('assets/bomb.png'); background-size: cover; background-position: center; background-repeat: no-repeat;">
</div>
<!-- char-6 uses jeffbaby placeholder SVG (replace with PNG if you add it into assets/) -->
<div id="char-6" class="character"
style="background-image: url('assets/jeffbaby.JPG'); background-size: cover; background-position: center; background-repeat: no-repeat;">
Expand Down Expand Up @@ -334,6 +346,7 @@
if (bg.includes('carmen')) behavior = 'carmen';
else if (bg.includes('cal')) behavior = 'cal';
else if (bg.includes('jeff')) behavior = 'jeff';
else if (bg.includes('match')) behavior = 'match';

function getRandomPositionFor(type) {
const maxX = Math.max(0, layerBounds.width - charWidth);
Expand Down Expand Up @@ -367,6 +380,10 @@
// erratic: short moves and quick direction changes
duration = gsap.utils.random(0.35, 1.1);
ease = 'power1.inOut';
} else if (behavior === 'match') {
// VERY erratic: super short moves with rapid direction changes
duration = gsap.utils.random(0.4, 1.2);
ease = 'power4.out';
} else {
duration = gsap.utils.random(3.5, 7.5);
}
Expand All @@ -386,6 +403,11 @@
} else if (behavior === 'cal') {
// jitter rotation to emphasize erratic direction changes
gsap.to(charElement, { rotation: gsap.utils.random(-12, 12), duration: gsap.utils.random(0.06, 0.25), ease: 'none', yoyo: true, repeat: 1 });
} else if (behavior === 'match') {
// extreme jitter and wild rotation for chaotic movement
gsap.to(charElement, { rotation: gsap.utils.random(-25, 25), duration: gsap.utils.random(0.05, 0.15), ease: 'none', yoyo: true, repeat: 2 });
// add scale jitter for more chaos
gsap.to(charElement, { scale: gsap.utils.random(0.85, 1.15), duration: gsap.utils.random(0.1, 0.3), ease: 'power2.inOut', yoyo: true, repeat: 1 });
} else if (behavior === 'jeff') {
// subtle slow bob
gsap.to(charElement, { rotation: gsap.utils.random(-4, 4), duration: duration * 0.5, ease: 'sine.inOut' });
Expand Down Expand Up @@ -502,23 +524,47 @@
});
});

// --- Special-case collision: if Cal and Baby Jeff overlap, trigger screen shake + red overlay ---
// --- Special-case collision: if Bomb and Match overlap, trigger screen shake + red overlay + explosion ---
try {
const calEl = Array.from(characters).find(c => (c.style.backgroundImage || '').includes('Cal.png'));
const babyEl = Array.from(characters).find(c => (c.style.backgroundImage || '').toLowerCase().includes('jeffbaby'));
if (calEl && babyEl) {
const crect = calEl.getBoundingClientRect();
const brect = babyEl.getBoundingClientRect();
const overlapSpecial = !(crect.right < brect.left || crect.left > brect.right || crect.bottom < brect.top || crect.top > brect.bottom);
const bombEl = Array.from(characters).find(c => (c.style.backgroundImage || '').includes('bomb.png'));
const matchEl = Array.from(characters).find(c => (c.style.backgroundImage || '').includes('match.png'));
if (bombEl && matchEl) {
const brect = bombEl.getBoundingClientRect();
const mrect = matchEl.getBoundingClientRect();
const overlapSpecial = !(brect.right < mrect.left || brect.left > mrect.right || brect.bottom < mrect.top || brect.top > mrect.bottom);
if (overlapSpecial && !window._isScreenShaking) {
window._isScreenShaking = true;

// Red overlay flash
const overlay = document.getElementById('screen-overlay');
if (overlay) {
gsap.killTweensOf(overlay);
gsap.to(overlay, { backgroundColor: 'rgba(255,0,0,0.55)', duration: 0.08, ease: 'power1.out' });
gsap.to(overlay, { backgroundColor: 'rgba(255,0,0,0)', delay: 0.6, duration: 0.6, ease: 'power1.inOut' });
}

// Display explosion GIF at collision point
const collisionX = (brect.left + brect.right) / 2;
const collisionY = (brect.top + brect.bottom) / 2;
const cardRect = documentCard.getBoundingClientRect();
const explosionDiv = document.createElement('div');
explosionDiv.style.position = 'absolute';
explosionDiv.style.left = `${collisionX - cardRect.left - 100}px`;
explosionDiv.style.top = `${collisionY - cardRect.top - 100}px`;
explosionDiv.style.width = '200px';
explosionDiv.style.height = '200px';
explosionDiv.style.pointerEvents = 'none';
explosionDiv.style.zIndex = '100';
explosionDiv.innerHTML = '<img src="assets/explosion.gif" style="width: 100%; height: 100%; object-fit: contain;" />';
documentCard.appendChild(explosionDiv);

// Remove explosion after animation
setTimeout(() => {
if (explosionDiv.parentNode) {
explosionDiv.parentNode.removeChild(explosionDiv);
}
}, 1000);

// Quick shake the document card
gsap.fromTo(documentCard, { x: 0 }, { x: 12, duration: 0.05, yoyo: true, repeat: 8, ease: 'power1.inOut', onComplete: () => { gsap.to(documentCard, { x: 0, duration: 0.08 }); } });

Expand Down
26 changes: 21 additions & 5 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,17 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Input for Animation</title>
<title>What the Text?</title>
<!-- Load Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #f7f7f7;
background-image: url('landing_page_background.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
display: flex;
justify-content: center;
align-items: center;
Expand All @@ -19,8 +23,8 @@
</head>
<body>
<div class="w-full max-w-lg p-8 bg-white rounded-xl shadow-2xl">
<h1 class="text-3xl font-extrabold text-gray-900 mb-6 text-center">Prepare Your Animation</h1>
<p class="text-gray-600 mb-8 text-center">Enter the text you want to scramble and animate.</p>
<h1 class="text-3xl font-extrabold text-gray-900 mb-6 text-center">New Sense</h1>
<p class="text-gray-600 mb-8 text-center">The Best Dumb-A-Thon project (Duh!)</p>

<!-- The file upload is included here as requested in the previous context,
but we won't process the file in this example for simplicity. -->
Expand Down Expand Up @@ -49,6 +53,18 @@ <h1 class="text-3xl font-extrabold text-gray-900 mb-6 text-center">Prepare Your
</form>
</div>

<script>
const error_messages = [
"Oops! You forgot to enter some text.",
"Hold on! The text field is empty.",
"Please provide some text to animate.",
"Text input cannot be empty. Try again!",
"Don't leave me hanging! Enter some text.",
"Come on, type something in the text box!",
"The text field is lonely without your input.",
];
</script>

<script>
function startAnimation() {
const textInput = document.getElementById('text_input').value;
Expand All @@ -64,7 +80,7 @@ <h1 class="text-3xl font-extrabold text-gray-900 mb-6 text-center">Prepare Your
errorMessage.className = 'text-red-500 text-sm mt-3 text-center';
form.appendChild(errorMessage);
}
errorMessage.textContent = 'Please enter some text to animate.';
errorMessage.textContent = error_messages[Math.floor(Math.random() * error_messages.length)];
return;
}

Expand Down
Binary file added landing_page_background.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.