commit: d979df26e005273785a5d9a762c648aaa463ed6c
parent e4dce4c1c10354b01b55fab0073934f298d9c98c
Author: Matt Korostoff <MKorostoff@gmail.com>
Date: Wed, 17 Jun 2020 22:21:36 -0400
Improve instructions for scrolling
Diffstat:
3 files changed, 49 insertions(+), 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 @@
<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');
}
+
+
