Skip to content

Instantly share code, notes, and snippets.

@serverwentdown

serverwentdown/touchkeys.html

Created November 13, 2014 13:20
Show Gist options
  • Save serverwentdown/ad05ae2890c2d4463884 to your computer and use it in GitHub Desktop.
Save serverwentdown/ad05ae2890c2d4463884 to your computer and use it in GitHub Desktop.
Download ZIP
Some poorly-coded idea for keyboard-based "multitouch" (not multitouch for now) navigation and scrolling. By dragging your finger on the keyboard. The scrolling works!
Raw
touchkeys.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#cursor {
width: 48px;
height: 48px;
border-radius: 24px;
background-color: rgba(0, 0, 0, 0.75);
position: fixed;
top: -24px;
left: -24px;
transform: translate(0, 0);
transition: 0s opacity;
}
body {
width: 150%;
padding: 100px;
-webkit-font-smoothing: antialiased;
font-family: Lato;
font-size: 20px;
}
</style>
</head>
<body>
<div id="cursor"></div>
<h1>Some placeholder text</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, maiores, veniam? Delectus necessitatibus ex eaque aspernatur, cumque, sapiente voluptates odio vitae corporis, molestias distinctio expedita, facere illo quam unde. Omnis?</p>
<p>Quisquam amet qui maiores! Veniam animi, facere eaque alias beatae odio vel fuga blanditiis neque perspiciatis aperiam dolorum nesciunt quaerat quae, est, reiciendis illo sed. Reprehenderit sequi ab minus cumque.</p>
<p>Fugit commodi labore temporibus numquam dolores, quae repudiandae quia ducimus sequi itaque molestiae harum atque iure esse vel id? Aut ad veniam nemo, delectus? Labore fugit incidunt ducimus atque vitae.</p>
<p>Voluptatum, quasi, nostrum. Dolorem eos sequi mollitia illum. Possimus assumenda, dolore illo, hic, doloremque porro vitae alias omnis aperiam enim neque tempore. Repellat nam blanditiis, consequuntur itaque eaque enim id!</p>
<p>Vero tenetur aperiam sunt ut, fugiat alias deleniti molestias deserunt vitae libero quaerat iusto sint culpa obcaecati ullam minima dicta quibusdam. Itaque quaerat vero veniam! Eaque in qui, similique eligendi.</p>
<h2>A section of nothing</h2>
<p>Quasi deleniti adipisci nesciunt delectus, libero ad totam, consequuntur labore consectetur magni ex nobis vero quam minima cupiditate quae officia, et aliquid soluta harum id repellat eius vitae? Laboriosam, quaerat.</p>
<p>Eius beatae, placeat deleniti fuga, voluptate quam ratione quod eaque architecto voluptatibus quidem dolore voluptatum fugit unde corporis, voluptas veritatis quae perspiciatis ipsa laboriosam! Pariatur, iste, cum! Exercitationem, eveniet, facilis.</p>
<p>Laudantium, beatae ullam ex fugit similique perferendis voluptates necessitatibus, perspiciatis sed possimus laborum porro voluptate dolor illo vel, sequi architecto quibusdam. Nesciunt, eius, ducimus. Est, soluta. Alias enim, dolor ratione!</p>
<p>Corporis sapiente culpa hic quas voluptatibus consequatur consectetur minima rem rerum eveniet, corrupti, magni soluta. Vel adipisci, at voluptas quidem unde repudiandae consectetur eum commodi ad eveniet, aspernatur expedita tempora.</p>
<p>Nihil aut dolor maiores, beatae aliquam consequuntur voluptatem magni libero, minus vitae facilis ipsa harum? Labore dolorem ipsum laborum aliquam fuga rem aut corrupti hic non, totam inventore harum recusandae.</p>
<p>Beatae nemo quaerat atque, id voluptas sapiente eligendi, ipsum repellat quas fugiat autem laudantium tenetur commodi. Sint suscipit maiores est praesentium possimus quis, reiciendis. Cumque minus quisquam natus quas, suscipit.</p>
<p>Placeat minus nostrum alias aperiam, molestias est necessitatibus nihil beatae aut aliquam adipisci ad, deserunt et explicabo obcaecati iure eius vero molestiae mollitia! Illum quasi, tenetur totam necessitatibus temporibus nobis.</p>
<p>Vero ipsum optio provident facere dolores cupiditate excepturi velit possimus, veritatis, corrupti mollitia, maxime. Animi fugiat, ab nemo error esse ex dolor, eius enim cum, quasi maxime ducimus amet tempore.</p>
<p>Nobis sed incidunt magni consequatur. Tenetur est beatae quo commodi odit possimus, velit quae alias porro eos voluptatibus. Minima, asperiores. Odit minima laudantium obcaecati aut rem, impedit provident perspiciatis dolorem?</p>
<p>A magni tenetur eos placeat officiis sapiente culpa, id quod, ipsam, praesentium harum dicta at voluptatum saepe ducimus reprehenderit in cupiditate explicabo modi excepturi quidem ipsum. Quos maxime quo, reiciendis.</p>
<p>Explicabo ratione aut assumenda, minima nam architecto minus provident aspernatur necessitatibus cum dolores tempora consectetur dolore aperiam fuga perspiciatis. Ad, totam, sint. Repellendus minus dolorum illum cumque autem numquam enim.</p>
<p>Iusto veritatis, animi incidunt libero dolore perspiciatis voluptate a nihil, eaque quis, aperiam placeat, nesciunt ab culpa quos accusamus beatae earum minima deleniti numquam odit voluptas. Voluptatum, aperiam quam veniam?</p>
<p>Impedit consequuntur dolorem magni, incidunt consequatur nemo eos cupiditate fuga laborum animi ab mollitia commodi dignissimos provident expedita, suscipit ea in. Placeat fugit dolor, vitae molestiae accusamus eaque maiores consectetur?</p>
<p>Consequuntur ea, dolor debitis quae minus voluptatum quis voluptatem dicta. Voluptate, mollitia, necessitatibus nihil alias optio cum assumenda reprehenderit, atque repellendus minima libero aperiam. Obcaecati deserunt, tenetur natus commodi at!</p>
<p>Sunt vitae laboriosam, eum quasi quos quibusdam commodi sequi, quod corporis numquam aperiam hic voluptas nisi in. Aspernatur recusandae eius, aut accusamus officia, ipsum quia nobis eos, est in alias.</p>
<p>Nihil culpa, illum nulla porro. Ratione possimus dicta magnam, ipsam eveniet architecto voluptatem deleniti nesciunt fugiat quasi provident voluptate quis et quae laborum distinctio delectus inventore, non consectetur consequatur rem.</p>
<p>Deleniti accusantium dolores dolorum doloremque odit aspernatur, ea libero asperiores. Ad velit aut repudiandae nemo iste ipsa quidem, animi numquam, quasi repellendus quod iusto nulla quas sit error nesciunt, cupiditate?</p>
<p>Earum, quisquam quae pariatur amet quia porro recusandae nobis officia perferendis nisi eaque ullam optio nulla maiores consequuntur quam, aut inventore voluptatem ducimus excepturi libero ab dignissimos sunt totam! Unde?</p>
<p>Odio dolor alias maxime sint animi vitae cum perferendis deleniti quos quasi dolore, dicta cumque voluptatem eos, reiciendis natus earum tempore! Rem tempore ipsam porro non sed est reiciendis in?</p>
<p>Aperiam delectus, consequatur quia. Tenetur vero eos aut placeat illo laborum maxime dolor, maiores, odit nihil debitis mollitia, illum dolores quos? Hic magni maxime sapiente molestias dolor, nostrum, blanditiis qui.</p>
<p>Necessitatibus enim ad nobis voluptatum, culpa ipsam in facilis exercitationem quia repellendus autem, nemo, perferendis nesciunt libero distinctio nostrum et hic totam, repellat vitae error delectus quibusdam. Ab, obcaecati, ratione.</p>
<p>Eum explicabo repudiandae nostrum, dolores omnis ducimus voluptatum et cumque dicta, neque consectetur autem ex ad dolor rem libero. Animi optio, quasi ipsum, repellendus cumque aspernatur. Molestiae et enim autem!</p>
<p>Aspernatur provident ullam, cupiditate ut repellat, perspiciatis debitis! Recusandae delectus aut fugit quaerat quis, amet tempore non ab ea inventore molestias, voluptatibus suscipit explicabo natus quia vel magni quam eum!</p>
<p>Blanditiis odio ad quidem dolor praesentium! Eum, fugit, vitae. Pariatur enim ad cupiditate quos numquam minus voluptatem itaque, dolorem architecto sint, culpa dolore omnis, corporis dignissimos cum perferendis quibusdam voluptatum?</p>
<p>Vero labore ratione blanditiis molestias enim corporis aliquid dolor illum ad omnis autem, temporibus officiis cumque iste consectetur possimus ipsum fuga harum sed, pariatur id, assumenda reiciendis! Voluptatum, ab, nam.</p>
<p>Non aliquam distinctio, molestias est eius quia debitis autem incidunt placeat quod quas, neque officiis quos soluta quibusdam. Delectus quos sunt repudiandae fugiat aperiam, aliquam neque blanditiis minima facilis dolor.</p>
<p>Perferendis expedita nesciunt consequuntur ipsam doloribus obcaecati cumque ut porro alias. Accusamus laboriosam sapiente deserunt earum expedita, molestiae nisi pariatur quisquam quo tempora! Fugiat fuga similique saepe sequi alias blanditiis.</p>
<p>Doloremque illo ut facere, hic quas repellendus animi laborum vel corporis nam, consequuntur magnam aliquid odio dolorum at, officia, accusantium! Et maiores beatae exercitationem, eveniet quas! Laudantium dolorem esse officiis.</p>
<p>Ratione nulla quaerat soluta, optio. Dolore, ut, maxime dicta labore inventore dolorum cum optio magni, asperiores enim rerum repellat distinctio molestiae earum voluptas possimus magnam nesciunt fuga veniam omnis natus.</p>
<p>Voluptatum earum repellendus molestias alias officia fugit perspiciatis, soluta recusandae, aperiam itaque porro id vero quae incidunt? Ipsam quam omnis impedit ipsum provident, accusamus voluptate maiores placeat, voluptatibus, saepe temporibus.</p>
<p>Neque quas illo quam perspiciatis quos quidem sit itaque autem, qui saepe consequuntur harum beatae optio nostrum dolores libero delectus architecto impedit, tempora maxime, ipsum suscipit? Libero mollitia fugiat recusandae.</p>
<p>Quaerat, corrupti eveniet, culpa quia error deleniti nesciunt, facilis mollitia dicta velit itaque sint recusandae quo eius quasi laudantium nihil blanditiis eum. Sint beatae, ad saepe quia recusandae aperiam! Harum.</p>
<p>Soluta possimus minima, adipisci minus. Sed perferendis nulla nisi ab impedit, a quibusdam tempore similique maxime officia quod magni voluptates, iure exercitationem rem, obcaecati laudantium cupiditate id dolorem consectetur ipsa.</p>
<p>Harum explicabo ipsam repellat eos molestiae in incidunt id placeat tempore, voluptatibus minus dolore architecto rem, consectetur aperiam debitis, voluptate beatae mollitia quibusdam ea atque maiores nesciunt recusandae ipsum quidem?</p>
<p>Debitis saepe asperiores at fugiat minus quo, nostrum voluptatum dolorem possimus sit. Rem necessitatibus non, animi nisi quam aut reiciendis vitae a, architecto! Itaque doloremque qui, quidem odio dolorum aperiam.</p>
<p>Eveniet dignissimos sed, ab quas! Ullam in doloremque, nihil labore neque impedit debitis nisi ut voluptates cupiditate sed culpa illo nostrum. Praesentium impedit quam veniam, cumque hic commodi excepturi assumenda!</p>
<p>Eveniet itaque porro dolore, culpa cumque vel debitis quae libero id quo quasi repellendus vitae ipsum nesciunt praesentium. Iure facere, autem optio molestias rem dolores sequi maxime sint est in!</p>
<p>Excepturi sapiente voluptatum dolor nihil ea eaque repellendus nulla, natus minus reiciendis. Nulla iste, nihil a accusamus error sunt odio voluptas iusto esse explicabo veniam quidem quia sed soluta cupiditate.</p>
<p>Aspernatur repudiandae corporis, perspiciatis omnis id amet a iusto dolores fugit aliquid. Possimus ad illo quisquam, eveniet tempora corporis, odio unde a placeat, dolore fugiat veritatis, saepe maxime. Eaque, suscipit.</p>
<p>Dolor, ex, fugiat corporis quibusdam reprehenderit iure error ipsum, asperiores vel harum veniam incidunt tempora laborum perspiciatis quia est exercitationem rem ipsa nostrum temporibus veritatis itaque? Eaque reprehenderit, sit magni.</p>
<p>Velit debitis similique eum provident fugit, aut maiores illo ipsa ducimus repudiandae ratione. Nulla, aut totam, omnis debitis enim adipisci, nostrum dicta dolorum nobis eum odit officia? Voluptas, voluptates, sint!</p>
<p>Nulla, deleniti ab nam ipsam fugit sit cum repellat minus blanditiis possimus. Laboriosam omnis magni illo! Nobis porro, voluptates consequuntur numquam rem laborum, ex, aliquid non voluptas, tempore voluptate soluta.</p>
<p>Earum, sit, laborum aut dolore temporibus excepturi? Laborum fugiat esse, voluptatum ipsum deleniti reprehenderit mollitia eaque non quaerat unde, delectus vitae iure labore aliquam harum alias quae suscipit molestias commodi.</p>
<p>Nihil autem alias eaque dolorem nostrum, minus suscipit reiciendis? Consectetur sed cumque, corporis suscipit hic debitis reprehenderit illum delectus cupiditate, dolores voluptates id similique laboriosam distinctio, eveniet. Deserunt, libero natus.</p>
<p>Voluptas neque quisquam consectetur vitae vero vel at ducimus! Et at excepturi iste nulla magni eveniet, sint assumenda placeat. Officiis cupiditate ratione esse mollitia nesciunt commodi, placeat veritatis accusamus fuga?</p>
<p>Ut illo suscipit asperiores iusto nisi, voluptate commodi a consequuntur temporibus sed nobis distinctio culpa earum assumenda tenetur obcaecati libero omnis. Ad vitae magnam, unde reprehenderit nesciunt ut officia nobis.</p>
<p>Fugiat repellat rerum aliquid. Aperiam tenetur laudantium fugiat iusto nemo, at eligendi, quam porro, molestias quos corporis ullam molestiae sed odit eius. Expedita totam quae eaque tenetur, cum iste laudantium.</p>
<p>Labore iusto itaque modi, libero hic, nesciunt laudantium beatae nemo aut in, iste impedit adipisci soluta atque mollitia dignissimos error dolorum, magni nisi culpa tempora corporis sed totam. Ratione, impedit.</p>
<p>Quia corporis ad, unde, praesentium esse laudantium ut dolores aspernatur iure, amet temporibus at doloremque, saepe perspiciatis qui. Similique velit tempore ut quaerat ipsam neque explicabo, harum in eius rerum!</p>
<p>Doloremque nulla laborum laboriosam consectetur iure vel fugit hic eius magnam facilis debitis reiciendis eum fugiat harum minima soluta unde et iusto rerum, similique error, eos minus, suscipit! Laborum, maxime.</p>
<p>Ducimus asperiores impedit vel odio temporibus soluta, tenetur iusto dignissimos incidunt vero ea velit exercitationem suscipit non fugit a doloribus, quia nesciunt illo deleniti nam perspiciatis. Asperiores impedit cupiditate quo!</p>
<p>Saepe quod a inventore debitis consequatur molestiae nulla voluptatum quisquam eius, rerum reiciendis unde dolorem ex obcaecati voluptate, ea beatae quam! Iste qui debitis amet, quam nemo fuga nobis tenetur.</p>
<p>Dolor eum, itaque quo maiores est veritatis magni impedit adipisci nam error corrupti, dolorum magnam molestiae iste odio, officiis repellendus totam! Ducimus labore quaerat sapiente iusto qui. Quasi aliquid, animi.</p>
<p>Minima reiciendis dolores ab reprehenderit perspiciatis rerum, esse dolorum nam. Doloremque ea ad totam voluptas sint aut consectetur. Voluptates rem possimus libero sint, natus quasi quia alias commodi qui est.</p>
<p>Possimus id assumenda molestias mollitia pariatur optio alias, laudantium, est, tempore labore asperiores cumque ex nesciunt quos earum doloribus recusandae minus natus tenetur laborum dolor eum obcaecati consequuntur excepturi. Cupiditate.</p>
<p>Quo itaque animi inventore eaque veritatis, aliquam explicabo architecto eum temporibus fuga numquam, quaerat. Reprehenderit nulla, sed modi natus? Velit asperiores rem temporibus veritatis unde eaque minima consequatur earum sequi!</p>
<p>Laborum optio quisquam est dolore, nulla corporis sequi odio eius itaque et obcaecati similique, esse eos asperiores explicabo saepe perferendis! Ipsa illo maxime, quidem similique magni nihil eligendi praesentium minima.</p>
<p>Possimus rerum blanditiis quam a mollitia facere laudantium corporis! Veniam ullam expedita doloribus aperiam porro ratione repellendus repudiandae, nostrum distinctio fugiat, nam maiores, reiciendis blanditiis laborum dignissimos eligendi alias. Deleniti.</p>
<p>Rerum itaque fuga libero dicta excepturi! Quisquam dolorum dolore consectetur vitae tempore, excepturi nihil fugit similique et quae impedit illum reiciendis quis placeat. Nemo qui autem eum, consectetur, corporis enim.</p>
<p>Ut in exercitationem tempore impedit quasi quod quidem cupiditate quibusdam, eaque praesentium illo nobis cum quaerat incidunt quisquam dolorum nihil temporibus? Magni soluta perferendis autem ab temporibus, maxime illo vitae.</p>
<p>Quae expedita, quam. Debitis totam, fuga deserunt quas assumenda quos aliquam perferendis libero labore hic ut doloribus! Perferendis iste, illo modi hic placeat tenetur iusto, debitis non illum tempora perspiciatis.</p>
<p>Velit, porro eius consequatur itaque est nam delectus ut dolorem qui veritatis voluptate deleniti sapiente nihil distinctio esse fugit quisquam rerum facere ratione quidem. Dolorem nemo dolorum expedita fugit delectus.</p>
<p>Placeat quaerat consequuntur doloribus et enim repellat qui nisi dolores iusto, ex corrupti non tempore inventore quam architecto autem, sint repudiandae odio, ducimus? Ullam magnam at libero quos est. Aperiam!</p>
<p>Officia unde recusandae totam rerum, distinctio nemo tempora, ad consectetur officiis voluptatibus obcaecati? Saepe, eos cupiditate at! Iure explicabo quasi, autem, est esse cum error reiciendis. Recusandae deleniti facilis laborum.</p>
<p>Sequi in ducimus nisi similique ex explicabo! Ducimus vero, a neque nesciunt aperiam, atque voluptatum impedit aliquid hic quo iusto aspernatur officiis vel quos aut numquam incidunt quas quisquam quod?</p>
<p>Eaque tenetur illo eius, ea nulla! Aspernatur natus, molestiae repellendus amet est optio? Modi rerum quis aliquam sequi adipisci dolores tempore eos distinctio, nobis, doloribus! Voluptatibus laboriosam magnam cumque architecto?</p>
<p>Aperiam, fugiat reiciendis, quisquam eaque accusantium, at eum vel molestias sit asperiores tempora rerum aspernatur, dolor atque. Beatae impedit ut quae eligendi officiis adipisci, totam ea illum fugit quia, harum.</p>
<p>Quasi numquam minima tempora quas fugit, maiores corrupti reprehenderit libero, nostrum debitis accusamus similique omnis praesentium quo quae, enim magni architecto! Voluptatem repudiandae id omnis sint quam vel reprehenderit praesentium.</p>
<p>Quos ratione illum itaque veritatis, labore animi vero, libero quo accusamus pariatur totam necessitatibus quis distinctio a ea fugit sapiente! Porro laborum eveniet, ab iusto est inventore harum perferendis fuga!</p>
<p>Numquam porro quis omnis quas tempora nostrum modi dolorem sit fugit temporibus commodi, aut nisi deleniti? Esse porro rem aliquam. Suscipit porro, fuga at obcaecati maiores asperiores odio ducimus dolor!</p>
<p>Asperiores commodi expedita consequuntur hic, impedit rerum fugit facere quidem quasi alias, dicta illum laudantium distinctio velit ab corporis perspiciatis aperiam cumque veniam quibusdam culpa doloribus sit voluptate? Architecto, pariatur.</p>
<p>At numquam, voluptatum sequi, voluptatem culpa perferendis quae ad eveniet dolor ratione totam autem. Beatae neque quos, dolorem temporibus, odit, eaque deleniti iure nihil quidem molestias enim. Reiciendis, corporis, quaerat.</p>
<p>Blanditiis incidunt ipsam nam impedit porro expedita mollitia dolorem ipsum debitis assumenda deserunt quasi maxime animi possimus eaque molestias asperiores a neque ullam ducimus, earum sequi accusantium dolorum ex nesciunt.</p>
<p>Illum culpa tenetur corporis eum repellat autem iste illo, nemo quam dolorum recusandae et facere accusantium ex. Mollitia laudantium voluptatum quis facilis quos vel tempore totam delectus, quibusdam rem, explicabo.</p>
<p>Laborum, vel unde molestiae, iusto inventore ex nobis possimus, adipisci voluptates officiis asperiores architecto consequuntur sequi harum. Saepe veritatis recusandae delectus praesentium autem alias soluta at! Quod laboriosam dicta accusamus.</p>
<p>Esse tenetur, numquam iste. Esse amet ratione nesciunt sequi aspernatur, laborum labore numquam ipsa neque, eligendi vel suscipit magnam, dolores dolor debitis error magni illo, illum veniam quia deserunt quod.</p>
<p>Quam voluptatem, cum, fugiat laboriosam voluptates rerum sint! Error, deleniti odit dicta nesciunt accusamus itaque pariatur ut qui porro similique, vel delectus aut odio commodi ipsum? Nam accusantium, quas incidunt.</p>
<p>Enim amet obcaecati exercitationem, excepturi vel, recusandae reprehenderit deleniti mollitia laborum ullam blanditiis expedita! Error molestias veniam voluptatum, commodi odit suscipit laudantium, distinctio rerum fugiat, incidunt est quidem a. Voluptatem?</p>
<p>Aut molestiae iure totam, id. Commodi ipsam accusantium obcaecati, natus, nobis in tempore quisquam excepturi reiciendis voluptates tempora reprehenderit nisi dolorum et eaque, aspernatur! Perferendis sunt voluptatibus obcaecati debitis quis.</p>
<p>Natus corporis dicta voluptatibus ad vel illo minus laudantium vero explicabo molestias! Ipsam dolores deserunt, expedita nulla amet aliquid repellendus consequuntur id laudantium, ipsa excepturi in, eligendi culpa ratione veritatis.</p>
<p>Eaque cumque, esse optio fuga nam facilis voluptatum dolores quibusdam illo ullam, sint, minima beatae sunt quidem ipsa molestiae. Ratione, debitis. Repellendus suscipit, hic sunt ducimus illum quidem saepe iure.</p>
<p>Optio odio maiores illo enim est veritatis nihil architecto labore cumque earum doloremque repudiandae, harum aut unde voluptatem sint, numquam dolor alias sapiente culpa consequatur, nemo totam consectetur aliquam hic.</p>
<p>Similique iure voluptates id qui magni animi aperiam perspiciatis doloremque possimus molestias placeat, tempora dolore consequuntur, consectetur mollitia inventore corporis ipsum quasi reiciendis earum modi, laboriosam iste maiores. Iste, inventore.</p>
<p>Reiciendis ut impedit, maiores. Tenetur suscipit eius, eaque dolore, non sint! Qui quis, consequuntur magnam. Nam ea vel praesentium, veritatis quos natus quam cum adipisci, ipsam esse beatae possimus odio!</p>
<p>Magnam beatae provident quod voluptas, iure. Odio eius enim odit illum consequuntur sit, hic nesciunt neque ut doloremque aperiam veritatis unde sunt dolores temporibus cupiditate commodi autem provident, harum iste.</p>
<p>Facere autem, omnis ut eius necessitatibus, quod recusandae modi magnam dolor fugiat rerum possimus sint, voluptate illo aliquid. Autem nostrum, eum impedit tempore, obcaecati perspiciatis veniam officiis aliquid soluta fugit!</p>
<p>Possimus quaerat aliquid nemo tempore laboriosam explicabo provident repellat, natus alias. Eligendi velit aliquam rem, accusamus sunt ut, laudantium iure magnam ipsam, fuga inventore veritatis nam beatae, mollitia vero impedit.</p>
<p>Neque repellendus quidem ipsa minima, velit eaque molestiae veniam repudiandae aperiam, suscipit labore, provident quisquam fugiat, minus? Nemo numquam nobis quo maiores, dolore nisi optio, labore veritatis modi explicabo ab!</p>
<p>Eos nisi, animi consequuntur! Excepturi qui, dolorum quod inventore eum quia modi eos vitae placeat animi fuga distinctio, accusantium eius ut necessitatibus, porro corrupti in aliquam minima. Aliquam, modi, incidunt.</p>
<p>Nisi libero voluptate porro aut ab praesentium ad excepturi dignissimos. Inventore aut optio cupiditate odit quam distinctio eaque officiis, culpa quis temporibus placeat deleniti numquam unde aliquam. Iure, dignissimos debitis?</p>
<p>Totam, explicabo ex tempore nemo! Quos tempore excepturi a ipsa magni, sequi placeat! Mollitia perferendis reprehenderit dolores eaque voluptatem deserunt laboriosam, odio, fugit consectetur provident, totam. Dignissimos autem ea aliquam.</p>
<p>Quasi, repellendus commodi non! Earum, eius. Praesentium obcaecati voluptatem repellat numquam, dignissimos nihil excepturi eaque corrupti? Similique ipsa natus, harum animi velit, quos provident officia. Est, ea temporibus atque sunt!</p>
<p>Eum adipisci fugit voluptate fugiat fuga, obcaecati sapiente exercitationem quos odit aperiam beatae velit enim quis culpa soluta, eius earum atque commodi. Iure distinctio porro soluta, accusamus quaerat est commodi.</p>
<p>Fugiat dolorum labore esse nam dolores atque, quisquam nihil similique tenetur eius sed dignissimos illo sint cum vel. Ratione vitae voluptatum quo, facilis architecto soluta nemo aliquam adipisci ea laudantium.</p>
<p>Fugit eum rerum aut quod, neque vel aliquid magnam iusto ducimus nam omnis, at nostrum voluptate sed, aliquam. Porro iure possimus delectus. Ipsum hic earum voluptatem eos possimus! Sint, qui!</p>
<script>
var min = [0, 1];
var max = [13, 5];
// KEYMAP
var keymap = {
192: [0, 1],
49: [1, 1],
50: [2, 1],
51: [3, 1],
52: [4, 1],
53: [5, 1],
54: [6, 1],
55: [7, 1],
56: [8, 1],
57: [9, 1],
48: [10, 1],
189: [11, 1],
187: [12, 1],
8: [13.25, 1],
// NEXT LINE
9: [0.25, 2],
81: [1.5, 2],
87: [2.5, 2],
69: [3.5, 2],
82: [4.5, 2],
84: [5.5, 2],
89: [6.5, 2],
85: [7.5, 2],
73: [8.5, 2],
79: [9.5, 2],
80: [10.5, 2],
219: [11.5, 2],
221: [12.5, 2],
220: [13.5, 2],
// NEXT LINE
20: [0.5, 3],
65: [1.75, 3],
83: [2.75, 3],
68: [3.75, 3],
70: [4.75, 3],
71: [5.75, 3],
72: [6.75, 3],
74: [7.75, 3],
75: [8.75, 3],
76: [9.75, 3],
186: [10.75, 3],
222: [11.75, 3],
13: [13, 3],
// NEXT LINE
16: [0.5, 4, 12.75, 4],
90: [2.25, 4],
88: [3.25, 4],
67: [4.25, 4],
86: [5.25, 4],
66: [6.25, 4],
78: [7.25, 4],
77: [8.25, 4],
188: [9.25, 4],
190: [10.25, 4],
191: [11.25, 4],
// 16: [12.75, 4],
// NEXT LINE
17: [0, 5],
18: [1, 5],
91: [2, 5, 10.5, 5],
32: [3.125, 5, 9.375, 5],
93: [6.25, 5],
// 32: [9.375, 5],
// 91: [10.5, 5],
};
// ARROWS
var arrows = {
38: "up",
40: "down",
37: "left",
39: "right"
};
var cursor = document.getElementById("cursor");
var factor = [1, 1];
var current = [0, 0];
var arrowscale = [4, 4];
var sequence = [];
var resetdragtimer;
function resetdrag() {
// console.log(sequence);
if (sequence.length > 1 && sequence[0].toString() == sequence[1].toString()) {
if (sequence.length == 2) {
console.log("double tap");
}
else if (sequence.length == 3) {
console.log("triple tap");
}
cursor.style.transition = "0s opacity, 0s transform";
cursor.style.opacity = 1;
setTimeout(function () {
cursor.style.transition = "1s 0.1s opacity, 0s transform";
cursor.style.opacity = 0;
}, 16);
}
sequence = [];
}
var scrollinterval, scrolltimeout;
var scrolltime = 1000;
var scrollfpms = 50 / 1000; // frames per ms
var scrolltimeperframe = Math.ceil(1 / scrollfpms);
var scrollframes = scrolltime / scrolltimeperframe;
function toScroll(x, y) {
clearTimeout(scrollinterval);
clearTimeout(scrolltimeout);
var now = [window.scrollX, window.scrollY];
window.scrollTo(x, y);
var future = [window.scrollX, window.scrollY];
window.scrollTo(now[0], now[1]);
var perframe = [
(future[0] - now[0]) / scrollframes,
(future[1] - now[1]) / scrollframes
];
// console.log(now, future, perframe);
scrollinterval = setInterval(function () {
now[0] += perframe[0];
now[1] += perframe[1];
window.scrollTo(now[0], now[1]);
// console.log(window.scrollY - future[1], perframe[1]);
// if (
// Math.abs(window.scrollX - future[0]) <= Math.abs(perframe[0]) &&
// Math.abs(window.scrollY - future[1]) <= Math.abs(perframe[1])
// ) {
// setTimeout(function () {
// window.scrollBy(perframe[0], perframe[1]);
// }, scrolltimeperframe);
// setTimeout(function () {
// window.scrollTo(future[0], future[1]);
// }, scrolltimeperframe * 2);
// clearInterval(scrollinterval);
// }
}, scrolltimeperframe); // ms per frame
scrolltimeout = setTimeout(function () {
clearInterval(scrollinterval);
setTimeout(function () {
window.scrollTo(future[0], future[1]);
}, scrolltimeperframe);
}, scrolltime + scrolltimeperframe * 2);
}
window.addEventListener("keydown", function (e) {
var newkey = keymap[e.which];
var arrow = arrows[e.which];
if (newkey) {
e.preventDefault();
factor[0] = window.innerWidth / (max[0] - min[0]);
factor[1] = window.innerHeight / (max[1] - min[1]);
current[0] = newkey[0] * factor[0] - min[0] * factor[0];
current[1] = newkey[1] * factor[1] - min[1] * factor[1];
sequence.push([current[0], current[1]]);
clearTimeout(resetdragtimer);
setTimeout(function () {
clearTimeout(resetdragtimer);
}, 50);
if (sequence.length > 1) {
if (
sequence[0].toString() == sequence[1].toString()
) {
setTimeout(resetdrag, 200);
}
else {
toScroll(
window.scrollX - sequence[sequence.length - 1][0] + sequence[0][0],
window.scrollY - sequence[sequence.length - 1][1] + sequence[0][1]
);
}
}
}
else if (arrow) {
e.preventDefault();
if (arrow == "up") {
current[1] -= arrowscale[1];
}
else if (arrow == "down") {
current[1] += arrowscale[1];
}
else if (arrow == "left") {
current[0] -= arrowscale[0];
}
else if (arrow == "right") {
current[0] += arrowscale[0];
}
}
if (sequence.length > 1) {
cursor.style.transition = "0s opacity, 1s transform";
}
else {
cursor.style.transition = "0s opacity, 0s transform";
}
cursor.style.opacity = 0.5;
cursor.style.transform = "translate(" + current[0] + "px, " + current[1] + "px)";
});
window.addEventListener("keyup", function (e) {
clearTimeout(resetdragtimer);
resetdragtimer = setTimeout(resetdrag, 200);
cursor.style.transition = "1s 1s opacity, 1s transform";
cursor.style.opacity = 0;
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment