binnenkant werkend & optimized update

EmreT58 · Jan 21, 2024 · b453a87 · b453a87
1 parent e0f330c
commit b453a87
Show file tree

Hide file tree

Showing 3 changed files with 156 additions and 1 deletion.
diff --git a/binnenkant.html b/binnenkant.html
diff --git a/index.html b/index.html
@@ -5,22 +5,27 @@
     <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
     <title>Coffeeshop La Tienda</title>
     <link rel="stylesheet" href="style.css">
+    <script src='https://unpkg.com/[email protected]/dist/panzoom.min.js'></script>
 </head>
+
 <!-- Start met video, transitie naar sketch, typewriter animatie introductie en daarna auto scroll naar deur -->
 <!-- Vervolgens highlighted sketch met klikbare divs, als je divs klikt krijg je een witte vak met tekst te zien -->
+
 <body>
     <main>
         <div id="video-container">
             <h1>La Tienda</h1>
-            <video autoplay muted loop><source src="dooievid"></video>
+            <video autoplay muted loop><source src="images/"></video>
         </div>
 
         <div id="image-container">
             <img id="buitenkant" src="images/buiten-ss.png">
             <div id="deur-buiten" onclick="naarBinnen()"></div>
+
             <!-- <img id="binnenkant" src="images/binnen-ss.png"> -->
             <!-- binnenkant zetten op een andere pagina zodat de divs niet door elkaar heen gaan -->
             <!-- of aan de hand van displayed sketch vorige divs niet klikbaar maken -->
+
         </div>
     </main>
     <script src="script.js"></script>

diff --git a/panzoom.html b/panzoom.html
@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Binnen La Tienda</title>
+    <script src='https://unpkg.com/[email protected]/dist/panzoom.min.js'></script>
+    <style>
+        #image-container {
+            position: relative;
+            width: 100vw;
+            height: 100vh;
+        }
+
+        .marker {
+            position: absolute;
+            left: 900px;
+            top: 320px;
+            width: 50px;
+            height: 100px;
+            background-color: grey;
+            opacity: 0.5;
+        }
+
+        /* CSS voor als de marker zichtbaar is */
+        .marker[data-visible] {
+            border: 1px solid red;
+            transition: 0.3s ease-in-out; /* Added transition for smoother color changes */
+        }
+
+        /* CSS voor marker activation */
+        .marker[data-active] { 
+            border: 1px solid green;
+        }
+        /* .textbox:before {
+            content: "";
+            position:absolute;
+            top:-40px;
+            left:0;
+            height:40px;
+            width: 40px;
+            border-bottom-left-radius: 50%;
+            box-shadow: 0 20px 0 0 white;
+        } */
+        .textbox {
+            background-color: white;
+            padding: 5px;
+            position: absolute;
+            font-size: 9px;
+            width: 90px;
+            /* border-radius: 60% 40% 40% 20% / 70% 50% 30% 25%; */
+            border-radius: 20px;
+            box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
+            font-family: cursive;
+            opacity: 0; 
+            transition: opacity 0.5s ease-in-out;
+        }
+        #magnetron-janinfo {
+            left: 900px;
+            top: 260px;
+            opacity: 0; /* Initially set to 0 for invisibility */
+            transition: opacity 0.5s ease-in-out;
+        }
+        #magnetron-extrainfo {
+            left: 900px;
+            top: 420px;
+            opacity: 0; 
+            transition: opacity 0.5s ease-in-out;
+        }
+    </style>
+</head>
+<body>
+    <div id="image-container">
+        <div id="binnenkant"><img src="images/binnen-ss.png"></div>
+        <div class="marker" id="magnetron"></div>
+        <div class="textbox" id="magnetron-janinfo">
+            <p>Two microwaves for $500 people heat their lunch</p>
+        </div>
+        <div class="textbox" id="magnetron-extrainfo">
+            <p>Did you know 500 Colombian pesos is equal to 12 Euro cents</p>
+        </div>
+    </div>
+
+    <script>
+        // https://github.com/anvaka/panzoom
+
+            window.onload = function() {
+            // Get the dimensions of the image and the viewport
+            var image = document.getElementById('binnenkant'); // Replace 'yourImageId' with the actual ID of your image
+            var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
+            var viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+
+            // Calculate the scroll position to center the image
+            var scrollX = (image.width - viewportWidth) / 2;
+            var scrollY = (image.height - viewportHeight) / 2;
+
+            // Scroll to the calculated position, considering the mobile browser quirks
+            window.scrollTo({
+            top: scrollY,
+            left: scrollX,
+            behavior: 'smooth' // You can adjust this to 'auto' or 'instant' based on your preference
+            });
+        };
+
+        var zoomer = panzoom(document.querySelector("#image-container"), {
+        maxZoom: 20,
+        minZoom: 1,
+        });
+
+        zoomer.on("zoom", event =>   document.querySelectorAll('.marker[data-visible]').forEach(checkIfZoomed));
+
+        function checkIfZoomed(marker) {
+        let treshold = 0.08; //op desktop emulatie werkt 0.3 goed maar op echte mobiel werkt 0.08 goed??
+        let markerSize = marker.getBoundingClientRect();
+        if (markerSize.width / self.innerWidth > treshold) {
+            if (!marker.hasAttribute("data-active")) {
+            // Checks
+            marker.toggleAttribute("data-active");
+            console.log("Activated", marker.id);
+            // Triggers
+            document.querySelectorAll(".textbox").forEach(function(textbox) {
+                textbox.style.opacity = 1;
+            });
+
+            }
+        } 
+        // ---
+        else {
+            if (marker.hasAttribute("data-active")) {
+            // Checks
+            marker.toggleAttribute("data-active");
+            console.log("De-activated", marker.id);
+            // Triggers
+            document.querySelectorAll(".textbox").forEach(function(textbox) {
+                textbox.style.opacity = 0;
+            });
+            }
+        }
+        }
+
+        let observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+            entry.target.toggleAttribute("data-visible", entry.isIntersecting);
+        });
+        });
+
+        document.querySelectorAll(".marker").forEach(element => observer.observe(element));
+    </script>
+</body>
+</html>