Touch Target Navigation JavaScript Prototype
This is an experiment with making a touch selector that you can scrub across to change content. It's just a proof of concept, but I like the direction
-
Check out https://m3.material.io for how they are preventing the safari bottom nav from hiding so you get a constent experience
CSS
:;
:;
}
:;
:;
:;
:;
:;
:;
}
:;
}
:;
:;
:;
:;
}
:;
:;
}
JavaScript
const s =
const books =
: "All Systems Red",
: "Martha Wells",
: "all-systems-red-cover-1" },
: "Fool",
: "Christopher Moore",
: "fool-cover-1"
},
],
: "The Design Of Everyday Things",
: "Don Norman",
: "design-of-every-day-things-cover-1"
},
: "Hawkeye",
: "Matt Fraction",
: "hawkeye-cover-1"
},
],
: "The Diamond Age",
: "Neal Stephenson",
: "diamond-age-cover-1"
},
: "Neoromancer",
: "William Gibson",
: "neuromancer-cover-1"
},
],
: "The Trial",
: "Franz Kafka",
: "the-trial-cover-1"
},
: "A Scanner Darkly",
: "Philip K. Dick",
: "scanner-darkly-cover-1"
},
],
: "Dune",
: "Frank Herbert",
: "dune-cover-1"
},
: "The Gunslinger",
: "Stephen King",
: "the-gunslinger-cover-1"
},
]
]
const
event.
const x = Math.
const y = Math.
}
const
}
const
}
const
inputArea.
inputArea.
}
document.