VizTitle.vue

<template>
  <header id="grid-container">
    <div id="image-container">
      <img
        ref="heroImage"
        id="title-image"
        :class="{ mobile: mobileView }"
        src="@/assets/images/full-color_no-circle_strong-fade.png"
        alt="Social vulnerability and water insecurity"
        @load="updateSvgDimensions"
      />
      <img
        ref="bwHeroImage"
        id="bw-title-image"
        :class="{ mobile: mobileView }"
        src="@/assets/images/full-color_no-circle_strong-fade.png"
        alt="Social vulnerability and water insecurity (grayscale)"
      />
      <!-- Using svg masks with a circle shape to reveal color image where circles are on top of bw -->
      <svg ref="overlay" id="overlay" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <mask id="circleMask">
            <rect width="100%" height="100%" fill="white" />
            <circle cx="100" cy="100" r="50" fill="black" />
            <circle cx="200" cy="150" r="30" fill="black" />
            <circle cx="300" cy="250" r="90" fill="black" />
            <circle cx="600" cy="200" r="50" fill="black" />
            <circle cx="700" cy="550" r="100" fill="black" />
            <circle cx="800" cy="200" r="70" fill="black" />
            <circle cx="70" cy="310" r="50" fill="black" />
            <circle cx="500" cy="450" r="130" fill="black" />
            <circle cx="420" cy="180" r="40" fill="black" />
            <circle cx="600" cy="200" r="75" fill="black" />
            <circle cx="700" cy="350" r="130" fill="black" />
            <circle cx="800" cy="20" r="110" fill="black" />
          </mask>
        </defs>
      </svg>
    </div>
      <div id="text-container">
        <h1>Unequal access to water</h1>
        <h3>
          How societal factors shape vulnerability to water insecurity
        </h3>
      </div>
  </header>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import { isMobile } from 'mobile-device-detect';

const mobileView = ref(isMobile);
const heroImage = ref(null);
const bwHeroImage = ref(null);
const overlay = ref(null);

const updateSvgDimensions = () => {
  if (heroImage.value && bwHeroImage.value && overlay.value) {
    const { width, height } = heroImage.value.getBoundingClientRect();
    overlay.value.setAttribute('width', width);
    overlay.value.setAttribute('height', height);
    bwHeroImage.value.style.width = `${width}px`;
    bwHeroImage.value.style.height = `${height}px`;
    bwHeroImage.value.style.top = '0';
    bwHeroImage.value.style.left = '0';
  }
};

onMounted(() => {
  updateSvgDimensions();
  window.addEventListener('resize', updateSvgDimensions);
});

watch(mobileView, () => {
  updateSvgDimensions();
});
</script>

<style lang="scss" scoped>
#grid-container {
  display: grid;
  grid-template-rows: auto auto;
  width: 100vw;
  margin: auto;
}

#image-container {
  position: relative;
  width: 100%;
}

#title-image,
#bw-title-image {
  width: 100%;
}

#title-image {
  display: block;
}

#bw-title-image {
  filter: grayscale(100%);
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none; /* Ensure the grayscale image doesn't interfere with other interactions */
  mask: url(#circleMask); /* Apply the SVG mask */
}

#overlay {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none; /* Ensure the SVG overlay doesn't interfere with other interactions */
}

#text-container {
  width: 100%;
  background: rgba(0, 0, 0, 0.95); 
  color: #1b1b1b; 
  padding: 20px; 
  box-sizing: border-box;
}
#image-container {
  color: #1b1b1b; 
  background: #1b1b1b;
}

h1 {
  margin: -20px 20px;
  color: white;
  text-align: left; /* Optional: Align text to the left */
}
h3 {
  margin: 20px 20px 0px 20px;
  color: white;
  text-align: left; /* Optional: Align text to the left */
}

</style>