Skip to content

Instantly share code, notes, and snippets.

@nolanlawson

nolanlawson/ie.gif

Last active August 16, 2017 23:48
Show Gist options
  • Save nolanlawson/9b84dacf370d4efcf03e4f4719b7f0f0 to your computer and use it in GitHub Desktop.
Save nolanlawson/9b84dacf370d4efcf03e4f4719b7f0f0 to your computer and use it in GitHub Desktop.
Download ZIP
Scroll jank demo - touch
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
label.explainer {
display: block;
margin-top: 20px;
margin-bottom: 10px;
}
body {
max-width: 800px;
margin: 0 auto;
padding: 30px;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
font-size: 1.2em;
color: #333;
background: #fafafa;
}
button {
margin: 5px;
font-size: 18px;
}
#janking {
display: none;
position: absolute;
left: 20px;
top: 20px;
font-size: 20px;
background: rgba(0, 0, 0, 0.7);
color: #fafafa;
padding: 30px;
border: 1px solid #ededed;
border-radius: 3px;
}
fieldset {
margin: 20px 0;
border: 2px solid #ededed;
}
input {
font-size: 18px;
}
.emoji {
font-family:"Segoe UI Emoji";
}
.list {
/* max-height: 200px;
overflow-y: scroll; */
border: 2px solid #ededed;
padding: 10px;
}
.image {
text-align: center;
border: 2px solid #ededed;
padding: 10px;
margin: 10px 0;
}
.caption {
font-style: italic;
font-size: 0.8em;
}
#jankme {
font-size: 20px;
padding: 10px;
}
.centered {
text-align: center;
}
.inputwrapper {
margin: 10px 0;
}
</style>
</head>
<body>
<span id="janking">Jank mode enabled! <span class="emoji">&#x1F40C;</span> Janking&hellip;</span>
<h1>Demo of page janking - touch</h1>
<p>Click "Jank me" to jank the page for 5 seconds. Try to interact with the page when it's in "jank mode" and see what happens!</p>
<div class="centered">
<button id="jankme" type="button">Jank me! <span class="emoji">&#x1F40C;</span></button>
</div>
<fieldset>
<div class="inputwrapper">
<label for="emptylistener">Add an empty global touchstart listener</label>
<input id="emptylistener" name="emptylistener" type="checkbox"></input>
</div>
<!--<div class="inputwrapper">
<label for="conditionallistener">Add a conditional global listener</label>
<input id="conditionallistener" name="conditionallistener" type="checkbox"></input>
</div>
<div class="inputwrapper">
<label for="nonemptylistener">Add a non-empty global listener</label>
<input id="nonemptylistener" name="nonemptylistener" type="checkbox"></input>
</div>-->
</fieldset>
<div class="image">
<img src="ie.gif" width="102" height="92"/>
<p class="caption">This site is best viewed with gratuitious animated GIFs</p>
</div>
<fieldset>
<div class="inputwrapper">
<label for="theinput">Try typing in this input:</label>
<input id="theinput" name="theinput" type="text"/>
</div>
<div class="inputwrapper">
<label for="thebutton">Or tapping this button:</label>
<button id="thebutton" name="thebutton" type="button">Click me!</button>
</div>
<div class="inputwrapper">
<label for="thecheckbox">Or ticking this checkbox:</label>
<input id="thecheckbox" name="thecheckbox" type="checkbox"></input>
<label for="thecheckbox">Check me!</label>
</div>
</fieldset>
<div class="list">
<p>And here's a super long list. Try scrolling it!</p>
<ul>
<li>Bulbasaur</li><li>Ivysaur</li><li>Venusaur</li><li>Charmander</li><li>Charmeleon</li><li>Charizard</li><li>Squirtle</li><li>Wartortle</li><li>Blastoise</li><li>Caterpie</li><li>Metapod</li><li>Butterfree</li><li>Weedle</li><li>Kakuna</li><li>Beedrill</li><li>Pidgey</li><li>Pidgeotto</li><li>Pidgeot</li><li>Rattata</li><li>Raticate</li><li>Spearow</li><li>Fearow</li><li>Ekans</li><li>Arbok</li><li>Pikachu</li><li>Raichu</li><li>Sandshrew</li><li>Sandslash</li><li>Nidoran</li><li>Nidorina</li><li>Nidoqueen</li><li>Nidoran</li><li>Nidorino</li><li>Nidoking</li><li>Clefairy</li><li>Clefable</li><li>Vulpix</li><li>Ninetales</li><li>Jigglypuff</li><li>Wigglytuff</li><li>Zubat</li><li>Golbat</li><li>Oddish</li><li>Gloom</li><li>Vileplume</li><li>Paras</li><li>Parasect</li><li>Venonat</li><li>Venomoth</li><li>Diglett</li><li>Dugtrio</li><li>Meowth</li><li>Persian</li><li>Psyduck</li><li>Golduck</li><li>Mankey</li><li>Primeape</li><li>Growlithe</li><li>Arcanine</li><li>Poliwag</li><li>Poliwhirl</li><li>Poliwrath</li><li>Abra</li><li>Kadabra</li><li>Alakazam</li><li>Machop</li><li>Machoke</li><li>Machamp</li><li>Bellsprout</li><li>Weepinbell</li><li>Victreebel</li><li>Tentacool</li><li>Tentacruel</li><li>Geodude</li><li>Graveler</li><li>Golem</li><li>Ponyta</li><li>Rapidash</li><li>Slowpoke</li><li>Slowbro</li><li>Magnemite</li><li>Magneton</li><li>Farfetch'd</li><li>Doduo</li><li>Dodrio</li><li>Seel</li><li>Dewgong</li><li>Grimer</li><li>Muk</li><li>Shellder</li><li>Cloyster</li><li>Gastly</li><li>Haunter</li><li>Gengar</li><li>Onix</li><li>Drowzee</li><li>Hypno</li><li>Krabby</li><li>Kingler</li><li>Voltorb</li><li>Electrode</li><li>Exeggcute</li><li>Exeggutor</li><li>Cubone</li><li>Marowak</li><li>Hitmonlee</li><li>Hitmonchan</li><li>Lickitung</li><li>Koffing</li><li>Weezing</li><li>Rhyhorn</li><li>Rhydon</li><li>Chansey</li><li>Tangela</li><li>Kangaskhan</li><li>Horsea</li><li>Seadra</li><li>Goldeen</li><li>Seaking</li><li>Staryu</li><li>Starmie</li><li>Mr. Mime</li><li>Scyther</li><li>Jynx</li><li>Electabuzz</li><li>Magmar</li><li>Pinsir</li><li>Tauros</li><li>Magikarp</li><li>Gyarados</li><li>Lapras</li><li>Ditto</li><li>Eevee</li><li>Vaporeon</li><li>Jolteon</li><li>Flareon</li><li>Porygon</li><li>Omanyte</li><li>Omastar</li><li>Kabuto</li><li>Kabutops</li><li>Aerodactyl</li><li>Snorlax</li><li>Articuno</li><li>Zapdos</li><li>Moltres</li><li>Dratini</li><li>Dragonair</li><li>Dragonite</li><li>Mewtwo</li><li>Mew</li><li>Chikorita</li><li>Bayleef</li><li>Meganium</li><li>Cyndaquil</li><li>Quilava</li><li>Typhlosion</li><li>Totodile</li><li>Croconaw</li><li>Feraligatr</li><li>Sentret</li><li>Furret</li><li>Hoothoot</li><li>Noctowl</li><li>Ledyba</li><li>Ledian</li><li>Spinarak</li><li>Ariados</li><li>Crobat</li><li>Chinchou</li><li>Lanturn</li><li>Pichu</li><li>Cleffa</li><li>Igglybuff</li><li>Togepi</li><li>Togetic</li><li>Natu</li><li>Xatu</li><li>Mareep</li><li>Flaaffy</li><li>Ampharos</li><li>Bellossom</li><li>Marill</li><li>Azumarill</li><li>Sudowoodo</li><li>Politoed</li><li>Hoppip</li><li>Skiploom</li><li>Jumpluff</li><li>Aipom</li><li>Sunkern</li><li>Sunflora</li><li>Yanma</li><li>Wooper</li><li>Quagsire</li><li>Espeon</li><li>Umbreon</li><li>Murkrow</li><li>Slowking</li><li>Misdreavus</li><li>Unown</li><li>Wobbuffet</li><li>Girafarig</li><li>Pineco</li><li>Forretress</li><li>Dunsparce</li><li>Gligar</li><li>Steelix</li><li>Snubbull</li><li>Granbull</li><li>Qwilfish</li><li>Scizor</li><li>Shuckle</li><li>Heracross</li><li>Sneasel</li><li>Teddiursa</li><li>Ursaring</li><li>Slugma</li><li>Magcargo</li><li>Swinub</li><li>Piloswine</li><li>Corsola</li><li>Remoraid</li><li>Octillery</li><li>Delibird</li><li>Mantine</li><li>Skarmory</li><li>Houndour</li><li>Houndoom</li><li>Kingdra</li><li>Phanpy</li><li>Donphan</li><li>Porygon2</li><li>Stantler</li><li>Smeargle</li><li>Tyrogue</li><li>Hitmontop</li><li>Smoochum</li><li>Elekid</li><li>Magby</li><li>Miltank</li><li>Blissey</li><li>Raikou</li><li>Entei</li><li>Suicune</li><li>Larvitar</li><li>Pupitar</li><li>Tyranitar</li><li>Lugia</li><li>Ho-Oh</li><li>Celebi</li><li>Treecko</li><li>Grovyle</li><li>Sceptile</li><li>Torchic</li><li>Combusken</li><li>Blaziken</li><li>Mudkip</li><li>Marshtomp</li><li>Swampert</li><li>Poochyena</li><li>Mightyena</li><li>Zigzagoon</li><li>Linoone</li><li>Wurmple</li><li>Silcoon</li><li>Beautifly</li><li>Cascoon</li><li>Dustox</li><li>Lotad</li><li>Lombre</li><li>Ludicolo</li><li>Seedot</li><li>Nuzleaf</li><li>Shiftry</li><li>Taillow</li><li>Swellow</li><li>Wingull</li><li>Pelipper</li><li>Ralts</li><li>Kirlia</li><li>Gardevoir</li><li>Surskit</li><li>Masquerain</li><li>Shroomish</li><li>Breloom</li><li>Slakoth</li><li>Vigoroth</li><li>Slaking</li><li>Nincada</li><li>Ninjask</li><li>Shedinja</li><li>Whismur</li><li>Loudred</li><li>Exploud</li><li>Makuhita</li><li>Hariyama</li><li>Azurill</li><li>Nosepass</li><li>Skitty</li><li>Delcatty</li><li>Sableye</li><li>Mawile</li><li>Aron</li><li>Lairon</li><li>Aggron</li><li>Meditite</li><li>Medicham</li><li>Electrike</li><li>Manectric</li><li>Plusle</li><li>Minun</li><li>Volbeat</li><li>Illumise</li><li>Roselia</li><li>Gulpin</li><li>Swalot</li><li>Carvanha</li><li>Sharpedo</li><li>Wailmer</li><li>Wailord</li><li>Numel</li><li>Camerupt</li><li>Torkoal</li><li>Spoink</li><li>Grumpig</li><li>Spinda</li><li>Trapinch</li><li>Vibrava</li><li>Flygon</li><li>Cacnea</li><li>Cacturne</li><li>Swablu</li><li>Altaria</li><li>Zangoose</li><li>Seviper</li><li>Lunatone</li><li>Solrock</li><li>Barboach</li><li>Whiscash</li><li>Corphish</li><li>Crawdaunt</li><li>Baltoy</li><li>Claydol</li><li>Lileep</li><li>Cradily</li><li>Anorith</li><li>Armaldo</li><li>Feebas</li><li>Milotic</li><li>Castform</li><li>Kecleon</li><li>Shuppet</li><li>Banette</li><li>Duskull</li><li>Dusclops</li><li>Tropius</li><li>Chimecho</li><li>Absol</li><li>Wynaut</li><li>Snorunt</li><li>Glalie</li><li>Spheal</li><li>Sealeo</li><li>Walrein</li><li>Clamperl</li><li>Huntail</li><li>Gorebyss</li><li>Relicanth</li><li>Luvdisc</li><li>Bagon</li><li>Shelgon</li><li>Salamence</li><li>Beldum</li><li>Metang</li><li>Metagross</li><li>Regirock</li><li>Regice</li><li>Registeel</li><li>Latias</li><li>Latios</li><li>Kyogre</li><li>Groudon</li><li>Rayquaza</li><li>Jirachi</li><li>Deoxys</li><li>Turtwig</li><li>Grotle</li><li>Torterra</li><li>Chimchar</li><li>Monferno</li><li>Infernape</li><li>Piplup</li><li>Prinplup</li><li>Empoleon</li><li>Starly</li><li>Staravia</li><li>Staraptor</li><li>Bidoof</li><li>Bibarel</li><li>Kricketot</li><li>Kricketune</li><li>Shinx</li><li>Luxio</li><li>Luxray</li><li>Budew</li><li>Roserade</li><li>Cranidos</li><li>Rampardos</li><li>Shieldon</li><li>Bastiodon</li><li>Burmy</li><li>Wormadam</li><li>Mothim</li><li>Combee</li><li>Vespiquen</li><li>Pachirisu</li><li>Buizel</li><li>Floatzel</li><li>Cherubi</li><li>Cherrim</li><li>Shellos</li><li>Gastrodon</li><li>Ambipom</li><li>Drifloon</li><li>Drifblim</li><li>Buneary</li><li>Lopunny</li><li>Mismagius</li><li>Honchkrow</li><li>Glameow</li><li>Purugly</li><li>Chingling</li><li>Stunky</li><li>Skuntank</li><li>Bronzor</li><li>Bronzong</li><li>Bonsly</li><li>Mime Jr.</li><li>Happiny</li><li>Chatot</li><li>Spiritomb</li><li>Gible</li><li>Gabite</li><li>Garchomp</li><li>Munchlax</li><li>Riolu</li><li>Lucario</li><li>Hippopotas</li><li>Hippowdon</li><li>Skorupi</li><li>Drapion</li><li>Croagunk</li><li>Toxicroak</li><li>Carnivine</li><li>Finneon</li><li>Lumineon</li><li>Mantyke</li><li>Snover</li><li>Abomasnow</li><li>Weavile</li><li>Magnezone</li><li>Lickilicky</li><li>Rhyperior</li><li>Tangrowth</li><li>Electivire</li><li>Magmortar</li><li>Togekiss</li><li>Yanmega</li><li>Leafeon</li><li>Glaceon</li><li>Gliscor</li><li>Mamoswine</li><li>Porygon-Z</li><li>Gallade</li><li>Probopass</li><li>Dusknoir</li><li>Froslass</li><li>Rotom</li><li>Uxie</li><li>Mesprit</li><li>Azelf</li><li>Dialga</li><li>Palkia</li><li>Heatran</li><li>Regigigas</li><li>Giratina</li><li>Cresselia</li><li>Phione</li><li>Manaphy</li><li>Darkrai</li><li>Shaymin</li><li>Arceus</li><li>Victini</li><li>Snivy</li><li>Servine</li><li>Serperior</li><li>Tepig</li><li>Pignite</li><li>Emboar</li><li>Oshawott</li><li>Dewott</li><li>Samurott</li><li>Patrat</li><li>Watchog</li><li>Lillipup</li><li>Herdier</li><li>Stoutland</li><li>Purrloin</li><li>Liepard</li><li>Pansage</li><li>Simisage</li><li>Pansear</li><li>Simisear</li><li>Panpour</li><li>Simipour</li><li>Munna</li><li>Musharna</li><li>Pidove</li><li>Tranquill</li><li>Unfezant</li><li>Blitzle</li><li>Zebstrika</li><li>Roggenrola</li><li>Boldore</li><li>Gigalith</li><li>Woobat</li><li>Swoobat</li><li>Drilbur</li><li>Excadrill</li><li>Audino</li><li>Timburr</li><li>Gurdurr</li><li>Conkeldurr</li><li>Tympole</li><li>Palpitoad</li><li>Seismitoad</li><li>Throh</li><li>Sawk</li><li>Sewaddle</li><li>Swadloon</li><li>Leavanny</li><li>Venipede</li><li>Whirlipede</li><li>Scolipede</li><li>Cottonee</li><li>Whimsicott</li><li>Petilil</li><li>Lilligant</li><li>Basculin</li><li>Sandile</li><li>Krokorok</li><li>Krookodile</li><li>Darumaka</li><li>Darmanitan</li><li>Maractus</li><li>Dwebble</li><li>Crustle</li><li>Scraggy</li><li>Scrafty</li><li>Sigilyph</li><li>Yamask</li><li>Cofagrigus</li><li>Tirtouga</li><li>Carracosta</li><li>Archen</li><li>Archeops</li><li>Trubbish</li><li>Garbodor</li><li>Zorua</li><li>Zoroark</li><li>Minccino</li><li>Cinccino</li><li>Gothita</li><li>Gothorita</li><li>Gothitelle</li><li>Solosis</li><li>Duosion</li><li>Reuniclus</li><li>Ducklett</li><li>Swanna</li><li>Vanillite</li><li>Vanillish</li><li>Vanilluxe</li><li>Deerling</li><li>Sawsbuck</li><li>Emolga</li><li>Karrablast</li><li>Escavalier</li><li>Foongus</li><li>Amoonguss</li><li>Frillish</li><li>Jellicent</li><li>Alomomola</li><li>Joltik</li><li>Galvantula</li><li>Ferroseed</li><li>Ferrothorn</li><li>Klink</li><li>Klang</li><li>Klinklang</li><li>Tynamo</li><li>Eelektrik</li><li>Eelektross</li><li>Elgyem</li><li>Beheeyem</li><li>Litwick</li><li>Lampent</li><li>Chandelure</li><li>Axew</li><li>Fraxure</li><li>Haxorus</li><li>Cubchoo</li><li>Beartic</li><li>Cryogonal</li><li>Shelmet</li><li>Accelgor</li><li>Stunfisk</li><li>Mienfoo</li><li>Mienshao</li><li>Druddigon</li><li>Golett</li><li>Golurk</li><li>Pawniard</li><li>Bisharp</li><li>Bouffalant</li><li>Rufflet</li><li>Braviary</li><li>Vullaby</li><li>Mandibuzz</li><li>Heatmor</li><li>Durant</li><li>Deino</li><li>Zweilous</li><li>Hydreigon</li><li>Larvesta</li><li>Volcarona</li><li>Cobalion</li><li>Terrakion</li><li>Virizion</li><li>Tornadus</li><li>Thundurus</li><li>Reshiram</li><li>Zekrom</li><li>Landorus</li><li>Kyurem</li><li>Keldeo</li><li>Meloetta</li><li>Genesect</li><li>Chespin</li><li>Quilladin</li><li>Chesnaught</li><li>Fennekin</li><li>Braixen</li><li>Delphox</li><li>Froakie</li><li>Frogadier</li><li>Greninja</li><li>Bunnelby</li><li>Diggersby</li><li>Fletchling</li><li>Fletchinder</li><li>Talonflame</li><li>Scatterbug</li><li>Spewpa</li><li>Vivillon</li><li>Litleo</li><li>Pyroar</li><li>Flabébé</li><li>Floette</li><li>Florges</li><li>Skiddo</li><li>Gogoat</li><li>Pancham</li><li>Pangoro</li><li>Furfrou</li><li>Espurr</li><li>Meowstic</li><li>Honedge</li><li>Doublade</li><li>Aegislash</li><li>Spritzee</li><li>Aromatisse</li><li>Swirlix</li><li>Slurpuff</li><li>Inkay</li><li>Malamar</li><li>Binacle</li><li>Barbaracle</li><li>Skrelp</li><li>Dragalge</li><li>Clauncher</li><li>Clawitzer</li><li>Helioptile</li><li>Heliolisk</li><li>Tyrunt</li><li>Tyrantrum</li><li>Amaura</li><li>Aurorus</li><li>Sylveon</li><li>Hawlucha</li><li>Dedenne</li><li>Carbink</li><li>Goomy</li><li>Sliggoo</li><li>Goodra</li><li>Klefki</li><li>Phantump</li><li>Trevenant</li><li>Pumpkaboo</li><li>Gourgeist</li><li>Bergmite</li><li>Avalugg</li><li>Noibat</li><li>Noivern</li><li>Xerneas</li><li>Yveltal</li><li>Zygarde</li><li>Diancie</li>
</ul>
</div>
<script>
(function () {
var $ = document.querySelector.bind(document)
function jank() {
var start = Date.now()
while (Date.now() - start < 5000) { }
}
$('#jankme').addEventListener('click', function (e) {
requestAnimationFrame(function () {
$('#jankme').disabled = true
$('#janking').style.display = 'block'
requestAnimationFrame(function () {
jank()
requestAnimationFrame(function () {
$('#jankme').disabled = false
$('#janking').style.display = 'none'
})
})
})
})
function emptyListenerFunc(e) {
}
$('#emptylistener').addEventListener('change', function (e) {
if (e.target.checked) {
window.addEventListener('touchstart', emptyListenerFunc)
} else {
window.removeEventListener('touchstart', emptyListenerFunc)
}
})
// function nonemptyListenerFunc(e) {
// console.log('scroll!')
// }
// $('#nonemptylistener').addEventListener('change', function (e) {
// if (e.target.checked) {
// window.addEventListener('wheel', nonemptyListenerFunc)
// } else {
// window.removeEventListener('wheel', nonemptyListenerFunc)
// }
// })
// function conditionalListenerFunc(e) {
// if (1 === 0) {
// e.preventDefault()
// }
// }
// $('#conditionallistener').addEventListener('change', function (e) {
// if (e.target.checked) {
// window.addEventListener('wheel', conditionalListenerFunc)
// } else {
// window.removeEventListener('wheel', conditionalListenerFunc)
// }
// })
})()
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment