├── README.md ├── Scrollorama.jquery.json ├── css ├── normalize.css └── style.css ├── index.html └── js ├── jquery-1.9.1.min.js ├── jquery.lettering-0.6.1.min.js └── jquery.scrollorama.js /README.md: -------------------------------------------------------------------------------- 1 | #Scrollorama 2 | 3 | The original jQuery plugin for doing cool scrolly stuff. 4 | 5 | To use the latest, greatest scroll animation library, I recommend checking out Scrollorama successor [ScrollMagic](http://janpaepke.github.io/ScrollMagic/) 6 | 7 | [Follow me on Twitter](http://twitter.com/johnpolacek) 8 | 9 | 10 | ## License 11 | 12 | Dual licensed under the MIT license (below) and [GPL license](http://www.gnu.org/licenses/gpl-3.0.html). 13 | 14 | 15 | MIT License 16 | 17 | Copyright (c) 2012 John Polacek 18 | 19 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 20 | 21 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 22 | 23 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 24 | 25 | -------------------------------------------------------------------------------- /Scrollorama.jquery.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Scrollorama", 3 | "title": "Scrollorama", 4 | "description": "The jQuery plugin for cool scroll animation", 5 | "keywords": [ 6 | "scroll", 7 | "scrolling", 8 | "animation" 9 | ], 10 | "version": "0.9.0", 11 | "author": { 12 | "name": "John Polacek", 13 | "url": "http://johnpolacek.com" 14 | }, 15 | "licenses": [ 16 | { 17 | "type": "MIT", 18 | "url": "https://github.com/johnpolacek/scrollorama/blob/master/README.md" 19 | } 20 | ], 21 | "homepage": "http://johnpolacek.github.com/scrollorama/", 22 | "demo": "http://johnpolacek.github.com/scrollorama/", 23 | "dependencies": { 24 | "jquery": ">=1.5" 25 | } 26 | } -------------------------------------------------------------------------------- /css/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css 2011-08-31T22:02 UTC · http://github.com/necolas/normalize.css */ 2 | 3 | /* ============================================================================= 4 | HTML5 display definitions 5 | ========================================================================== */ 6 | 7 | /* 8 | * Corrects block display not defined in IE6/7/8/9 & FF3 9 | */ 10 | 11 | article, 12 | aside, 13 | details, 14 | figcaption, 15 | figure, 16 | footer, 17 | header, 18 | hgroup, 19 | nav, 20 | section { 21 | display: block; 22 | } 23 | 24 | /* 25 | * Corrects inline-block display not defined in IE6/7/8/9 & FF3 26 | */ 27 | 28 | audio, 29 | canvas, 30 | video { 31 | display: inline-block; 32 | *display: inline; 33 | *zoom: 1; 34 | } 35 | 36 | /* 37 | * Prevents modern browsers from displaying 'audio' without controls 38 | */ 39 | 40 | audio:not([controls]) { 41 | display: none; 42 | } 43 | 44 | /* 45 | * Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4 46 | * Known issue: no IE6 support 47 | */ 48 | 49 | [hidden] { 50 | display: none; 51 | } 52 | 53 | 54 | /* ============================================================================= 55 | Base 56 | ========================================================================== */ 57 | 58 | /* 59 | * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units 60 | * http://clagnut.com/blog/348/#c790 61 | * 2. Keeps page centred in all browsers regardless of content height 62 | * 3. Prevents iOS text size adjust after orientation change, without disabling user zoom 63 | * www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ 64 | */ 65 | 66 | html { 67 | font-size: 100%; /* 1 */ 68 | overflow-y: scroll; /* 2 */ 69 | -webkit-text-size-adjust: 100%; /* 3 */ 70 | -ms-text-size-adjust: 100%; /* 3 */ 71 | } 72 | 73 | /* 74 | * Addresses margins handled incorrectly in IE6/7 75 | */ 76 | 77 | body { 78 | margin: 0; 79 | } 80 | 81 | /* 82 | * Addresses font-family inconsistency between 'textarea' and other form elements. 83 | */ 84 | 85 | body, 86 | button, 87 | input, 88 | select, 89 | textarea { 90 | font-family: sans-serif; 91 | } 92 | 93 | 94 | /* ============================================================================= 95 | Links 96 | ========================================================================== */ 97 | 98 | a { 99 | color: #00e; 100 | } 101 | 102 | a:visited { 103 | color: #551a8b; 104 | } 105 | 106 | /* 107 | * Addresses outline displayed oddly in Chrome 108 | */ 109 | 110 | a:focus { 111 | outline: 0; 112 | } 113 | 114 | /* 115 | * Improves readability when focused and also mouse hovered in all browsers 116 | * people.opera.com/patrickl/experiments/keyboard/test 117 | */ 118 | 119 | a:hover, 120 | a:active { 121 | outline: 0; 122 | } 123 | 124 | 125 | /* ============================================================================= 126 | Typography 127 | ========================================================================== */ 128 | 129 | /* 130 | * Addresses styling not present in IE7/8/9, S5, Chrome 131 | */ 132 | 133 | abbr[title] { 134 | border-bottom: 1px dotted; 135 | } 136 | 137 | /* 138 | * Addresses style set to 'bolder' in FF3/4, S4/5, Chrome 139 | */ 140 | 141 | b, 142 | strong { 143 | font-weight: bold; 144 | } 145 | 146 | blockquote { 147 | margin: 1em 40px; 148 | } 149 | 150 | /* 151 | * Addresses styling not present in S5, Chrome 152 | */ 153 | 154 | dfn { 155 | font-style: italic; 156 | } 157 | 158 | /* 159 | * Addresses styling not present in IE6/7/8/9 160 | */ 161 | 162 | mark { 163 | background: #ff0; 164 | color: #000; 165 | } 166 | 167 | /* 168 | * Corrects font family set oddly in IE6, S4/5, Chrome 169 | * en.wikipedia.org/wiki/User:Davidgothberg/Test59 170 | */ 171 | 172 | pre, 173 | code, 174 | kbd, 175 | samp { 176 | font-family: monospace, serif; 177 | _font-family: 'courier new', monospace; 178 | font-size: 1em; 179 | } 180 | 181 | /* 182 | * Improves readability of pre-formatted text in all browsers 183 | */ 184 | 185 | pre { 186 | white-space: pre; 187 | white-space: pre-wrap; 188 | word-wrap: break-word; 189 | } 190 | 191 | /* 192 | * 1. Addresses CSS quotes not supported in IE6/7 193 | * 2. Addresses quote property not supported in S4 194 | */ 195 | 196 | /* 1 */ 197 | 198 | q { 199 | quotes: none; 200 | } 201 | 202 | /* 2 */ 203 | 204 | q:before, 205 | q:after { 206 | content: ''; 207 | content: none; 208 | } 209 | 210 | small { 211 | font-size: 75%; 212 | } 213 | 214 | /* 215 | * Prevents sub and sup affecting line-height in all browsers 216 | * gist.github.com/413930 217 | */ 218 | 219 | sub, 220 | sup { 221 | font-size: 75%; 222 | line-height: 0; 223 | position: relative; 224 | vertical-align: baseline; 225 | } 226 | 227 | sup { 228 | top: -0.5em; 229 | } 230 | 231 | sub { 232 | bottom: -0.25em; 233 | } 234 | 235 | 236 | /* ============================================================================= 237 | Lists 238 | ========================================================================== */ 239 | 240 | ul, 241 | ol { 242 | margin: 1em 0; 243 | padding: 0 0 0 40px; 244 | } 245 | 246 | dd { 247 | margin: 0 0 0 40px; 248 | } 249 | 250 | nav ul, 251 | nav ol { 252 | list-style: none; 253 | list-style-image: none; 254 | } 255 | 256 | 257 | /* ============================================================================= 258 | Embedded content 259 | ========================================================================== */ 260 | 261 | /* 262 | * 1. Removes border when inside 'a' element in IE6/7/8/9, F3 263 | * 2. Improves image quality when scaled in IE7 264 | * code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ 265 | */ 266 | 267 | img { 268 | border: 0; /* 1 */ 269 | -ms-interpolation-mode: bicubic; /* 2 */ 270 | } 271 | 272 | /* 273 | * Corrects overflow displayed oddly in IE9 274 | */ 275 | 276 | svg:not(:root) { 277 | overflow: hidden; 278 | } 279 | 280 | 281 | /* ============================================================================= 282 | Figures 283 | ========================================================================== */ 284 | 285 | /* 286 | * Addresses margin not present in IE6/7/8/9, S5, O11 287 | */ 288 | 289 | figure { 290 | margin: 0; 291 | } 292 | 293 | 294 | /* ============================================================================= 295 | Forms 296 | ========================================================================== */ 297 | 298 | /* 299 | * Corrects margin displayed oddly in IE6/7 300 | */ 301 | 302 | form { 303 | margin: 0; 304 | } 305 | 306 | /* 307 | * Define consistent margin and padding 308 | */ 309 | 310 | fieldset { 311 | margin: 0 2px; 312 | padding: 0.35em 0.625em 0.75em; 313 | } 314 | 315 | /* 316 | * 1. Corrects color not being inherited in IE6/7/8/9 317 | * 2. Corrects alignment displayed oddly in IE6/7 318 | */ 319 | 320 | legend { 321 | border: 0; /* 1 */ 322 | *margin-left: -7px; /* 2 */ 323 | } 324 | 325 | /* 326 | * 1. Corrects font size not being inherited in all browsers 327 | * 2. Addresses margins set differently in IE6/7, F3/4, S5, Chrome 328 | * 3. Improves appearance and consistency in all browsers 329 | */ 330 | 331 | button, 332 | input, 333 | select, 334 | textarea { 335 | font-size: 100%; /* 1 */ 336 | margin: 0; /* 2 */ 337 | vertical-align: baseline; /* 3 */ 338 | *vertical-align: middle; /* 3 */ 339 | } 340 | 341 | /* 342 | * 1. Addresses FF3/4 setting line-height using !important in the UA stylesheet 343 | * 2. Corrects inner spacing displayed oddly in IE6/7 344 | */ 345 | 346 | button, 347 | input { 348 | line-height: normal; /* 1 */ 349 | *overflow: visible; /* 2 */ 350 | } 351 | 352 | /* 353 | * Corrects overlap and whitespace issue for buttons and inputs in IE6/7 354 | * Known issue: reintroduces inner spacing 355 | */ 356 | 357 | table button, 358 | table input { 359 | *overflow: auto; 360 | } 361 | 362 | /* 363 | * 1. Improves usability and consistency of cursor style between image-type 'input' and others 364 | * 2. Corrects inability to style clickable 'input' types in iOS 365 | */ 366 | 367 | button, 368 | html input[type="button"], 369 | input[type="reset"], 370 | input[type="submit"] { 371 | cursor: pointer; /* 1 */ 372 | -webkit-appearance: button; /* 2 */ 373 | } 374 | 375 | /* 376 | * 1. Addresses box sizing set to content-box in IE8/9 377 | * 2. Addresses excess padding in IE8/9 378 | */ 379 | 380 | input[type="checkbox"], 381 | input[type="radio"] { 382 | box-sizing: border-box; /* 1 */ 383 | padding: 0; /* 2 */ 384 | } 385 | 386 | /* 387 | * 1. Addresses appearance set to searchfield in S5, Chrome 388 | * 2. Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) 389 | */ 390 | 391 | input[type="search"] { 392 | -webkit-appearance: textfield; /* 1 */ 393 | -moz-box-sizing: content-box; 394 | -webkit-box-sizing: content-box; /* 2 */ 395 | box-sizing: content-box; 396 | } 397 | 398 | /* 399 | * Corrects inner padding displayed oddly in S5, Chrome on OSX 400 | */ 401 | 402 | input[type="search"]::-webkit-search-decoration { 403 | -webkit-appearance: none; 404 | } 405 | 406 | /* 407 | * Corrects inner padding and border displayed oddly in FF3/4 408 | * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ 409 | */ 410 | 411 | button::-moz-focus-inner, 412 | input::-moz-focus-inner { 413 | border: 0; 414 | padding: 0; 415 | } 416 | 417 | /* 418 | * 1. Removes default vertical scrollbar in IE6/7/8/9 419 | * 2. Improves readability and alignment in all browsers 420 | */ 421 | 422 | textarea { 423 | overflow: auto; /* 1 */ 424 | vertical-align: top; /* 2 */ 425 | } 426 | 427 | 428 | /* ============================================================================= 429 | Tables 430 | ========================================================================== */ 431 | 432 | /* 433 | * Remove most spacing between table cells 434 | */ 435 | 436 | table { 437 | border-collapse: collapse; 438 | border-spacing: 0; 439 | } 440 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | COLORS 3 | 4 | Dark Blue #222438 5 | Medium Blue #69697A 6 | Light Blue #C5C3DE 7 | Yellow #FFB000 8 | Red #D92B00 9 | 10 | */ 11 | 12 | body { 13 | background: #222438; 14 | font-family: Georgia, Times New Roman, Times, serif; 15 | font-weight: bold; 16 | font-size: 30px; 17 | text-align: center; 18 | } 19 | 20 | h1 { 21 | font-size: 120px; 22 | font-weight: normal; 23 | margin: 0; 24 | font-family: 'Bowlby One SC',"Arial Black",Gadget,sans-serif; 25 | text-transform: uppercase; 26 | color: #FFB000; 27 | text-shadow: 0 2px 1px #000; 28 | line-height: 1; 29 | } 30 | 31 | h2 { 32 | font-size: 80px; 33 | font-weight: normal; 34 | margin: 0; 35 | text-shadow: 0 2px 1px #000; 36 | color: #FFB000; 37 | font-family: 'Bowlby One SC',"Arial Black",Gadget,sans-serif; 38 | text-transform: uppercase; 39 | } 40 | 41 | h3 { 42 | font-size: 40px; 43 | font-weight: normal; 44 | margin: 0; 45 | color: #D92B00; 46 | text-shadow: 0 2px 1px #000; 47 | font-family: 'Bowlby One SC',"Arial Black",Gadget,sans-serif; 48 | text-transform: uppercase; 49 | } 50 | 51 | p { 52 | width: 80%; 53 | margin: 20px auto; 54 | text-shadow: 0 2px 1px #000; 55 | color: #C5C3DE; 56 | } 57 | 58 | a, a:visited { 59 | color: #D92B00; 60 | font-weight: bold; 61 | font-style: italic; 62 | } 63 | 64 | ul { 65 | list-style: none; 66 | } 67 | 68 | .download { 69 | padding: 10px; 70 | } 71 | 72 | pre { 73 | font-size: 18px; 74 | } 75 | 76 | blockquote { 77 | text-align: left; 78 | width: 720px; 79 | margin: 10px auto; 80 | background: #C5C3DE; 81 | border: solid 2px #69697A; 82 | padding: 0 40px; 83 | } 84 | 85 | code { 86 | font-style: normal; 87 | padding-left: 5px; 88 | } 89 | 90 | /*---------------------------------------- BLOCKS */ 91 | 92 | .scrollblock { 93 | position: relative; 94 | margin: 0; 95 | width: 100%; 96 | height: 600px; 97 | } 98 | 99 | .scrollblock h2 { 100 | padding-top: 100px; 101 | } 102 | 103 | .divider { 104 | font-size: 14px; 105 | } 106 | 107 | .divider, .accent { 108 | color: #69697A; 109 | text-shadow: none; 110 | } 111 | 112 | #console { 113 | display: none; 114 | position: fixed; 115 | top: 0; 116 | left: 15px; 117 | width: 500px; 118 | margin: 0; 119 | font-size: 14px; 120 | font-style: italic; 121 | background-color: #69697A; 122 | text-shadow: none; 123 | text-align: left; 124 | padding: 3px 10px; 125 | border-radius: 0 0 10px 10px; 126 | z-index: 99; 127 | opacity: .8; 128 | } 129 | 130 | #intro { 131 | overflow: hidden; 132 | } 133 | 134 | #title { 135 | margin: 80px auto 0; 136 | width: 1050px; 137 | position: relative; 138 | z-index: 99; 139 | } 140 | 141 | #author { 142 | width: 640px; 143 | position: absolute; 144 | top: 180px; 145 | right: 15%; 146 | font-size: 20px; 147 | text-align: right; 148 | font-style: italic; 149 | color: #D92B00; 150 | z-index:100; 151 | } 152 | 153 | .twitter-follow-button { 154 | position: relative; 155 | top: 8px; 156 | left: 4px; 157 | } 158 | 159 | #desc { 160 | position: absolute; 161 | top: 250px; 162 | width: 100%; 163 | } 164 | 165 | #download { 166 | position: absolute; 167 | top: 380px; 168 | font-size: 18px; 169 | width: 100%; 170 | line-height: 1.8; 171 | } 172 | 173 | #download a { 174 | color: #69697A; 175 | } 176 | 177 | #examples-pin { 178 | height: 500px; 179 | } 180 | 181 | #examples-transition { 182 | overflow: hidden; 183 | } 184 | 185 | #examples-parallax { 186 | overflow: hidden; 187 | } 188 | 189 | #parallax2 { 190 | position: absolute; 191 | top: 200px; 192 | left: -50px; 193 | color: #C5C3DE; 194 | opacity: .2; 195 | font-size: 210px; 196 | text-shadow: none; 197 | } 198 | 199 | #parallax3 { 200 | position: absolute; 201 | top: 320px; 202 | right: 40px; 203 | color: #C5C3DE; 204 | opacity: .4; 205 | font-size: 160px; 206 | text-shadow: none; 207 | } 208 | 209 | #easing span { 210 | position: relative; 211 | top:0; 212 | left:0; 213 | } 214 | #easing_bottom { 215 | width: 330px; 216 | height: 13px; 217 | margin: auto; 218 | background: #131420; 219 | border-bottom: 1px solid #30334F; 220 | position: relative; 221 | top: 276px; 222 | border-radius: 2px; 223 | -webkit-border-radius: 4px; 224 | -moz-border-radius: 4px; 225 | -o-border-radius: 4px; 226 | -ms-border-radius: 4px; 227 | border-radius: 4px; 228 | } 229 | 230 | #howtouse { 231 | height: 2100px; 232 | } 233 | 234 | #disclaimer { 235 | font-size: 18px; 236 | font-style: italic; 237 | font-weight: normal; 238 | margin: 0 auto; 239 | } 240 | 241 | #instructions { 242 | padding-top: 40px; 243 | } 244 | 245 | #instructions p { 246 | margin: 0px auto 20px; 247 | } 248 | 249 | #instructions-animation { 250 | padding-top: 40px; 251 | } 252 | 253 | .param-list { 254 | color: #C5C3DE; 255 | font-size: 18px; 256 | line-height: 1.4; 257 | padding: 0 18px; 258 | } 259 | 260 | .param-list li { 261 | padding-bottom: 20px; 262 | text-shadow: 0 2px 1px #000; 263 | } 264 | 265 | .param { 266 | display: block; 267 | color: #69697A; 268 | } 269 | 270 | .param-def small { 271 | display: block; 272 | font-weight: normal; 273 | font-style: italic; 274 | } 275 | 276 | #credits { 277 | height: 525px; 278 | margin-top: 100px; 279 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 |The jQuery plugin for doing cool scrolly stuff
32 | Want to do super-scrolly stuff?
Check out Scrollorama2: SuperScrollorama
★ Any numeric CSS property ★
47 |Disclaimer: This is an experimental, just-for-fun sort of project and hasn’t been thoroughly tested.
68 |Design and build your site, dividing your content into blocks.
70 |★ ★ ★
71 |Embed scrollorama.js after jQuery and initialize the plugin, passing the blocks class selector as a parameter.
72 |78 |73 | $(document).ready(function() { 74 | var scrollorama = $.scrollorama({ 75 | blocks:'.scrollblock' 76 | }); 77 | });
★ ★ ★
79 |Target an element and animate its properties.
80 |84 |81 | scrollorama.animate('#example1',{ 82 | duration:400, property:'opacity' 83 | })
The animation parameters you can use are:
85 |★ ★ ★
118 |Hook into the onBlockChange
event.
123 | 124 |120 | scrollorama.onBlockChange(function() { 121 | alert('You just scrolled to block#'+scrollorama.blockIndex); 122 | });
★ ★ ★
125 |Note: If you are not using the pinning feature, it is recommended you disable it. 126 | Pinning requires scroll blocks to be converted to absolute positioning, which can break some layouts. 127 |
128 |134 |129 | $(document).ready(function() { 130 | var scrollorama = $.scrollorama({ 131 | enablePin:false 132 | }); 133 | });
scrollorama by John Polacek
140 | 141 |Bowlby One SC Font by Vernon Adams
142 |★ ★ ★
143 |If you like scrollorama, give scrolldeck a try
144 |t |