-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
47 lines (47 loc) · 7.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>All Work and No Play</title>
<meta name="description" content="makes Johhny a dull boy"/>
<style>
html{box-sizing:border-box;font-size:138.5%;font-family:monospace;line-height:1.3;color:#555}body{padding-top:33vh}section{padding:0 5vw 5vh}p{margin-top:0}.single-column{max-width:35rem;margin-left:auto;margin-right:auto}.indented-paragraphs p{text-indent:2rem}.layout-1 p:nth-child(2n+3),.layout-2 p:nth-child(3n+1),.layout-3 p:nth-child(2n+1){margin-bottom:1.5rem}.layout-1 p:nth-child(2n+3){margin-left:20vw;margin-right:15vw}.layout-2 p:nth-child(3n+1){margin-left:40vw;margin-right:10vw}.layout-3 p:nth-child(2n+1){margin-right:40vw;margin-left:10vw}
</style>
</head>
<body>
<div class="container">
<main id="main-content">
<section class="single-column">
<p>All work and no play makes Johnny a dull boy</p>
<p>All work and no play makes Johnny a dull boy</p>
<p>All work and no play makes Johnny a dull boy</p>
<p>All work and no play makes Johnny a dull boy</p>
<p>All work and no play makes Johnny a dull boy</p>
<p>All work and no play makes Johnny a dull boy</p>
<p>All work and no play makes Johnny a dull boy</p>
<p>All work and no play makes Johnny a dull boy</p>
<p>All work and no play makes Johnny a dull boy</p>
<p>All work and no play makes Johnny a dull boy</p>
<p>All work and no play makes Johnny a dull boy</p>
<p>All work and no play makes Johnny a dull boy</p>
<p>All work and no play makes Johnny a dull boy</p>
<p>All work and no play makes Johnny a dull boy</p>
<p>All work and no play makes Johnny a dull boy</p>
<p>All work and no play makes Johnny a dull boy</p>
</section>
<section>
<p>All work and no play makes Johnny a dull boy. All work and no play makes Johnny a dull boy. All work and no play makes Johnny a dull boy. All work and no play makes Johnny a dull boy. All work and no play makes Johnny a dull boy. All work and no play makes Johnny a dull boy. All work and no play makes Johnny a dull boy. All work and no play makes Johnny a dull boy.</p>
<p>All work and no play makes Johnny a dull boy. All work and no play makes Johnny a dull boy. All work and no play makes Johnny a dull boy. All work and no play makes Johnny a dull boy.</p>
<p>All work and no play makes Johnny a dull boy. All work and no play makes Johnny a dull boy. All work and no play makes Johnny a dull boy. All work and no play makes Johnny a dull boy.</p>
<p>All work and no play makes Johnny a dull boy. All work and no play makes Johnny a dull boy. All work and no play makes Johnny a dull boy. All work and no play makes Johnny a dull boy.</p>
<p>All work and no play makes Johnny a dull boy. All work and no play makes Johnny a dull boy. All work and no play makes Johnny a dull boy. All work and no play makes Johnny a dull boy.</p>
</section>
</main>
</div>
<script>
'use strict';console.log('heeeeerree\'s Johnny!');var ticking=false,lastScrollPosition=0,innerHeight=window.innerHeight;var typewriter={letters:['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'],punctuation:['.',',','!','?','...',''],words:['All','work','and','no','play','makes','Johnny','a','dull','boy','.'],completeSentence:'All work and no play makes Johnny a dull boy.\u00A0\u00A0',writeNewWord:function(startingWord){var newWord=startingWord,targetCharacter=newWord.charAt(Math.floor(Math.random()*newWord.length));if(Math.random()<0.8){if(Math.random()<0.2){newWord=newWord.replace(targetCharacter,targetCharacter+targetCharacter)}if(Math.random()<0.2){newWord=newWord.replace(targetCharacter,targetCharacter.toUpperCase())}if(Math.random()<0.2){newWord=newWord.replace(targetCharacter,' ')}if(Math.random()<0.2){newWord=newWord.replace(targetCharacter,typewriter.util.randomLetter())}if(Math.random()<0.2){newWord=newWord.replace(targetCharacter,'')}}return newWord},writeSentence:function(){var sentenceString='';if(Math.random()<0.8){sentenceString=typewriter.completeSentence}else{sentenceString=typewriter.writeNewSentence()}return sentenceString},writeNewSentence:function(){var sentence='';var currentWord='';var roll=0;if(Math.random()<0.1){sentence+=typewriter.util.randomLetter()+' '}for(var i=0;i<typewriter.words.length;i+=1){roll=Math.random();currentWord=typewriter.words[i];if(i!==typewriter.words.length-1){if(roll<0.4){sentence+=typewriter.writeNewWord(currentWord)}else{sentence+=currentWord}if(i<typewriter.words.length-2){if(roll<0.95){sentence+=' '}}}else{sentence+=currentWord+'\u00A0\u00A0'}}return sentence},writeParagraph:function(numberOfSentences){var paragraphElement=document.createElement('p'),paragraphText='',textNode;for(var i=0;i<numberOfSentences;i+=1){paragraphText+=typewriter.writeSentence()}if(numberOfSentences===1){paragraphText=paragraphText.replace('.','')}textNode=document.createTextNode(paragraphText);paragraphElement.appendChild(textNode);if(Math.random()<0.3){paragraphElement.style.lineHeight=Math.random()+0.5}return paragraphElement},write:function(){var sectionElement=document.createElement('section'),fragment=document.createDocumentFragment(),numberOfParagraphs=typewriter.util.randomNumber(10),numberOfSentences=1,singleColumnMode=false;if(Math.random()<0.5){singleColumnMode=true;sectionElement.className='single-column';numberOfParagraphs=typewriter.util.randomNumber(17)+3;if(Math.random()<0.1){numberOfParagraphs=1}if(Math.random()<0.2){sectionElement.style.textAlign='right'}}for(var i=0;i<numberOfParagraphs;i+=1){if(singleColumnMode){numberOfSentences=1}else{numberOfSentences=typewriter.util.randomNumber(15)+1}fragment.appendChild(typewriter.writeParagraph(numberOfSentences))}sectionElement.appendChild(fragment);if(Math.random()<0.2){sectionElement.style.lineHeight=Math.random()+0.8}if(!singleColumnMode){if(Math.random()<0.3){sectionElement.className='indented-paragraphs'}else{if(Math.random()<0.5){sectionElement.className='layout-'+typewriter.util.randomNumber(3)}}}typewriter.target.appendChild(sectionElement)},util:{randomNumber:function(max){return Math.ceil(Math.random()*(max-1))+1},randomLetter:function(){return typewriter.letters[Math.floor(Math.random()*typewriter.letters.length)]}}};function scrollEventHandler(scrollPosition){var position=Math.floor(scrollPosition+innerHeight);if(position>=document.body.scrollHeight*0.9){typewriter.write()}}window.addEventListener('load',function(){typewriter.target=document.querySelector('#main-content');typewriter.write();});window.addEventListener('scroll',function(event){lastScrollPosition=window.scrollY;if(!ticking){window.requestAnimationFrame(function(){scrollEventHandler(lastScrollPosition);ticking=false});ticking=true}});
</script>
</body>
</html>