15 |
16 | Download
17 | View on Github
18 |
19 |
22 |
23 |
24 |
25 |
26 |
27 |
52 |
53 |
--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
1 |
2 | * {
3 | -webkit-box-sizing: border-box;
4 | -moz-box-sizing: border-box;
5 | box-sizing: border-box;
6 | }
7 |
8 | html, body {
9 | font-family: Consolas, monospace;
10 | background: #f2f2f2;
11 | padding: 0;
12 | margin: 0;
13 | }
14 |
15 | /* Info */
16 |
17 | #info {
18 | font-size: 12px;
19 | position: absolute;
20 | z-index: 1;
21 | color: #fff;
22 | width: 260px;
23 | left: 20px;
24 | top: 20px;
25 | }
26 |
27 | #info a {
28 | text-decoration: none;
29 | border-bottom: 1px dotted rgba(255, 255, 255, 0.2);
30 | color: rgba(255, 255, 255, 0.5);
31 | }
32 |
33 | #info a:hover {
34 | color: #fff;
35 | }
36 |
37 | #info header, #info aside {
38 | font-family: 'Play', sans-serif;
39 | background: rgba(0, 0, 0, 0.8);
40 | margin-bottom: 1px;
41 | }
42 |
43 | #info header {
44 | padding: 12px 10px;
45 | }
46 |
47 | #info header hgroup h1 {
48 | line-height: 22px;
49 | font-weight: 300;
50 | font-size: 18px;
51 | margin: 0;
52 | }
53 |
54 | #info header hgroup h2 {
55 | line-height: 14px;
56 | font-weight: 300;
57 | font-size: 12px;
58 | color: rgba(255, 255, 255, 0.8);
59 | margin: 0 0 6px 0;
60 | }
61 |
62 | #info header a {
63 | text-transform: uppercase;
64 | margin-right: 4px;
65 | line-height: 20px;
66 | font-size: 10px;
67 | }
68 |
69 | #info aside {
70 | padding: 2px 10px;
71 | }
72 |
73 | /* Demo */
74 |
75 | .quotes {
76 | position: absolute;
77 | bottom: 20px;
78 | width: 100%;
79 | left: 0;
80 | top: 20px;
81 | }
82 |
83 | .quotes article {
84 | border-bottom: 1px dashed #ddd;
85 | text-align: justify;
86 | line-height: 1.8;
87 | background: #fff;
88 | max-width: 620px;
89 | font-size: 14px;
90 | padding: 80px 40px;
91 | margin: 0 auto;
92 | width: 80%;
93 | color: #333;
94 | }
95 |
96 | .quotes article em {
97 | font-style: normal;
98 | font-size: 12px;
99 | color: #666;
100 | }
101 |
102 | .quotes article em:before {
103 | content: '~';
104 | margin: 0 10px;
105 | }
106 |
107 | @media (max-width: 600px) {
108 | .quotes article {
109 | padding: 60px 30px;
110 | line-height: 1.5;
111 | font-size: 12px;
112 | }
113 | .quotes article em {
114 | font-size: 10px;
115 | }
116 | }
117 |
--------------------------------------------------------------------------------
/js/foldscroll.min.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (C) 2012 by Justin Windle
3 | *
4 | * Permission is hereby granted, free of charge, to any person obtaining a copy
5 | * of this software and associated documentation files (the "Software"), to deal
6 | * in the Software without restriction, including without limitation the rights
7 | * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8 | * copies of the Software, and to permit persons to whom the Software is
9 | * furnished to do so, subject to the following conditions:
10 | *
11 | * The above copyright notice and this permission notice shall be included in
12 | * all copies or substantial portions of the Software.
13 | *
14 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17 | * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18 | * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19 | * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20 | * THE SOFTWARE.
21 | */(function(e){function t(e){var t,n;for(t in e)n=e[t],e["-webkit-"+t]=n,e["-moz-"+t]=n,e["-ms-"+t]=n,e["-o-"+t]=n;return e}e.fn.foldscroll=function(n){var r=Math.PI,i=r/2,s=e.extend({},e.fn.foldscroll.defaults,n),o="perspective("+s.perspective+"px) rotateX(θrad)";return this.each(function(){var n=e(this),r=n.children(),u,a;s.shading&&(a=e('').css({background:s.shading,position:"absolute",opacity:0,height:"100%",width:"100%",left:0,top:0}),r.each(function(){u=e(this),u.css(t({"backface-visibility":"hidden","transform-style":"preserve-3d"})),u.data("_shading")||(a=a.clone(),u.css("position","relative"),u.data("_shading",a),u.append(a))})),n.css(t({"backface-visibility":"hidden"})),n.css({overflowY:"scroll"}),n.on("scroll",function(){var f=n.scrollTop(),l=n.offset().top-f,c=n.outerHeight(),h=l+c,p=parseFloat(s.margin);p=p<=1?Math.min(p,.5):p/c,r.each(function(n,r){u=e(this),u.css(t({transform:"none"})),a=u.find(".shading").hide();var d=u.offset().top-f,v=Math.max(p*c,u.outerHeight()),g=d+v,y=Math.max(l,d),b=Math.min(h,g),w=y' ).css({
50 | background: opts.shading,
51 | position: 'absolute',
52 | opacity: 0.0,
53 | height: '100%',
54 | width: '100%',
55 | left: 0,
56 | top: 0
57 | });
58 |
59 | // Add shading to each child
60 | $kids.each( function() {
61 |
62 | $item = $(this);
63 | $item.css( prefix({
64 | 'backface-visibility': 'hidden',
65 | 'transform-style': 'preserve-3d' // Fixes perspective in FF 10+
66 | }));
67 |
68 | // Make sure shading isn't already applied
69 | if ( !$item.data( '_shading' ) ) {
70 |
71 | $shading = $shading.clone();
72 |
73 | // Prepare element
74 | $item.css( 'position', 'relative' );
75 | $item.data( '_shading', $shading );
76 | $item.append( $shading );
77 | }
78 | });
79 | }
80 |
81 | // Prepare container
82 | $this.css( prefix({ 'backface-visibility': 'hidden' }));
83 | $this.css({ overflowY: 'scroll' });
84 |
85 | // Scroll handler
86 | $this.on( 'scroll', function() {
87 |
88 | // Store scroll amount
89 | var st = $this.scrollTop();
90 |
91 | // Store viewport properties
92 | var vt = $this.offset().top - st;
93 | var vh = $this.outerHeight();
94 | var vb = vt + vh;
95 |
96 | // Compute margin
97 | var m = parseFloat( opts.margin );
98 | m = m <= 1.0 ? Math.min( m, 0.5 ) : m / vh;
99 |
100 | // Update children
101 | $kids.each( function( index, el ) {
102 |
103 | $item = $(this);
104 |
105 | // Remove current transform
106 | $item.css( prefix({ transform: 'none' }) );
107 |
108 | // Cache shading element if it exists
109 | $shading = $item.find( '.shading' ).hide();
110 |
111 | // Store element properties
112 | var et = $item.offset().top - st;
113 | var eh = Math.max( m * vh, $item.outerHeight() );
114 | var eb = et + eh;
115 |
116 | // Highest start value
117 | var a = Math.max( vt, et );
118 |
119 | // Lowest end value
120 | var b = Math.min( vb, eb );
121 |
122 | // Do line segments overlap?
123 | var show = a < b;
124 |
125 | // If there's overlap
126 | if ( show ) {
127 |
128 | // Compute overlap
129 | var o = b - a;
130 |
131 | // Fraction of viewport covered by overlap
132 | var p = o / vh;
133 |
134 | // If overlap is within margin
135 | if ( p < m ) {
136 |
137 | // Normalise
138 | p = p / m;
139 |
140 | // Direction
141 | var d = et < vt ? 1 : -1;
142 |
143 | // Rotation
144 | var t = ( 1 - p ) * HALF_PI * d;
145 |
146 | // Contrain rotation
147 | if ( Math.abs(t) <= HALF_PI ) {
148 |
149 | // Apply rotation
150 | $item.css( prefix({
151 | 'transform-origin': '50% ' + ( et < vt ? '100%' : '0%' ),
152 | 'transform': rot.replace( 'θ', t )
153 | }));
154 |
155 | // Update shading overlay
156 | if ( opts.shading )
157 | $shading.css( 'opacity', 1.0 - p ).show();
158 |
159 | } else {
160 |
161 | show = false;
162 | }
163 | }
164 | }
165 |
166 | // Hide items outside of the viewport
167 | $item.css( 'visibility', show ? 'visible' : 'hidden' );
168 | });
169 | });
170 |
171 | // Set initial state
172 | $this.trigger( 'scroll' );
173 | });
174 | };
175 |
176 | // CSS3 vendor prefix helper
177 | function prefix( obj ) {
178 |
179 | var key, val;
180 |
181 | for ( key in obj ) {
182 |
183 | val = obj[ key ];
184 |
185 | obj[ '-webkit-' + key ] = val;
186 | obj[ '-moz-' + key ] = val;
187 | obj[ '-ms-' + key ] = val;
188 | obj[ '-o-' + key ] = val;
189 | }
190 |
191 | return obj;
192 | }
193 |
194 | // Default options
195 | $.fn.foldscroll.defaults = {
196 |
197 | // Perspective to apply to rotating elements
198 | perspective: 600,
199 |
200 | // Default shading to apply (null => no shading)
201 | shading: 'rgba(0,0,0,0.2)',
202 |
203 | // Area of rotation (fraction or pixel value)
204 | margin: 0.2
205 | };
206 |
207 | })( jQuery );
--------------------------------------------------------------------------------
/js/quotes.js:
--------------------------------------------------------------------------------
1 | var quotes = [
2 | {
3 | "author": "Jackson Pollock",
4 | "quote": "Technique is just a means of arriving at a statement"
5 | },
6 | {
7 | "author": "Terence Mckenna",
8 | "quote": "Perhaps a human language is possible in which the intent of meaning is actually beheld in three-dimensional space"
9 | },
10 | {
11 | "author": "Mina Loy",
12 | "quote": "All the virgin eyes in the world are made of glass"
13 | },
14 | {
15 | "author": "Oskar Schlemmer",
16 | "quote": "We are intensely aware of man as a machine and the body as a mechanism"
17 | },
18 | {
19 | "author": "Alison Lurie",
20 | "quote": "It is already too late, and it will go on being even later"
21 | },
22 | {
23 | "author": "Linus Pauling",
24 | "quote": "Science cannot be stopped. Man will gather knowledge no matter what the consequences - and we cannot predict what they will be"
25 | },
26 | {
27 | "author": "Tarjei Vesaas",
28 | "quote": "No one can witness the fall of the ice palace. It takes place at night, after all the children are in bed."
29 | },
30 | {
31 | "author": "Terence McKenna",
32 | "quote": "The biological object is made of time as much as it is made of space and matter"
33 | },
34 | {
35 | "author": "William James",
36 | "quote": "The union of the mathematician with the poet, fervor with measure, passion with correctness, this surely is the ideal"
37 | },
38 | {
39 | "author": "Camille Paglia",
40 | "quote": "Mind is a captive of the body"
41 | },
42 | {
43 | "author": "Nathaniel West via Amos Vogel",
44 | "quote": "Your order is meaningless, my chaos is significant"
45 | },
46 | {
47 | "author": "Harold W",
48 | "quote": "Every thing existing on the physical plane is an exteriorization of thought, which must be balanced through the one who issued the thought, and in accordance with that one's responsibility, at the conjunction of time, condition, and place"
49 | },
50 | {
51 | "author": "Pirandello",
52 | "quote": "I wanted to be alone in quite an unusual, new way. The very opposite of what you are thinking: namely, without myself…"
53 | },
54 | {
55 | "author": "Loren Eiseley",
56 | "quote": "I love forms beyond my own, and regret the borders between us"
57 | },
58 | {
59 | "author": "Philip K Dick",
60 | "quote": "The bedrock basic stratum of reality is irreality; the universe is irrational because it is built not on mere shifting sand - but on that which is not"
61 | },
62 | {
63 | "author": "Frank Herbert ",
64 | "quote": "Something flickered at the edges of conscious perception"
65 | },
66 | {
67 | "author": "Emily Dickinson",
68 | "quote": "Nature is what we know, yet have no art to say. So impotent our wisdom is to her simplicity"
69 | },
70 | {
71 | "author": "Wallace Stevens",
72 | "quote": "And over the bare spaces of our skies She sees a barer sky that does not bend"
73 | },
74 | {
75 | "author": "William Burroughs",
76 | "quote": "It is the function of the artist to evoke the experience of surprised recognition: to show the viewer what he knows but does not know that he knows."
77 | },
78 | {
79 | "author": "David Eagleman",
80 | "quote": "It turns out your conscious mind - the part you think of as you - is really the smallest part of what's happening in your brain, and usually the last one in line to find out any information"
81 | },
82 | {
83 | "author": "Walter Benjamin",
84 | "quote": "In the world's structure dream loosens individuality like a bad tooth"
85 | },
86 | {
87 | "author": "Terence McKenna",
88 | "quote": "Well, what are you? Are you some kind of diffuse consciousness that is in the ecosystem of the Earth? Are you a god or an extraterrestrial? Show me what you know"
89 | },
90 | {
91 | "author": "Richard Feynman",
92 | "quote": "The \"paradox\" is only a conflict between reality and your feeling of what reality \"ought to be\""
93 | },
94 | {
95 | "author": "Reyner Banham",
96 | "quote": "So, like earlier generations of English intellectuals who taught themselves Italian in order to read Dante in the original, I learned to drive in order to read Los Angeles in the original"
97 | },
98 | {
99 | "author": "Wikipedia",
100 | "quote": "Hypothetically, if an object is positioned at the focal point of the light entering the eye, it will appear infinitely tall"
101 | },
102 | {
103 | "author": "Loren Eiseley",
104 | "quote": "In this specious present of the real, life struggles to maintain every manifestation, every individuality, that exists"
105 | },
106 | {
107 | "author": "Henri Barbusse",
108 | "quote": "There'll be a day when I shall begin something that I shan't finish"
109 | },
110 | {
111 | "author": "From Illuminatus",
112 | "quote": "If you have any answers, we will be glad to provide full and detailed questions"
113 | },
114 | {
115 | "author": "Wallace Stevens",
116 | "quote": "I like my philosophy smothered in beauty and not the opposite"
117 | },
118 | {
119 | "author": "Terence McKenna",
120 | "quote": "A Niagara of alien beauty"
121 | },
122 | {
123 | "author": "Rem Koolhaas",
124 | "quote": "The Grid's two-dimensional discipline creates undreamt-of freedom for three-dimensional anarchy"
125 | },
126 | {
127 | "author": "Charles Eisenstein",
128 | "quote": "[They] had no human author at all, existing purely as objective facts"
129 | },
130 | {
131 | "author": "Janine Benyus",
132 | "quote": "The conscious emulation of life's genius is a survival strategy for the human race"
133 | },
134 | {
135 | "author": "Michael Hardt and Antonio Negri",
136 | "quote": "A specter haunts the world and it is the specter of migration"
137 | },
138 | {
139 | "author": "Octavio Paz",
140 | "quote": "To read a poem is to hear it with our eyes; to hear it is to see it with our ears"
141 | },
142 | {
143 | "author": "Yukio Mishima",
144 | "quote": "By means of microscopic observation and astronomical projection the lotus flower can become the foundation for an entire theory of the universe"
145 | },
146 | {
147 | "author": "John Cale",
148 | "quote": "You know it makes sense, don't even think about it, life and death are just things you do when you're bored"
149 | },
150 | {
151 | "author": "Charles Bukowski",
152 | "quote": "\"Baby,\" I said. \"I'm a genius but nobody knows it but me.\""
153 | },
154 | {
155 | "author": "Ada Lovelace",
156 | "quote": "The Analytical Engine has no pretensions whatever to originate anything. It can do whatever we know how to order it to perform"
157 | },
158 | {
159 | "author": "Halld",
160 | "quote": "This was the first time that he had ever looked into the labyrinth of the human soul. He was very far from understanding what he saw."
161 | },
162 | {
163 | "author": "Karl Jaspers",
164 | "quote": "Conflicts may be the sources of defeat, lost life and a limitation of our potentiality but they may also lead to greater depth of living and the birth of more far-reaching unities, which flourish in the tensions that engender them"
165 | },
166 | {
167 | "author": "Beno",
168 | "quote": "People want to see patterns in the world. It is how we evolved"
169 | },
170 | {
171 | "author": "Roadside Picnic",
172 | "quote": "The air became hard, it developed edges, surfaces, and corners, like space was filled with huge stiff balloons, slippery pyramids, gigantic prickly crystals, and he had to push his way through it all"
173 | },
174 | {
175 | "author": "Ansel Adams ",
176 | "quote": "There is nothing worse than a sharp image of a fuzzy concept"
177 | },
178 | {
179 | "author": "Frank Herbert ",
180 | "quote": "A process cannot be understood by stopping it. Understanding must move with the flow of the process, must join it and flow with it"
181 | },
182 | {
183 | "author": "Yuri Gagarin",
184 | "quote": "I could have gone on flying through space forever"
185 | },
186 | {
187 | "author": "Frank Herbert ",
188 | "quote": "You are about to witness a thing few have seen"
189 | },
190 | {
191 | "author": "Walter Andrew Shewhart",
192 | "quote": "Postulate 3: Assignable causes of variation may be found and eliminated"
193 | },
194 | {
195 | "author": "Henri Michaux",
196 | "quote": "I revel in deliquescence"
197 | },
198 | {
199 | "author": "Lou Reed",
200 | "quote": "I'll be your mirror, reflect what you are, in case you don't know "
201 | },
202 | {
203 | "author": "Buckminster Fuller",
204 | "quote": "Don't fight forces, use them"
205 | },
206 | {
207 | "author": "Roger Caillois",
208 | "quote": "Probably no images are utterly silent"
209 | },
210 | {
211 | "author": "Herman Melville",
212 | "quote": "There are some enterprises in which a careful disorderliness is the true method"
213 | },
214 | {
215 | "author": "Georg Christoph Lichtenberg",
216 | "quote": "It is we who are the measure of what is strange and miraculous"
217 | },
218 | {
219 | "author": "Hamlet",
220 | "quote": "I could be bounded in a nutshell and count myself a king of infinite space"
221 | },
222 | {
223 | "author": "Niels Bohr",
224 | "quote": "We are all agreed that your theory is crazy. The question that divides us is whether it is crazy enough to have a chance of being correct"
225 | },
226 | {
227 | "author": "Rick Warren",
228 | "quote": "Spiritual emptiness is a universal disease"
229 | },
230 | {
231 | "author": "Alfred North Whitehead",
232 | "quote": "It lies in the nature of things that the many enter into complex unity"
233 | },
234 | {
235 | "author": "Ralph Waldo Emerson",
236 | "quote": "Only the great generalizations survive"
237 | },
238 | {
239 | "author": "Marcel Mari",
240 | "quote": "Have you ever been alive? Curious sensation isn't it?"
241 | },
242 | {
243 | "author": "William Shakespeare",
244 | "quote": "Violent delights have violent ends"
245 | },
246 | {
247 | "author": "Herman Melville",
248 | "quote": "Yes, as every one knows, meditation and water are wedded for ever"
249 | },
250 | {
251 | "author": "Robert Irwin",
252 | "quote": "Seeing is forgetting the name of the thing one sees"
253 | },
254 | {
255 | "author": "Wallace Stevens",
256 | "quote": "The squirming facts exceed the squamous mind"
257 | },
258 | {
259 | "author": "Dal",
260 | "quote": "It's not necessary to know whether I am joking or whether I am serious, just as it is not necessary for me to know it myself"
261 | },
262 | {
263 | "author": "Cocteau",
264 | "quote": "Beauty is always the result of an accident"
265 | },
266 | {
267 | "author": "Stephen Chbosky",
268 | "quote": "You see things. You keep quiet about them. And you understand"
269 | },
270 | {
271 | "author": "Antonio Porchia",
272 | "quote": "It is easier for me to see everything as one thing than to see one thing as one thing"
273 | },
274 | {
275 | "author": "Marie",
276 | "quote": "As physics is a mental reconstruction of material processes, perhaps a physical reconstruction of psychic processes is possible in nature itself"
277 | },
278 | {
279 | "author": "William Gibson",
280 | "quote": "The sky above the port was the color of television, tuned to a dead channel"
281 | },
282 | {
283 | "author": "Nietzsche",
284 | "quote": "If you gaze too long into the abyss, the abyss will gaze into you"
285 | },
286 | {
287 | "author": "Philosophical Fragments by S",
288 | "quote": "In so far as the learner was in Error, and now receives the Truth and with it the condition for understanding it, a change takes place within him like the change from non-being to being"
289 | }
290 | ]
--------------------------------------------------------------------------------