The CarnEvil of Horrors: A Halloween-Themed Web Project Using HTML, CSS, and JavaScript

The CarnEvil of Horrors: A Halloween-Themed Web Project Using HTML, CSS, and JavaScript

This article details the creation of “The CarnEvil of Horrors,” a Halloween-themed single-page website inspired by the Goosebumps book series. Built using HTML, CSS, and vanilla JavaScript, the project showcases responsive design, CSS animations, and JavaScript-driven effects to create an immersive horror-themed experience.

---

Project Overview and Inspiration

• Inspiration: Based on the Goosebumps book “Escape from the Carnival of Horrors”, the site features a dark, eerie aesthetic with three sections: About, Scares, and Tickets.
• Tech Stack: HTML, CSS (with CSS Custom Properties), and vanilla JavaScript.
• Features:
  • Smooth scrolling navigation.
  • Horror-themed styling with custom color variables.
  • JavaScript-driven effects like blood drips and glitch animations.
  • Responsive design for cross-device compatibility.

---

Tech Stack and Implementation

1. CSS Custom Properties for Thematic Consistency

• Defined color variables for a cohesive horror theme:

  :root {
    --color-blood-red: #8b0000;
    --color-toxic-green: #39ff14;
    --color-shadow-purple: #4a0e4e;
    --transition-speed: 0.3s;
  }

• Purpose: Enables quick adjustments to colors and animations across the site, ensuring consistency and reducing redundancy.

2. Background Overlay for Readability

• Applied a dark overlay to a Freepik royalty-free carnival image:

  body {
    background-image: linear-gradient(rgba(5, 2, 0, 0.7), rgba(5, 2, 0, 0.7)), url('IMG_0473.jpg');
    background-attachment: fixed;
  }

• Impact: Ensures text readability on the image while maintaining the eerie atmosphere.

3. CSS and JavaScript Animations

• Blood Drip Animation:

  • CSS: Defines the drip effect using @keyframes:

    @keyframes drip {
      0% { opacity: 0; height: 0; top: 0; }
      10% { opacity: 1; }
      100% { opacity: 0; height: 100px; top: 100%; }
    }

  • JavaScript: Dynamically creates and removes drip elements:

    function createBloodDrip() {
      const bloodContainer = document.getElementById('bloodDripsContainer');
      const drip = document.createElement('div');
      drip.className = 'blood-drip';
      drip.style.left = Math.random() * 100 + '%';
      bloodContainer.appendChild(drip);
      setTimeout(() => drip.remove(), 3000);
    }

  • Use Case: Adds a continuous, randomized blood drip effect to enhance the horror theme.

• Glitch Effect on Titles:

  • CSS: Uses pseudo-elements and animations:

    .glitch.active::before {
      content: attr(data-text);
      animation: glitch-1 0.3s both infinite;
      color: var(--color-toxic-green);
    }
    @keyframes glitch-1 {
      0% { transform: translateX(0); }
      20% { transform: translateX(-2px); }
      40% { transform: translateX(2px); }
    }

  • JavaScript: Triggers the glitch randomly:

    function startRandomGlitch() {
      const glitchElements = document.querySelectorAll('.glitch');
      setInterval(() => {
        const randomElement = glitchElements[Math.floor(Math.random() * glitchElements.length)];
        triggerGlitchEffect(randomElement);
      }, 8000);
    }

  • Purpose: Creates a dynamic, unsettling visual effect on section titles.

4. Responsive Design and Smooth Scrolling

• Ensures the site is mobile-friendly using media queries and CSS flexbox/grid.
• Smooth scrolling is implemented via CSS scroll-behavior or JavaScript for compatibility.

---

Key Takeaways and Best Practices

• File Paths: Always use forward slashes (/) or relative paths in CSS to avoid 404 errors.
• Syntax Precision: Minor syntax errors (e.g., missing commas) can break animations or layouts.
• CSS/JS Alignment: JavaScript effects must be paired with corresponding CSS animations for proper rendering.
• Incremental Testing: Test features as they are built to catch bugs early.

---

Working Example

Blood Drip Animation Code

<!-- HTML -->
<div id="bloodDripsContainer"></div>

<!-- CSS -->
.blood-drip {
  position: absolute;
  width: 2px;
  background: linear-gradient(to bottom, var(--color-blood-red), transparent);
  animation: drip 3s linear infinite;
}

@keyframes drip {
  0% { opacity: 0; height: 0; top: 0; }
  10% { opacity: 1; }
  100% { opacity: 0; height: 100px; top: 100%; }
}

<!-- JavaScript -->
<script>
function createBloodDrip() {
  const bloodContainer = document.getElementById('bloodDripsContainer');
  const drip = document.createElement('div');
  drip.className = 'blood-drip';
  drip.style.left = Math.random() * 100 + '%';
  bloodContainer.appendChild(drip);
  setTimeout(() => drip.remove(), 3000);
}
setInterval(createBloodDrip, 1000);
</script>

---

Recommendations

• When to Use This Approach: For thematic websites requiring dynamic visual effects (e.g., horror, gaming, or interactive storytelling).
• Best Practices:
  • Use CSS variables for consistent theming.
  • Test animations on multiple devices and browsers.
  • Avoid overloading the DOM with too many dynamic elements (e.g., excessive drip animations).
• Common Pitfalls:
  • Forgetting to clean up dynamically created elements (e.g., using setTimeout to remove drips).
  • Overusing animations, which can degrade performance on mobile devices.

---

url: https://dev.to/afkjr/the-carnevil-of-horrors-118o