Skip to content

Commit c370054

Browse files
EmreT58EmreT58
committed
0.9.2 endproduct without documentation
- alle highlights interactief gemaakt - typewriter effect met javascript - onclick events uitgezet op deactivated markers voor touchscreen devices - micro animatie toegevoegd aan de buiten sketch waar je voor het eerst interactie hebt met de sketch, soort tutorial. - positionering verbeterd voor ux - subtiele active inactive en active state voor de markers - autoscroll fixed alleen nog documentatie
1 parent 6c94891 commit c370054

File tree

4 files changed

+311
-97
lines changed

4 files changed

+311
-97
lines changed

‎binnenkant.html

Lines changed: 88 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,16 @@
1414
<!-- magnetron -->
1515
<div class="marker" id="magnetron"></div>
1616
<div class="popups" id="magnetron-popup1">
17-
<div class="popups-header"><b>Two microwaves</b></div>
17+
<div class="popups-header">Two microwaves</div>
1818
<p>for $500 people heat their lunch</p>
1919
</div>
2020
<div class="popups" id="magnetron-popup2">
21+
<div class="popups-header">Did you know</div>
2122
<p>Did you know 500 Colombian pesos is equal to 12 Euro cents</p>
2223
</div>
2324

2425
<!-- deur naar buiten -->
25-
<div class="marker" id="exit" onclick="goOutside()"></div>
26+
<div class="marker" class="interactive-marker" id="exit" onclick="goOutside()"></div>
2627
<div class="popups" id="exit-popup1">
2728
<p>Exit?</p>
2829
<img src="images/tap.png" alt="entrance icon">
@@ -37,6 +38,14 @@
3738
Your browser does not support the audio element.
3839
</audio>
3940
</div>
41+
<div class="popups" id="radio-popup2">
42+
<div class="popups-header">Did you know</div>
43+
<!-- <p>He is a famous Puerto Rican salsa singer from the 90's. He was born in 1973</p> -->
44+
<p>
45+
Jerry Rivera often topped the latin charts with his music and
46+
his album Cuente Conmigo became the most-sold salsa album in history.
47+
</p>
48+
</div>
4049

4150
<!-- Balie video -->
4251
<div class="marker" id="balie" onclick="playBalie()"></div>
@@ -51,8 +60,7 @@
5160
<!-- Carlos met Kasboek -->
5261
<div class="marker" id="kasboek"></div>
5362
<div class="popups" id="kasboek-popup1">
54-
<p>Dit is Carlos, de eigenaar.</p>
55-
<p>Hij houdt een kasboek bij met bezoekers die hem nog geld schuldig zijn.</p>
63+
<p>Carlos and his cash book</p>
5664
<img src="images/carlos-kasboek-horizontaal.JPG" alt="Carlos met een kasboek">
5765
</div>
5866

@@ -61,6 +69,82 @@
6169
<div class="popups" id="madman-popup1">
6270
<p>Can you leave me alone please!? 😒</p>
6371
</div>
72+
73+
<!-- slapende jongeman -->
74+
<div class="marker" id="sleepingboy"></div>
75+
<div class="popups" id="sleepingboy-popup1">
76+
<p>A young man sleeps on his arms</p>
77+
</div>
78+
79+
<!-- white plastic cup -->
80+
<div class="marker" id="cup"></div>
81+
<div class="popups" id="cup-popup1">
82+
<p>A bright colored play tray for a white plastic cup on a white plastic table</p>
83+
</div>
84+
<div class="popups" id="cup-popup2">
85+
<div class="popups-header">Did you know</div>
86+
<p>In Colombia rich people are the ones who drink coffee at starbucks and eats at Mcdonalds</p>
87+
</div>
88+
89+
<!-- flessen -->
90+
<div class="marker" id="bottles"></div>
91+
<div class="popups" id="bottles-popup1">
92+
<p>This store is filled up like the hull of a cargoship</p>
93+
</div>
94+
<div class="popups" id="bottles-popup2">
95+
<div class="popups-header">Did you know</div>
96+
<p>How long can we survive on sugarwaters??</p>
97+
</div>
98+
99+
<!-- raam -->
100+
<div class="marker" id="raam"></div>
101+
<div class="popups" id="raam-popup1">
102+
<p>The irony of iron bars is that they make me aware of safety in a negative way</p>
103+
</div>
104+
<div class="popups" id="raam-popup2">
105+
<div class="popups-header">Did you know</div>
106+
<p>In Holland we have curtains</p>
107+
</div>
108+
109+
<!-- wc -->
110+
<div class="marker" id="toilet"></div>
111+
<div class="popups" id="toilet-popup1">
112+
<p>Entrance to bakery and toilet</p>
113+
</div>
114+
<div class="popups" id="toilet-popup2">
115+
<div class="popups-header">Did you know</div>
116+
<p>At the Panderia you can use the toilet even if you don't buy something. This costs $500, just like using the microwave.</p>
117+
</div>
118+
119+
<!-- lamp -->
120+
<div class="marker" id="lamp"></div>
121+
<div class="popups" id="lamp-popup1">
122+
<p>An ordinary fluoresent lamp flickers so fast the human eye does not see it</p>
123+
</div>
124+
<div class="popups" id="lamp-popup2">
125+
<div class="popups-header">Did you know</div>
126+
<p>This can cause stroposcobic effects, where things seem to stand still that actually move fast. Metaphorical?</p>
127+
</div>
128+
129+
<!-- bakkerij -->
130+
<div class="marker" id="bakery"></div>
131+
<div class="popups" id="bakery-popup1">
132+
<p>Pink glaced cookies</p>
133+
</div>
134+
<div class="popups" id="bakery-popup2">
135+
<div class="popups-header">Did you know</div>
136+
<p>Will all this bread be eaten today?</p>
137+
</div>
138+
139+
<!-- mirrorcam -->
140+
<div class="marker" id="mirrorcam"></div>
141+
<div class="popups" id="mirrorcam-popup1">
142+
<p>Carlos, the owner was preciously a <u>"TAXISTA"</u>. He makes the same hours here but he is happy he does not have to <u>sit</u> all the time.</p>
143+
</div>
144+
<div class="popups" id="mirrorcam-popup2">
145+
<div class="popups-header">Did you know</div>
146+
<p>This is his security camera mounted on his rear view mirror</p>
147+
</div>
64148
</div>
65149
<script src="script.js"></script>
66150
</body>

‎buitenkant.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
<body>
1212
<div id="image-container">
1313
<div id="buitenkant"><img src="images/buitenkant-gekleurd.png"></div>
14+
<div id="animation-hint"></div>
1415
<div class="marker" id="entrance" onclick="goInside()"></div>
1516
<div class="popups" id="entrance-popup1">
1617
<p>Enter?</p>

‎script.js

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,12 @@ window.onload = function() {
44
zoomer.smoothMoveTo(-900, -350); // smooth scroll naar midden
55
};
66

7+
78
// ===-TYPEWRITER EFFECT FOR INTRO VIDEO -===
89

9-
// code gebruikt van timdotcoce https://codepen.io/timdotcode/pen/bOejXp
10+
// code gebruikt van timdotcoce
11+
// https://codepen.io/timdotcode/pen/bOejXp
12+
1013
var typeWriterElement = document.getElementById('typewriter');
1114

1215
var textArray = [
@@ -58,27 +61,18 @@ function StartWriter(i) {
5861
}
5962
};
6063

61-
62-
6364
// ===- END OF TYPEWRITER -===
6465

6566
var zoomer = panzoom(document.querySelector("#image-container"), {
6667
maxZoom: 20,
6768
minZoom: 0.7,
6869
initialZoom: 0.75,
6970
onTouch: event => {
70-
const popupsElement = event.target.closest("popups");
71-
72-
if (popupsElement) {
73-
console.log("popups or its child touched. Returning false.");
71+
if (event.target.classList.contains("marker") && event.target.hasAttribute("data-active")) {
72+
console.log("Activated Marker touched. Returning false.");
7473
return false;
7574
}
76-
77-
if (event.target.classList.contains("marker")) {
78-
console.log("Marker touched. Returning false.");
79-
return false;
80-
}
81-
75+
8276
console.log("Neither marker nor popups touched. Returning true.");
8377
return true;
8478
},
@@ -88,7 +82,7 @@ var zoomer = panzoom(document.querySelector("#image-container"), {
8882
zoomer.on("zoom", event => document.querySelectorAll('.marker[data-visible]').forEach(checkIfZoomed));
8983

9084
function checkIfZoomed(marker) {
91-
let treshold = 0.1;
85+
let treshold = 0.085;
9286
let markerSize = marker.getBoundingClientRect();
9387

9488
if (markerSize.width / self.innerWidth > treshold) {

0 commit comments

Comments
 (0)