Creepypasta

by Kofod

HTML

<div class="map-wrapper" id="mapWrapper" aria-label="Creepypasta board interactive">
  <img class="bg"
       src="https://i.ibb.co/yKcjkbG/Intro-Herobrine-Laughing-Jack-Slenderman-Eyeless-jack-Jeff-the-killer-Ben-drowned.png"
       width="688" height="500"
       usemap="#image-map" alt="Creepypasta board">

  <map name="image-map">
    <!-- Circle buttons (top row) -->
    <area alt="Hero"    title="Hero"    coords="61,56,29"  shape="circle" role="button" tabindex="0">
    <area alt="Laugh"   title="Laugh"   coords="137,56,29" shape="circle" role="button" tabindex="0">
    <area alt="Slender" title="Slender" coords="213,55,29" shape="circle" role="button" tabindex="0">
    <area alt="Eyes"    title="Eyes"    coords="474,56,29" shape="circle" role="button" tabindex="0">
    <area alt="Killer"  title="Killer"  coords="551,56,29" shape="circle" role="button" tabindex="0">
    <area alt="Ben"     title="Ben"     coords="627,56,28" shape="circle" role="button" tabindex="0">

    <!-- Rectangles (non-interactive text areas) -->
    <area alt="Intro"      title="Intro"      coords="28,213,659,115" shape="rect">
    <area alt="PastaStory" title="PastaStory" coords="28,232,513,474" shape="rect">
    <area alt="PastaImage" title="PastaImage" coords="512,232,659,474" shape="rect">
  </map>

  <!-- Overlay boxes -->
  <div id="introBox" class="overlay" aria-live="polite"></div>
  <div id="storyBox" class="overlay" aria-live="polite"></div>
  <div id="imageBox" class="overlay"><img id="storyImage" alt=""></div>

  <!-- Highlight ring element -->
  <div class="ring-highlight" id="ringHighlight" aria-hidden="true"></div>
</div>

CSS

.map-wrapper {
    position: relative;
    width: 688px;
    height: 500px;
    margin: 0 auto;
    font-family: Arial, Helvetica, sans-serif;
  }

  .map-wrapper img.bg {
    display: block;
    width: 688px;
    height: 500px;
    user-select: none;
    -webkit-user-drag: none;
  }


  .overlay {
    position: absolute;
    box-sizing: border-box;
    padding: 8px 10px;
    overflow: auto;
    pointer-events: auto;
    border-radius: 6px;
  }


  #introBox {
    color: #fff;
    font-size: 14px;
    line-height: 1.5;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  }


  #storyBox {
    color: #fff;
    font-size: 14px;
    line-height: 1.5;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    padding: 12px 14px;
  }
  #storyBox img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 8px 0;
  }
  #storyBox h3 { margin: 0 0 8px; }
  #storyBox p { margin: 0 0 10px; }
  #introBox p { margin: 0; }


  #imageBox {
    background: rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #storyImage {
     max-width: 100%;
  max-height: 100%;
  display: block;
  border-radius: 0;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.55))
          drop-shadow(0 4px 10px rgba(0,0,0,0.35));
  }


  #introBox, #storyBox, #imageBox {
    z-index: 3;
    pointer-events: auto;
  }


  #mapWrapper img[usemap] {
    display: block;
    width: 100%;     
    height: auto;
    z-index: 0;     
    position: relative;
  }

  
  #ringHighlight,
  .ring-highlight {
    position: absolute;
    border: 2px solid rgba(255,255,255,0.95);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(0,0,0,0.7), inset 0 0 6px rgba(255,255,255,0.6);
    pointer-events: none;
    display: none;
    transition: left 120ms ease, top 120ms ease, width 120ms ease, height 120ms ease, opacity 120ms ease;
  }
  .map-wrapper.active #ringHighlight { display: block;...

JavaScript

(function ($) {
  /* ---------- CONTENT ---------- */
  var CONTENT = {
    Intro: `
      <div class="story-section">
        <div>With Halloween coming up, it’s time to get into a spooky mood. We have put together our favorite creepypastas for you and show you how you can bring the spookiness to VP with matching outfits! But what are creepypastas? Creepypastas are stories written by fans and users that are intended to be scary. They are often horror-related myths, legends or stories. The term “Creepypasta” comes from “ copy-paste” since these stories are often copied and shared on different forums and social media platforms. Most common themes include, but are not limited to: paranormal events, ghosts, murder, cryptids and haunted video games. Creepypastas are often used as inspiration for fans and will get their own completely new fanbase! One that has recently been blown up, to the point where it has hundreds, if not more, fan made games and media, is the Backrooms story. In this article, I’ll show you some more popular stories.</div>
      </div>
    `,
    Hero: {
      text: `
        <div class="story-section">
          <h3>Herobrine</h3>
          <div>I had recently spawned a new world in single-player Minecraft. Everything was normal at first as I began chopping down trees and crafting a workbench. I noticed something move amongst the dense fog (I have a very slow computer so I have to play with a tiny render distance). I thought it was a cow, so I pursued it, hoping to grab some hides for armor. It wasn’t a cow though. Looking back at me was another character with the default skin, but his eyes were empty. I saw no name pop up, and I double-checked to make sure I wasn’t in multiplayer mode. He didn’t stay long, he looked at me and quickly ran into the fog. I pursued out of curiosity, but he was gone.<br><br> 

I continued on with the game, not sure what to think. As I expanded the world, I saw things that seemed out of place for the...