Improve instructions for scrolling

MKorostoff · Jun 18, 2020 · d979df2 · d979df2
1 parent e4dce4c
commit d979df2
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -24,7 +24,7 @@
   <meta property="og:description" content="Wealth inequality in the United States is out of control. Here we visualize the issue in a unique way." />
   <meta property="og:image" content="https://mkorostoff.github.io/1-pixel-wealth/img/off-the-chart.png" />
 
-  <link rel="stylesheet" type="text/css" href="main.css?version=1.2">
+  <link rel="stylesheet" type="text/css" href="main.css?version=1.3">
   <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
 </head>
 <body>
@@ -33,7 +33,10 @@
     <div class=wealth-row wealth-row-one>
       <div class="title-screen">
         <h1>Wealth shown to scale</h1>
-        <div class="scroll-this-way">scroll</div>
+        <div class="scroll-this-way">
+          <span>scroll right</span>
+          <div id="instructions" class="instructions">To scroll right, use shift + mousewheel. If you have a touchpad, swipe sideways.</div>
+        </div>
       </div>
       <div class="wealth-wrapper">
         <h2 class="wealth-title">$1,000</h2>
@@ -636,6 +639,6 @@ <h2 class="title what-could-we-do">We cannot accept this level of inequality any
   <a class="about-this" target="_blank" href="https://github.com/MKorostoff/1-pixel-wealth/blob/master/README.md">About this page</a>
 
 </div>
-<script type="text/javascript" src="main.js?version=1.2"></script>
+<script type="text/javascript" src="main.js?version=1.3"></script>
 </body>
 </html>
diff --git a/main.css b/main.css
@@ -821,3 +821,19 @@ h1 {
 .all-of-them .title {
   width: 370px;
 }
+.instructions {
+  transition: opacity 300ms;
+  margin-top: 40px;
+  max-width: 80%;
+  color: black;
+  font-size: 14px;
+  opacity: 0;
+}
+.instructions.show {
+  opacity: 1;
+}
+@media (max-width: 450px) {
+  .instructions {
+    display: none;
+  }
+}
diff --git a/main.js b/main.js
@@ -19,8 +19,32 @@ var money = new Intl.NumberFormat('en-US', {
   minimumFractionDigits: 0,
   maximumFractionDigits: 0,
 });
+var additional_instructions_shown = false;
+
+function detect_confused_user(e, timer) {
+  if (!additional_instructions_shown) {
+    additional_instructions_shown = true;
+
+    setTimeout(function(){
+      if (window.scrollX < 1) {
+        document.getElementById('instructions').classList.add("show");
+      }
+    }, timer);
+  }
+}
+function detect_slightly_confused_user(e, timer) {
+  detect_confused_user(e, 2000);
+}
+function detect_very_confused_user(e, timer) {
+  detect_confused_user(e, 4500);
+}
+
+if (window.innerWidth > 450) {
+  document.addEventListener("mousemove", detect_very_confused_user, {once: true});
+  document.addEventListener("mousewheel", detect_slightly_confused_user, {once: true});
+  document.addEventListener("DOMMouseScroll", detect_slightly_confused_user, {once: true});
+}
 
-//todo: also work for 400 richest
 window.addEventListener('scroll', function(){
   update_wealth_counter();
 });
@@ -86,3 +110,5 @@ function update_wealth_counter() {
 function toggleZoom() {
   document.getElementById('line-chart').classList.toggle('zoom');
 }
+
+