├── .DS_Store ├── README.md ├── bower.json ├── css ├── .DS_Store ├── bookblock.css ├── calendar.css ├── default.css ├── demo1.css ├── demo2.css ├── demo3.css ├── demo4.css └── demo5.css ├── fonts ├── .DS_Store ├── arrows │ ├── arrows.dev.svg │ ├── arrows.eot │ ├── arrows.svg │ ├── arrows.ttf │ ├── arrows.woff │ └── license.txt └── codropsicons │ ├── .DS_Store │ ├── codropsicons.eot │ ├── codropsicons.svg │ ├── codropsicons.ttf │ ├── codropsicons.woff │ └── license.txt ├── images ├── .DS_Store ├── demo1 │ ├── .DS_Store │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ └── 5.jpg ├── demo2 │ ├── 1.jpg │ ├── 10.jpg │ ├── 11.jpg │ ├── 12.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ ├── 6.jpg │ ├── 7.jpg │ ├── 8.jpg │ └── 9.jpg └── demo3 │ ├── .DS_Store │ ├── 1.jpg │ ├── 10.jpg │ ├── 11.jpg │ ├── 12.jpg │ ├── 13.jpg │ ├── 14.jpg │ ├── 15.jpg │ ├── 16.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ ├── 6.jpg │ ├── 7.jpg │ ├── 8.jpg │ └── 9.jpg ├── index.html ├── index2.html ├── index3.html ├── index4.html ├── index5.html └── js ├── bookblock.js ├── bookblock.min.js ├── jquery.bookblock.js ├── jquery.bookblock.min.js ├── jquerypp.custom.js └── modernizr.custom.js /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BookBlock/3fcee0a705a1bd59c89ae4ff543cb2e4e7d24330/.DS_Store -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | BookBlock 3 | ========= 4 | 5 | A jQuery plugin that will create a booklet-like component that let's you navigate through its items by flipping the pages. 6 | 7 | [article on Codrops](http://tympanus.net/codrops/2012/09/03/bookblock-a-content-flip-plugin/) 8 | 9 | [demo](http://tympanus.net/Development/BookBlock/) 10 | 11 | License: http://tympanus.net/codrops/licensing/ 12 | 13 | ### BookBlock Configuration Options 14 | 15 | ```js 16 | // page to start on 17 | startPage : 1, 18 | // vertical or horizontal flip 19 | orientation : 'vertical', 20 | // ltr (left to right) or rtl (right to left) 21 | direction : 'ltr', 22 | // speed for the flip transition in ms 23 | speed : 1000, 24 | // easing for the flip transition 25 | easing : 'ease-in-out', 26 | // if set to true, both the flipping page and the sides will have an overlay to simulate shadows 27 | shadows : true, 28 | // opacity value for the "shadow" on both sides (when the flipping page is over it) 29 | // value : 0.1 - 1 30 | shadowSides : 0.2, 31 | // opacity value for the "shadow" on the flipping page (while it is flipping) 32 | // value : 0.1 - 1 33 | shadowFlip : 0.1, 34 | // if we should show the first item after reaching the end 35 | circular : false, 36 | // if we want to specify a selector that triggers the next() function. example: ´#bb-nav-next´ 37 | nextEl : '', 38 | // if we want to specify a selector that triggers the prev() function 39 | prevEl : '', 40 | // autoplay. If true it overwrites the circular option to true 41 | autoplay : false, 42 | // time (ms) between page switch, if autoplay is true 43 | interval : 3000, 44 | // callback after the flip transition 45 | // old is the index of the previous item 46 | // page is the current item´s index 47 | // isLimit is true if the current page is the last one (or the first one) 48 | onEndFlip : function(old, page, isLimit) { return false; }, 49 | // callback before the flip transition 50 | // page is the current item´s index 51 | onBeforeFlip : function(page) { return false; } 52 | ``` 53 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "codrops/BookBlock", 3 | "version": "2.0.2", 4 | "description": "A jQuery plugin that will create a booklet-like component that let's you navigate through its items by flipping the pages.", 5 | "license": "http://tympanus.net/codrops/licensing/", 6 | "dependencies": { 7 | "modernizr": "2.6.2", 8 | "jquerypp": "1.0.1" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /css/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BookBlock/3fcee0a705a1bd59c89ae4ff543cb2e4e7d24330/css/.DS_Store -------------------------------------------------------------------------------- /css/bookblock.css: -------------------------------------------------------------------------------- 1 | .bb-bookblock { 2 | width: 400px; 3 | height: 300px; 4 | margin: 0 auto; 5 | position: relative; 6 | z-index: 100; 7 | -webkit-perspective: 1300px; 8 | perspective: 1300px; 9 | -webkit-backface-visibility: hidden; 10 | backface-visibility: hidden; 11 | } 12 | 13 | .bb-page { 14 | position: absolute; 15 | -webkit-transform-style: preserve-3d; 16 | transform-style: preserve-3d; 17 | -webkit-transition-property: -webkit-transform; 18 | transition-property: transform; 19 | } 20 | 21 | .bb-vertical .bb-page { 22 | width: 50%; 23 | height: 100%; 24 | left: 50%; 25 | -webkit-transform-origin: left center; 26 | transform-origin: left center; 27 | } 28 | 29 | .bb-horizontal .bb-page { 30 | width: 100%; 31 | height: 50%; 32 | top: 50%; 33 | -webkit-transform-origin: center top; 34 | transform-origin: center top; 35 | } 36 | 37 | .bb-page > div, 38 | .bb-outer, 39 | .bb-content, 40 | .bb-inner { 41 | position: absolute; 42 | height: 100%; 43 | width: 100%; 44 | top: 0; 45 | left: 0; 46 | -webkit-backface-visibility: hidden; 47 | backface-visibility: hidden; 48 | } 49 | 50 | .bb-vertical .bb-content { 51 | width: 200%; 52 | } 53 | 54 | .bb-horizontal .bb-content { 55 | height: 200%; 56 | } 57 | 58 | .bb-page > div { 59 | width: 100%; 60 | -webkit-transform-style: preserve-3d; 61 | transform-style: preserve-3d; 62 | } 63 | 64 | .bb-vertical .bb-back { 65 | -webkit-transform: rotateY(-180deg); 66 | transform: rotateY(-180deg); 67 | } 68 | 69 | .bb-horizontal .bb-back { 70 | -webkit-transform: rotateX(-180deg); 71 | transform: rotateX(-180deg); 72 | } 73 | 74 | .bb-outer { 75 | width: 100%; 76 | overflow: hidden; 77 | z-index: 999; 78 | } 79 | 80 | .bb-overlay, 81 | .bb-flipoverlay { 82 | background-color: rgba(0, 0, 0, 0.7); 83 | position: absolute; 84 | top: 0px; 85 | left: 0px; 86 | width: 100%; 87 | height: 100%; 88 | opacity: 0; 89 | } 90 | 91 | .bb-flipoverlay { 92 | background-color: rgba(0, 0, 0, 0.2); 93 | } 94 | 95 | .bb-bookblock.bb-vertical > div.bb-page:first-child, 96 | .bb-bookblock.bb-vertical > div.bb-page:first-child .bb-back { 97 | -webkit-transform: rotateY(180deg); 98 | transform: rotateY(180deg); 99 | } 100 | 101 | .bb-bookblock.bb-horizontal > div.bb-page:first-child, 102 | .bb-bookblock.bb-horizontal > div.bb-page:first-child .bb-back { 103 | -webkit-transform: rotateX(180deg); 104 | transform: rotateX(180deg); 105 | } 106 | 107 | /* Content display */ 108 | .bb-content { 109 | background: #fff; 110 | } 111 | 112 | .bb-vertical .bb-front .bb-content { 113 | left: -100%; 114 | } 115 | 116 | .bb-horizontal .bb-front .bb-content { 117 | top: -100%; 118 | } 119 | 120 | /* Flipping classes */ 121 | .bb-vertical .bb-flip-next, 122 | .bb-vertical .bb-flip-initial { 123 | -webkit-transform: rotateY(-180deg); 124 | transform: rotateY(-180deg); 125 | } 126 | 127 | .bb-vertical .bb-flip-prev { 128 | -webkit-transform: rotateY(0deg); 129 | transform: rotateY(0deg); 130 | } 131 | 132 | .bb-horizontal .bb-flip-next, 133 | .bb-horizontal .bb-flip-initial { 134 | -webkit-transform: rotateX(180deg); 135 | transform: rotateX(180deg); 136 | } 137 | 138 | .bb-horizontal .bb-flip-prev { 139 | -webkit-transform: rotateX(0deg); 140 | transform: rotateX(0deg); 141 | } 142 | 143 | .bb-vertical .bb-flip-next-end { 144 | -webkit-transform: rotateY(-15deg); 145 | transform: rotateY(-15deg); 146 | } 147 | 148 | .bb-vertical .bb-flip-prev-end { 149 | -webkit-transform: rotateY(-165deg); 150 | transform: rotateY(-165deg); 151 | } 152 | 153 | .bb-horizontal .bb-flip-next-end { 154 | -webkit-transform: rotateX(15deg); 155 | transform: rotateX(15deg); 156 | } 157 | 158 | .bb-horizontal .bb-flip-prev-end { 159 | -webkit-transform: rotateX(165deg); 160 | transform: rotateX(165deg); 161 | } 162 | 163 | .bb-item { 164 | width: 100%; 165 | height: 100%; 166 | position: absolute; 167 | top: 0; 168 | left: 0; 169 | display: none; 170 | background: #fff; 171 | } 172 | 173 | /* No JS */ 174 | .no-js .bb-bookblock, 175 | .no-js ul.bb-custom-grid li { 176 | width: auto; 177 | height: auto; 178 | } 179 | 180 | .no-js .bb-item { 181 | display: block; 182 | position: relative; 183 | } 184 | -------------------------------------------------------------------------------- /css/calendar.css: -------------------------------------------------------------------------------- 1 | /* Style from Caledario: */ 2 | 3 | .fc-calendar-wrap { 4 | margin-top: 300px; 5 | -moz-osx-font-smoothing: grayscale; 6 | } 7 | 8 | .fc-calendar-wrap h2 { 9 | color: #fff; 10 | position: absolute; 11 | z-index: 100; 12 | margin: -2.4em 0.9em 0 0; 13 | font-weight: 300; 14 | right: 0; 15 | font-size: 40px; 16 | border: 3px solid #fff; 17 | padding: 5px 20px; 18 | } 19 | 20 | .fc-calendar-container { 21 | position: relative; 22 | height: 300px; 23 | width: 100%; 24 | background: #fff; 25 | } 26 | 27 | .fc-calendar { 28 | width: 100%; 29 | height: 100%; 30 | } 31 | 32 | .fc-calendar .fc-head { 33 | height: 30px; 34 | line-height: 30px; 35 | background: #883b61; 36 | color: #fff; 37 | font-size: 10px; 38 | font-weight: 700; 39 | letter-spacing: 1px; 40 | text-transform: uppercase; 41 | } 42 | 43 | .fc-calendar .fc-body { 44 | position: relative; 45 | width: 100%; 46 | height: 100%; 47 | height: calc(100% - 30px); 48 | padding: 15px; 49 | } 50 | 51 | .fc-calendar .fc-row { 52 | width: 100%; 53 | border-bottom: 1px solid #ddd; 54 | } 55 | 56 | .fc-four-rows .fc-row { 57 | height: 25%; 58 | } 59 | 60 | .fc-five-rows .fc-row { 61 | height: 20%; 62 | } 63 | 64 | .fc-six-rows .fc-row { 65 | height: 16.66%; 66 | height: calc(100%/6); 67 | } 68 | 69 | .fc-calendar .fc-row > div, 70 | .fc-calendar .fc-head > div { 71 | float: left; 72 | height: 100%; 73 | width: 14.28%; /* 100% / 7 */ 74 | width: calc(100%/7); 75 | position: relative; 76 | } 77 | 78 | /* IE 9 is rounding up the calc it seems */ 79 | .ie9 .fc-calendar .fc-row > div, 80 | .ie9 .fc-calendar .fc-head > div { 81 | width: 14.2%; 82 | } 83 | 84 | .fc-calendar .fc-row > div { 85 | border-right: 1px solid #ddd; 86 | padding: 4px; 87 | overflow: hidden; 88 | position: relative; 89 | } 90 | 91 | .fc-calendar .fc-head > div { 92 | text-align: center; 93 | } 94 | 95 | .fc-calendar .fc-row > div > span.fc-date { 96 | position: absolute; 97 | width: 30px; 98 | height: 20px; 99 | font-size: 20px; 100 | line-height: 20px; 101 | font-weight: 700; 102 | color: #ceb1bf; 103 | bottom: 5px; 104 | right: 5px; 105 | text-align: right; 106 | } 107 | 108 | .fc-calendar .fc-row > div > span.fc-weekday { 109 | padding-left: 5px; 110 | display: none; 111 | } 112 | 113 | .fc-calendar .fc-row > div.fc-today { 114 | background: #f3e0e9; 115 | } 116 | 117 | .fc-calendar .fc-row > div.fc-out { 118 | opacity: 0.6; 119 | } 120 | 121 | .fc-calendar .fc-row > div:last-child, 122 | .fc-calendar .fc-head > div:last-child { 123 | border-right: none; 124 | } 125 | 126 | .fc-calendar .fc-row:last-child { 127 | border-bottom: none; 128 | } 129 | -------------------------------------------------------------------------------- /css/default.css: -------------------------------------------------------------------------------- 1 | /* General Demo Style */ 2 | @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700); 3 | 4 | @font-face { 5 | font-family: 'codropsicons'; 6 | src:url('../fonts/codropsicons/codropsicons.eot'); 7 | src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'), 8 | url('../fonts/codropsicons/codropsicons.woff') format('woff'), 9 | url('../fonts/codropsicons/codropsicons.ttf') format('truetype'), 10 | url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg'); 11 | font-weight: normal; 12 | font-style: normal; 13 | } 14 | 15 | *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 16 | body, html { font-size: 100%; padding: 0; margin: 0; height: 100%;} 17 | 18 | /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ 19 | .clearfix:before, .clearfix:after { content: " "; display: table; } 20 | .clearfix:after { clear: both; } 21 | 22 | body { 23 | font-family: 'Lato', Calibri, Arial, sans-serif; 24 | color: #777; 25 | background: #f6f6f6; 26 | } 27 | 28 | a { 29 | color: #555; 30 | text-decoration: none; 31 | outline: none; 32 | } 33 | 34 | a:hover, 35 | a:active { 36 | color: #777; 37 | } 38 | 39 | a img { 40 | border: none; 41 | } 42 | 43 | /* Header Style */ 44 | .main, 45 | .container > header { 46 | margin: 0 auto; 47 | padding: 2em; 48 | } 49 | 50 | .container { 51 | height: 100%; 52 | } 53 | 54 | .container > header { 55 | text-align: center; 56 | background: rgba(0,0,0,0.01); 57 | } 58 | 59 | .container > header h1 { 60 | font-size: 2.625em; 61 | line-height: 1.3; 62 | margin: 0; 63 | font-weight: 300; 64 | } 65 | 66 | .container > header span { 67 | display: block; 68 | font-size: 60%; 69 | opacity: 0.3; 70 | padding: 0 0 0.6em 0.1em; 71 | } 72 | 73 | /* Main Content */ 74 | .main { 75 | max-width: 69em; 76 | } 77 | 78 | .column { 79 | float: left; 80 | width: 50%; 81 | padding: 0 2em; 82 | min-height: 300px; 83 | position: relative; 84 | } 85 | 86 | .column:nth-child(2) { 87 | box-shadow: -1px 0 0 rgba(0,0,0,0.1); 88 | } 89 | 90 | .column p { 91 | font-weight: 300; 92 | font-size: 2em; 93 | padding: 0; 94 | margin: 0; 95 | text-align: right; 96 | line-height: 1.5; 97 | } 98 | 99 | /* To Navigation Style */ 100 | .codrops-top { 101 | background: #fff; 102 | background: rgba(255, 255, 255, 0.6); 103 | text-transform: uppercase; 104 | width: 100%; 105 | font-size: 0.69em; 106 | line-height: 2.2; 107 | } 108 | 109 | .codrops-top a { 110 | padding: 0 1em; 111 | letter-spacing: 0.1em; 112 | color: #888; 113 | display: inline-block; 114 | } 115 | 116 | .codrops-top a:hover { 117 | background: rgba(255,255,255,0.95); 118 | color: #333; 119 | } 120 | 121 | .codrops-top span.right { 122 | float: right; 123 | } 124 | 125 | .codrops-top span.right a { 126 | float: left; 127 | display: block; 128 | } 129 | 130 | .codrops-icon:before { 131 | font-family: 'codropsicons'; 132 | margin: 0 4px; 133 | speak: none; 134 | font-style: normal; 135 | font-weight: normal; 136 | font-variant: normal; 137 | text-transform: none; 138 | line-height: 1; 139 | -webkit-font-smoothing: antialiased; 140 | } 141 | 142 | .codrops-icon-drop:before { 143 | content: "\e001"; 144 | } 145 | 146 | .codrops-icon-prev:before { 147 | content: "\e004"; 148 | } 149 | 150 | .codrops-icon-archive:before { 151 | content: "\e002"; 152 | } 153 | 154 | .codrops-icon-next:before { 155 | content: "\e000"; 156 | } 157 | 158 | .codrops-icon-about:before { 159 | content: "\e003"; 160 | } 161 | 162 | /* Demo Buttons Style */ 163 | .codrops-demos { 164 | padding-top: 1em; 165 | font-size: 0.9em; 166 | } 167 | 168 | .codrops-demos a { 169 | display: inline-block; 170 | margin: 0.2em; 171 | padding: 0.45em 1em; 172 | background: #999; 173 | color: #fff; 174 | font-weight: 700; 175 | border-radius: 2px; 176 | } 177 | 178 | .codrops-demos a:hover, 179 | .codrops-demos a.current-demo, 180 | .codrops-demos a.current-demo:hover { 181 | opacity: 0.6; 182 | } 183 | 184 | .codrops-nav { 185 | text-align: center; 186 | } 187 | 188 | .codrops-nav a { 189 | display: inline-block; 190 | margin: 20px auto; 191 | padding: 0.3em; 192 | } 193 | 194 | /* Demo Styles */ 195 | 196 | .demo-1 body { 197 | color: #87968e; 198 | background: #fff2e3; 199 | } 200 | 201 | .demo-1 a { 202 | color: #72b890; 203 | } 204 | 205 | .demo-1 .codrops-demos a { 206 | background: #72b890; 207 | color: #fff; 208 | } 209 | 210 | .demo-2 body { 211 | color: #fff; 212 | background: #c05d8e; 213 | } 214 | 215 | .demo-2 a { 216 | color: #d38daf; 217 | } 218 | 219 | .demo-2 a:hover, 220 | .demo-2 a:active { 221 | color: #fff; 222 | } 223 | 224 | .demo-2 .codrops-demos a { 225 | background: #883b61; 226 | color: #fff; 227 | } 228 | 229 | .demo-2 .codrops-top a:hover { 230 | background: rgba(255,255,255,0.3); 231 | color: #333; 232 | } 233 | 234 | .demo-3 body { 235 | color: #87968e; 236 | background: #fff2e3; 237 | } 238 | 239 | .demo-3 a { 240 | color: #ea5381; 241 | } 242 | 243 | .demo-3 .codrops-demos a { 244 | background: #ea5381; 245 | color: #fff; 246 | } 247 | 248 | .demo-4 body { 249 | color: #999; 250 | background: #fff2e3; 251 | overflow: hidden; 252 | } 253 | 254 | .demo-4 a { 255 | color: #1baede; 256 | } 257 | 258 | .demo-4 a:hover, 259 | .demo-4 a:active { 260 | opacity: 0.6; 261 | } 262 | 263 | .demo-4 .codrops-demos a { 264 | background: #1baede; 265 | color: #fff; 266 | } 267 | 268 | .demo-5 body { 269 | background: #fffbd6; 270 | } 271 | 272 | 273 | @media screen and (max-width: 46.0625em) { 274 | .column { 275 | width: 100%; 276 | min-width: auto; 277 | min-height: auto; 278 | padding: 1em; 279 | } 280 | 281 | .column p { 282 | text-align: left; 283 | font-size: 1.5em; 284 | } 285 | 286 | .column:nth-child(2) { 287 | box-shadow: 0 -1px 0 rgba(0,0,0,0.1); 288 | } 289 | } 290 | 291 | @media screen and (max-width: 25em) { 292 | 293 | .codrops-icon span { 294 | display: none; 295 | } 296 | 297 | } -------------------------------------------------------------------------------- /css/demo1.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'arrows'; 3 | src:url('../fonts/arrows/arrows.eot'); 4 | src:url('../fonts/arrows/arrows.eot?#iefix') format('embedded-opentype'), 5 | url('../fonts/arrows/arrows.woff') format('woff'), 6 | url('../fonts/arrows/arrows.ttf') format('truetype'), 7 | url('../fonts/arrows/arrows.svg#arrows') format('svg'); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | 12 | .bb-custom-wrapper { 13 | width: 420px; 14 | position: relative; 15 | margin: 0 auto 40px; 16 | text-align: center; 17 | } 18 | 19 | .bb-custom-wrapper .bb-bookblock { 20 | box-shadow: 0 12px 20px -10px rgba(81,64,49,0.6); 21 | } 22 | 23 | .bb-custom-wrapper h3 { 24 | font-size: 1.4em; 25 | font-weight: 300; 26 | margin: 0.4em 0 1em; 27 | } 28 | 29 | .bb-custom-wrapper nav { 30 | width: 100%; 31 | height: 30px; 32 | margin: 1em auto 0; 33 | position: relative; 34 | z-index: 0; 35 | text-align: center; 36 | } 37 | 38 | .bb-custom-wrapper nav a { 39 | display: inline-block; 40 | width: 30px; 41 | height: 30px; 42 | text-align: center; 43 | border-radius: 2px; 44 | background: #72b890; 45 | color: #fff; 46 | font-size: 0; 47 | margin: 2px; 48 | } 49 | 50 | .bb-custom-wrapper nav a:hover { 51 | opacity: 0.6; 52 | } 53 | 54 | .bb-custom-icon:before { 55 | font-family: 'arrows'; 56 | speak: none; 57 | font-style: normal; 58 | font-weight: normal; 59 | font-variant: normal; 60 | text-transform: none; 61 | line-height: 1; 62 | font-size: 20px; 63 | line-height: 30px; 64 | display: block; 65 | -webkit-font-smoothing: antialiased; 66 | } 67 | 68 | .bb-custom-icon-first:before, 69 | .bb-custom-icon-last:before { 70 | content: "\e002"; 71 | } 72 | 73 | .bb-custom-icon-arrow-left:before, 74 | .bb-custom-icon-arrow-right:before { 75 | content: "\e003"; 76 | } 77 | 78 | .bb-custom-icon-arrow-left:before, 79 | .bb-custom-icon-first:before { 80 | -webkit-transform: rotate(180deg); 81 | transform: rotate(180deg); 82 | } 83 | 84 | /* No JS */ 85 | .no-js .bb-custom-wrapper { 86 | height: auto; 87 | } 88 | 89 | .no-js .bb-custom-content { 90 | height: 470px; 91 | } 92 | -------------------------------------------------------------------------------- /css/demo2.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'arrows'; 3 | src:url('../fonts/arrows/arrows.eot'); 4 | src:url('../fonts/arrows/arrows.eot?#iefix') format('embedded-opentype'), 5 | url('../fonts/arrows/arrows.woff') format('woff'), 6 | url('../fonts/arrows/arrows.ttf') format('truetype'), 7 | url('../fonts/arrows/arrows.svg#arrows') format('svg'); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | 12 | .bb-custom-wrapper { 13 | width: 560px; 14 | position: relative; 15 | margin: 0 auto 40px; 16 | text-align: center; 17 | } 18 | 19 | .bb-custom-wrapper .bb-bookblock { 20 | width: 560px; 21 | height: 600px; 22 | box-shadow: 0 12px 20px -10px rgba(81,64,49,0.6); 23 | } 24 | 25 | .bb-custom-img { 26 | position: absolute; 27 | left: 0; 28 | top: 0; 29 | } 30 | 31 | .bb-custom-wrapper h3 { 32 | font-size: 1.4em; 33 | font-weight: 300; 34 | margin: 0.4em 0 1em; 35 | } 36 | 37 | .bb-custom-wrapper nav { 38 | width: 100%; 39 | height: 30px; 40 | margin: 1em auto 0; 41 | position: relative; 42 | z-index: 0; 43 | text-align: center; 44 | } 45 | 46 | .bb-custom-wrapper nav a { 47 | display: inline-block; 48 | width: 30px; 49 | height: 30px; 50 | text-align: center; 51 | border-radius: 2px; 52 | background: #883b61; 53 | color: #fff; 54 | font-size: 0; 55 | margin: 2px; 56 | } 57 | 58 | .bb-custom-wrapper nav a:hover { 59 | opacity: 0.6; 60 | } 61 | 62 | .bb-custom-icon:before { 63 | font-family: 'arrows'; 64 | speak: none; 65 | font-style: normal; 66 | font-weight: normal; 67 | font-variant: normal; 68 | text-transform: none; 69 | line-height: 1; 70 | font-size: 20px; 71 | line-height: 30px; 72 | display: block; 73 | -webkit-font-smoothing: antialiased; 74 | } 75 | 76 | .bb-custom-icon-first:before, 77 | .bb-custom-icon-last:before { 78 | content: "\e002"; 79 | } 80 | 81 | .bb-custom-icon-arrow-left:before, 82 | .bb-custom-icon-arrow-right:before { 83 | content: "\e003"; 84 | } 85 | 86 | .bb-custom-icon-arrow-left:before, 87 | .bb-custom-icon-first:before { 88 | -webkit-transform: rotate(180deg); 89 | transform: rotate(180deg); 90 | } 91 | 92 | /* No JS */ 93 | .no-js .bb-custom-wrapper { 94 | height: auto; 95 | } 96 | 97 | .no-js .bb-custom-content { 98 | height: 470px; 99 | } 100 | -------------------------------------------------------------------------------- /css/demo3.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'arrows'; 3 | src:url('../fonts/arrows/arrows.eot'); 4 | src:url('../fonts/arrows/arrows.eot?#iefix') format('embedded-opentype'), 5 | url('../fonts/arrows/arrows.woff') format('woff'), 6 | url('../fonts/arrows/arrows.ttf') format('truetype'), 7 | url('../fonts/arrows/arrows.svg#arrows') format('svg'); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | 12 | .bb-custom-wrapper { 13 | width: 420px; 14 | position: relative; 15 | margin: 0 auto 40px; 16 | text-align: center; 17 | } 18 | 19 | .bb-custom-wrapper .bb-bookblock { 20 | box-shadow: 0 12px 20px -10px rgba(81,64,49,0.6); 21 | } 22 | 23 | .bb-custom-wrapper h3 { 24 | font-size: 1.4em; 25 | font-weight: 300; 26 | margin: 0.4em 0 1em; 27 | } 28 | 29 | .bb-custom-wrapper nav { 30 | width: 100%; 31 | height: 30px; 32 | margin: 1em auto 0; 33 | position: relative; 34 | z-index: 0; 35 | text-align: center; 36 | } 37 | 38 | .bb-custom-wrapper nav a { 39 | display: inline-block; 40 | width: 30px; 41 | height: 30px; 42 | text-align: center; 43 | border-radius: 2px; 44 | background: #ea5381; 45 | color: #fff; 46 | font-size: 0; 47 | margin: 2px; 48 | } 49 | 50 | .bb-custom-wrapper nav a:hover { 51 | opacity: 0.6; 52 | } 53 | 54 | .bb-custom-icon:before { 55 | font-family: 'arrows'; 56 | speak: none; 57 | font-style: normal; 58 | font-weight: normal; 59 | font-variant: normal; 60 | text-transform: none; 61 | line-height: 1; 62 | font-size: 20px; 63 | line-height: 30px; 64 | display: block; 65 | -webkit-font-smoothing: antialiased; 66 | } 67 | 68 | .bb-custom-icon-first:before, 69 | .bb-custom-icon-last:before { 70 | content: "\e002"; 71 | } 72 | 73 | .bb-custom-icon-arrow-left:before, 74 | .bb-custom-icon-arrow-right:before { 75 | content: "\e003"; 76 | } 77 | 78 | .bb-custom-icon-arrow-left:before, 79 | .bb-custom-icon-first:before { 80 | -webkit-transform: rotate(180deg); 81 | transform: rotate(180deg); 82 | } 83 | 84 | /* No JS */ 85 | .no-js .bb-custom-wrapper { 86 | height: auto; 87 | } 88 | 89 | .no-js .bb-custom-content { 90 | height: 470px; 91 | } 92 | -------------------------------------------------------------------------------- /css/demo4.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'arrows'; 3 | src:url('../fonts/arrows/arrows.eot'); 4 | src:url('../fonts/arrows/arrows.eot?#iefix') format('embedded-opentype'), 5 | url('../fonts/arrows/arrows.woff') format('woff'), 6 | url('../fonts/arrows/arrows.ttf') format('truetype'), 7 | url('../fonts/arrows/arrows.svg#arrows') format('svg'); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | 12 | .bb-custom-wrapper { 13 | width: 100%; 14 | height: 100%; 15 | position: relative; 16 | } 17 | 18 | .bb-custom-wrapper .bb-bookblock { 19 | width: 100%; 20 | height: 100%; 21 | -webkit-perspective: 2000px; 22 | perspective: 2000px; 23 | } 24 | 25 | .bb-custom-side { 26 | width: 50%; 27 | float: left; 28 | height: 100%; 29 | overflow: hidden; 30 | background: #fff; 31 | /* Centering with flexbox */ 32 | display: -webkit-box; 33 | display: -moz-box; 34 | display: -webkit-flex; 35 | display: flex; 36 | -webkit-flex-direction: row; 37 | flex-direction: row; 38 | -webkit-flex-wrap: wrap; 39 | flex-wrap: wrap; 40 | -webkit-box-pack: center; 41 | -moz-box-pack: center; 42 | -webkit-justify-content: center; 43 | justify-content: center; 44 | -webkit-box-align: center; 45 | -moz-box-align: center; 46 | -webkit-align-items: center; 47 | align-items: center; 48 | } 49 | 50 | .bb-custom-firstpage h1 { 51 | font-size: 2.625em; 52 | line-height: 1.3; 53 | margin: 0; 54 | font-weight: 300; 55 | background: #fff; 56 | } 57 | 58 | .bb-custom-firstpage h1 span { 59 | display: block; 60 | font-size: 60%; 61 | opacity: 0.3; 62 | padding: 0 0 0.6em 0.1em; 63 | } 64 | 65 | .bb-custom-firstpage { 66 | text-align: center; 67 | padding-top: 15%; 68 | width: 50%; 69 | float: left; 70 | height: 100%; 71 | } 72 | 73 | .bb-custom-side p { 74 | padding: 8%; 75 | font-size: 1.8em; 76 | font-weight: 300; 77 | } 78 | 79 | .bb-custom-wrapper h3 { 80 | font-size: 1.4em; 81 | font-weight: 300; 82 | margin: 0.4em 0 1em; 83 | } 84 | 85 | .bb-custom-wrapper > nav { 86 | width: 100%; 87 | height: 40px; 88 | margin: 1em auto 0; 89 | position: fixed; 90 | bottom: 20px; 91 | z-index: 1000; 92 | text-align: center; 93 | } 94 | 95 | .bb-custom-wrapper > nav a { 96 | display: inline-block; 97 | width: 40px; 98 | height: 40px; 99 | text-align: center; 100 | border-radius: 2px; 101 | background: #1baede; 102 | color: #fff; 103 | font-size: 0; 104 | margin: 2px; 105 | } 106 | 107 | .bb-custom-wrapper > nav a:hover { 108 | opacity: 0.6; 109 | } 110 | 111 | .bb-custom-icon:before { 112 | font-family: 'arrows'; 113 | speak: none; 114 | font-style: normal; 115 | font-weight: normal; 116 | font-variant: normal; 117 | text-transform: none; 118 | line-height: 1; 119 | font-size: 30px; 120 | line-height: 40px; 121 | display: block; 122 | -webkit-font-smoothing: antialiased; 123 | } 124 | 125 | .bb-custom-icon-first:before, 126 | .bb-custom-icon-last:before { 127 | content: "\e002"; 128 | } 129 | 130 | .bb-custom-icon-arrow-left:before, 131 | .bb-custom-icon-arrow-right:before { 132 | content: "\e003"; 133 | } 134 | 135 | .bb-custom-icon-arrow-left:before, 136 | .bb-custom-icon-first:before { 137 | -webkit-transform: rotate(180deg); 138 | transform: rotate(180deg); 139 | } 140 | 141 | /* No JS */ 142 | .no-js .bb-custom-wrapper { 143 | height: auto; 144 | } 145 | 146 | .no-js .bb-custom-content { 147 | height: 470px; 148 | } 149 | 150 | @media screen and (max-width: 61.75em){ 151 | .bb-custom-side { 152 | font-size: 70%; 153 | } 154 | } 155 | 156 | @media screen and (max-width: 33em){ 157 | .bb-custom-side { 158 | font-size: 60%; 159 | } 160 | } 161 | 162 | -------------------------------------------------------------------------------- /css/demo5.css: -------------------------------------------------------------------------------- 1 | .bb-bookblock { 2 | width: 300px; 3 | height: 225px; 4 | } 5 | 6 | ul.bb-custom-grid { 7 | list-style: none; 8 | margin: 0 auto 30px auto; 9 | padding: 0; 10 | max-width: 700px; 11 | display: block; 12 | } 13 | 14 | /* Micro clearfix hack by Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/ */ 15 | ul.bb-custom-grid:before, 16 | ul.bb-custom-grid:after { 17 | content: " "; 18 | display: table; 19 | } 20 | 21 | ul.bb-custom-grid:after { 22 | clear: both; 23 | } 24 | /* end clearfix hack */ 25 | 26 | ul.bb-custom-grid li { 27 | float: left; 28 | width: 300px; 29 | height: 260px; 30 | padding: 10px 20px 50px 20px; 31 | background: #fff; 32 | position: relative; 33 | box-sizing: content-box; 34 | margin-bottom: 20px; 35 | box-shadow: 0 1px 2px rgba(0,0,0,0.2); 36 | } 37 | 38 | ul.bb-custom-grid li:nth-child(odd) { 39 | margin-right: 20px; 40 | } 41 | 42 | ul.bb-custom-grid li:before, 43 | ul.bb-custom-grid li:after{ 44 | content: ''; 45 | position: absolute; 46 | z-index: -2; 47 | bottom: 15px; 48 | left: 10px; 49 | width: 50%; 50 | height: 20%; 51 | box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7); 52 | -webkit-transform: rotate(-3deg); 53 | -moz-transform: rotate(-3deg); 54 | -ms-transform: rotate(-3deg); 55 | -o-transform: rotate(-3deg); 56 | transform: rotate(-3deg); 57 | } 58 | 59 | ul.bb-custom-grid li:after { 60 | right: 10px; 61 | left: auto; 62 | -webkit-transform: rotate(3deg); 63 | transform: rotate(3deg); 64 | } 65 | 66 | ul.bb-custom-grid li a { 67 | display: block; 68 | } 69 | 70 | ul.bb-custom-grid li h3 { 71 | color: #9a9b92; 72 | margin: 0; 73 | padding: 0; 74 | text-transform: uppercase; 75 | font-weight: 700; 76 | font-size: 14px; 77 | line-height: 35px; 78 | letter-spacing: 1px; 79 | } 80 | 81 | ul.bb-custom-grid nav { 82 | text-align: center; 83 | margin-top: 12px; 84 | padding-bottom: 5px; 85 | } 86 | 87 | ul.bb-custom-grid nav span { 88 | display: inline-block; 89 | width: 12px; 90 | height: 12px; 91 | border-radius: 50%; 92 | background: #f0f0f0; 93 | margin: 3px; 94 | cursor: pointer; 95 | box-shadow: inset 0 1px 1px rgba(0,0,0,0.2), 0 2px 1px rgba(255,255,255,0.9); 96 | } 97 | 98 | ul.bb-custom-grid nav span.bb-current { 99 | background: #ecb700; 100 | } 101 | -------------------------------------------------------------------------------- /fonts/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BookBlock/3fcee0a705a1bd59c89ae4ff543cb2e4e7d24330/fonts/.DS_Store -------------------------------------------------------------------------------- /fonts/arrows/arrows.dev.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a custom SVG font generated by IcoMoon. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /fonts/arrows/arrows.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BookBlock/3fcee0a705a1bd59c89ae4ff543cb2e4e7d24330/fonts/arrows/arrows.eot -------------------------------------------------------------------------------- /fonts/arrows/arrows.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a custom SVG font generated by IcoMoon. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /fonts/arrows/arrows.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BookBlock/3fcee0a705a1bd59c89ae4ff543cb2e4e7d24330/fonts/arrows/arrows.ttf -------------------------------------------------------------------------------- /fonts/arrows/arrows.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BookBlock/3fcee0a705a1bd59c89ae4ff543cb2e4e7d24330/fonts/arrows/arrows.woff -------------------------------------------------------------------------------- /fonts/arrows/license.txt: -------------------------------------------------------------------------------- 1 | Icon Set: Entypo -- http://www.entypo.com/ 2 | License: CC BY-SA 3.0 -- http://creativecommons.org/licenses/by-sa/3.0/ -------------------------------------------------------------------------------- /fonts/codropsicons/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BookBlock/3fcee0a705a1bd59c89ae4ff543cb2e4e7d24330/fonts/codropsicons/.DS_Store -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BookBlock/3fcee0a705a1bd59c89ae4ff543cb2e4e7d24330/fonts/codropsicons/codropsicons.eot -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a custom SVG font generated by IcoMoon. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 17 | 18 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BookBlock/3fcee0a705a1bd59c89ae4ff543cb2e4e7d24330/fonts/codropsicons/codropsicons.ttf -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BookBlock/3fcee0a705a1bd59c89ae4ff543cb2e4e7d24330/fonts/codropsicons/codropsicons.woff -------------------------------------------------------------------------------- /fonts/codropsicons/license.txt: -------------------------------------------------------------------------------- 1 | Icon Set: Font Awesome -- http://fortawesome.github.com/Font-Awesome/ 2 | License: SIL -- http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL 3 | 4 | 5 | Icon Set: Eco Ico -- http://dribbble.com/shots/665585-Eco-Ico 6 | License: CC0 -- http://creativecommons.org/publicdomain/zero/1.0/ -------------------------------------------------------------------------------- /images/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BookBlock/3fcee0a705a1bd59c89ae4ff543cb2e4e7d24330/images/.DS_Store -------------------------------------------------------------------------------- /images/demo1/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BookBlock/3fcee0a705a1bd59c89ae4ff543cb2e4e7d24330/images/demo1/.DS_Store -------------------------------------------------------------------------------- /images/demo1/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BookBlock/3fcee0a705a1bd59c89ae4ff543cb2e4e7d24330/images/demo1/1.jpg -------------------------------------------------------------------------------- /images/demo1/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BookBlock/3fcee0a705a1bd59c89ae4ff543cb2e4e7d24330/images/demo1/2.jpg -------------------------------------------------------------------------------- /images/demo1/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BookBlock/3fcee0a705a1bd59c89ae4ff543cb2e4e7d24330/images/demo1/3.jpg -------------------------------------------------------------------------------- /images/demo1/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BookBlock/3fcee0a705a1bd59c89ae4ff543cb2e4e7d24330/images/demo1/4.jpg -------------------------------------------------------------------------------- /images/demo1/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BookBlock/3fcee0a705a1bd59c89ae4ff543cb2e4e7d24330/images/demo1/5.jpg -------------------------------------------------------------------------------- /images/demo2/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BookBlock/3fcee0a705a1bd59c89ae4ff543cb2e4e7d24330/images/demo2/1.jpg -------------------------------------------------------------------------------- /images/demo2/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BookBlock/3fcee0a705a1bd59c89ae4ff543cb2e4e7d24330/images/demo2/10.jpg -------------------------------------------------------------------------------- /images/demo2/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BookBlock/3fcee0a705a1bd59c89ae4ff543cb2e4e7d24330/images/demo2/11.jpg -------------------------------------------------------------------------------- /images/demo2/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BookBlock/3fcee0a705a1bd59c89ae4ff543cb2e4e7d24330/images/demo2/12.jpg -------------------------------------------------------------------------------- /images/demo2/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BookBlock/3fcee0a705a1bd59c89ae4ff543cb2e4e7d24330/images/demo2/2.jpg -------------------------------------------------------------------------------- /images/demo2/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BookBlock/3fcee0a705a1bd59c89ae4ff543cb2e4e7d24330/images/demo2/3.jpg -------------------------------------------------------------------------------- /images/demo2/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BookBlock/3fcee0a705a1bd59c89ae4ff543cb2e4e7d24330/images/demo2/4.jpg -------------------------------------------------------------------------------- /images/demo2/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BookBlock/3fcee0a705a1bd59c89ae4ff543cb2e4e7d24330/images/demo2/5.jpg -------------------------------------------------------------------------------- /images/demo2/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BookBlock/3fcee0a705a1bd59c89ae4ff543cb2e4e7d24330/images/demo2/6.jpg -------------------------------------------------------------------------------- /images/demo2/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BookBlock/3fcee0a705a1bd59c89ae4ff543cb2e4e7d24330/images/demo2/7.jpg -------------------------------------------------------------------------------- /images/demo2/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BookBlock/3fcee0a705a1bd59c89ae4ff543cb2e4e7d24330/images/demo2/8.jpg -------------------------------------------------------------------------------- /images/demo2/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BookBlock/3fcee0a705a1bd59c89ae4ff543cb2e4e7d24330/images/demo2/9.jpg -------------------------------------------------------------------------------- /images/demo3/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BookBlock/3fcee0a705a1bd59c89ae4ff543cb2e4e7d24330/images/demo3/.DS_Store -------------------------------------------------------------------------------- /images/demo3/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BookBlock/3fcee0a705a1bd59c89ae4ff543cb2e4e7d24330/images/demo3/1.jpg -------------------------------------------------------------------------------- /images/demo3/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BookBlock/3fcee0a705a1bd59c89ae4ff543cb2e4e7d24330/images/demo3/10.jpg -------------------------------------------------------------------------------- /images/demo3/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BookBlock/3fcee0a705a1bd59c89ae4ff543cb2e4e7d24330/images/demo3/11.jpg -------------------------------------------------------------------------------- /images/demo3/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BookBlock/3fcee0a705a1bd59c89ae4ff543cb2e4e7d24330/images/demo3/12.jpg -------------------------------------------------------------------------------- /images/demo3/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BookBlock/3fcee0a705a1bd59c89ae4ff543cb2e4e7d24330/images/demo3/13.jpg -------------------------------------------------------------------------------- /images/demo3/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BookBlock/3fcee0a705a1bd59c89ae4ff543cb2e4e7d24330/images/demo3/14.jpg -------------------------------------------------------------------------------- /images/demo3/15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BookBlock/3fcee0a705a1bd59c89ae4ff543cb2e4e7d24330/images/demo3/15.jpg -------------------------------------------------------------------------------- /images/demo3/16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BookBlock/3fcee0a705a1bd59c89ae4ff543cb2e4e7d24330/images/demo3/16.jpg -------------------------------------------------------------------------------- /images/demo3/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BookBlock/3fcee0a705a1bd59c89ae4ff543cb2e4e7d24330/images/demo3/2.jpg -------------------------------------------------------------------------------- /images/demo3/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BookBlock/3fcee0a705a1bd59c89ae4ff543cb2e4e7d24330/images/demo3/3.jpg -------------------------------------------------------------------------------- /images/demo3/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BookBlock/3fcee0a705a1bd59c89ae4ff543cb2e4e7d24330/images/demo3/4.jpg -------------------------------------------------------------------------------- /images/demo3/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BookBlock/3fcee0a705a1bd59c89ae4ff543cb2e4e7d24330/images/demo3/5.jpg -------------------------------------------------------------------------------- /images/demo3/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BookBlock/3fcee0a705a1bd59c89ae4ff543cb2e4e7d24330/images/demo3/6.jpg -------------------------------------------------------------------------------- /images/demo3/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BookBlock/3fcee0a705a1bd59c89ae4ff543cb2e4e7d24330/images/demo3/7.jpg -------------------------------------------------------------------------------- /images/demo3/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BookBlock/3fcee0a705a1bd59c89ae4ff543cb2e4e7d24330/images/demo3/8.jpg -------------------------------------------------------------------------------- /images/demo3/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/BookBlock/3fcee0a705a1bd59c89ae4ff543cb2e4e7d24330/images/demo3/9.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | BookBlock: A Content Flip Plugin - Demo 1 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 |
22 | Previous Demo 23 | Back to the Codrops Article 24 |
25 |
26 |

BookBlock A Content Flip Plugin

27 | 34 |
35 |
36 |
37 |

Illustrations by Kevin Howdeshell

38 |
39 |
40 | image01 41 |
42 |
43 | image02 44 |
45 |
46 | image03 47 |
48 |
49 | image04 50 |
51 |
52 | image05 53 |
54 |
55 | 61 |
62 |
63 |
64 | 65 | 66 | 67 | 147 | 150 | 151 | -------------------------------------------------------------------------------- /index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | BookBlock: A Content Flip Plugin - Demo 2 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 |
23 | Previous Demo 24 | Back to the Codrops Article 25 |
26 |
27 |

BookBlock A Content Flip Plugin

28 | 35 |
36 |
37 |
38 |
39 |
40 | image01 41 |
42 |

January 2013

43 |
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
Sunday
1Tue
New Year's day
2Wed
3Thu
4Fri
5Sat
6Sun
7Mon
8Tue
9Wed
10Thu
11Fri
12Sat
13Sun
14Mon
15Tue
16Wed
17Thu
18Fri
19Sat
20Sun
21Mon
22Tue
23Wed
24Thu
25Fri
26Sat
27Sun
28Mon
29Tue
30Wed
31Thu
44 |
45 |
46 |
47 | image02 48 |
49 |

February 2013

50 |
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
Sunday
1Fri
2Sat
3Sun
4Mon
5Tue
6Wed
7Thu
8Fri
9Sat
10Sun
11Mon
12Tue
13Wed
14Thu
15Fri
16Sat
17Sun
18Mon
19Tue
20Wed
21Thu
22Fri
23Sat
24Sun
25Mon
26Tue
27Wed
28Thu
51 |
52 |
53 |
54 | image03 55 |
56 |

March 2013

57 |
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
Sunday
1Fri
2Sat
3Sun
4Mon
5Tue
6Wed
7Thu
8Fri
9Sat
10Sun
11Mon
12Tue
13Wed
14Thu
15Fri
16Sat
17Sun
18Mon
19Tue
20Wed
21Thu
22Fri
23Sat
24Sun
25Mon
26Tue
27Wed
28Thu
29Fri
30Sat
31Sun
58 |
59 |
60 |
61 | image04 62 |
63 |

April 2013

64 |
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
Sunday
1Mon
2Tue
3Wed
4Thu
5Fri
6Sat
7Sun
8Mon
9Tue
10Wed
11Thu
12Fri
13Sat
14Sun
15Mon
16Tue
17Wed
18Thu
19Fri
20Sat
21Sun
22Mon
23Tue
24Wed
25Thu
26Fri
27Sat
28Sun
29Mon
30Tue
65 |
66 |
67 |
68 | image05 69 |
70 |

May 2013

71 |
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
Sunday
1Wed
2Thu
3Fri
4Sat
5Sun
6Mon
7Tue
8Wed
9Thu
10Fri
11Sat
12Sun
13Mon
14Tue
15Wed
16Thu
17Fri
18Sat
19Sun
20Mon
21Tue
22Wed
23Thu
24Fri
25Sat
26Sun
27Mon
28Tue
29Wed
30Thu
31Fri
72 |
73 |
74 |
75 | image06 76 |
77 |

June 2013

78 |
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
Sunday
1Sat
2Sun
3Mon
4Tue
5Wed
6Thu
7Fri
8Sat
9Sun
10Mon
11Tue
12Wed
13Thu
14Fri
15Sat
16Sun
17Mon
18Tue
19Wed
20Thu
21Fri
22Sat
23Sun
24Mon
25Tue
26Wed
27Thu
28Fri
29Sat
30Sun
79 |
80 |
81 |
82 | image07 83 |
84 |

July 2013

85 |
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
Sunday
1Mon
2Tue
3Wed
4Thu
5Fri
6Sat
7Sun
8Mon
9Tue
10Wed
11Thu
12Fri
13Sat
14Sun
15Mon
16Tue
17Wed
18Thu
19Fri
20Sat
21Sun
22Mon
23Tue
24Wed
25Thu
26Fri
27Sat
28Sun
29Mon
30Tue
31Wed
86 |
87 |
88 |
89 | image08 90 |
91 |

August 2013

92 |
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
Sunday
1Thu
2Fri
3Sat
4Sun
5Mon
6Tue
7Wed
8Thu
9Fri
10Sat
11Sun
12Mon
13Tue
14Wed
15Thu
16Fri
17Sat
18Sun
19Mon
20Tue
21Wed
22Thu
23Fri
24Sat
25Sun
26Mon
27Tue
28Wed
29Thu
30Fri
31Sat
93 |
94 |
95 |
96 | image09 97 |
98 |

September 2013

99 |
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
Sunday
1Sun
2Mon
3Tue
4Wed
5Thu
6Fri
7Sat
8Sun
9Mon
10Tue
11Wed
12Thu
13Fri
14Sat
15Sun
16Mon
17Tue
18Wed
19Thu
20Fri
21Sat
22Sun
23Mon
24Tue
25Wed
26Thu
27Fri
28Sat
29Sun
30Mon
100 |
101 |
102 |
103 | image10 104 |
105 |

October 2013

106 |
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
Sunday
1Tue
2Wed
3Thu
4Fri
5Sat
6Sun
7Mon
8Tue
9Wed
10Thu
11Fri
12Sat
13Sun
14Mon
15Tue
16Wed
17Thu
18Fri
19Sat
20Sun
21Mon
22Tue
23Wed
24Thu
25Fri
26Sat
27Sun
28Mon
29Tue
30Wed
31Thu
107 |
108 |
109 |
110 | image11 111 |
112 |

November 2013

113 |
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
Sunday
1Fri
2Sat
3Sun
4Mon
5Tue
6Wed
7Thu
8Fri
9Sat
10Sun
11Mon
12Tue
13Wed
14Thu
15Fri
16Sat
17Sun
18Mon
19Tue
20Wed
21Thu
22Fri
23Sat
24Sun
25Mon
26Tue
27Wed
28Thu
29Fri
30Sat
114 |
115 |
116 |
117 | image12 118 |
119 |

December 2013

120 |
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
Sunday
1Sun
2Mon
3Tue
4Wed
5Thu
6Fri
7Sat
8Sun
9Mon
10Tue
11Wed
12Thu
13Fri
14Sat
15Sun
16Mon
17Tue
18Wed
19Thu
20Fri
21Sat
22Sun
23Mon
24Tue
25Wed
26Thu
27Fri
28Sat
29Sun
30Mon
31Tue
121 |
122 |
123 |
124 | 128 |

Photos by majownik

129 |
130 |
131 |
132 | 133 | 134 | 192 | 195 | 196 | -------------------------------------------------------------------------------- /index3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | BookBlock: A Content Flip Plugin - Demo 3 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 |
22 | Previous Demo 23 | Back to the Codrops Article 24 |
25 |
26 |

BookBlock A Content Flip Plugin

27 | 34 |
35 |
36 |
37 |

RTL Support

38 |
39 |
40 | image01 41 |
42 |
43 | image02 44 |
45 |
46 | image03 47 |
48 |
49 | image04 50 |
51 |
52 | image05 53 |
54 |
55 |

Illustrations by Kevin Howdeshell

56 | 62 |
63 |
64 |
65 | 66 | 67 | 68 | 149 | 152 | 153 | -------------------------------------------------------------------------------- /index4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | BookBlock: A Content Flip Plugin - Demo 4 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |
21 | 22 |
23 |
24 |
25 |

BookBlock A Content Flip Plugin

26 | 33 | 37 |
38 |
39 |

Pastry bear claw oat cake danish croissant jujubes danish. Wypas soufflé muffin. Liquorice powder pastry danish. Candy toffee gummi bears chocolate bar lollipop applicake chocolate cake danish brownie.

40 |
41 |
42 |
43 |
44 |

Soufflé tootsie roll jelly beans. Sweet icing croissant dessert bear claw. Brownie dessert cheesecake danish jelly pudding bear claw soufflé.

45 |
46 |
47 |

Candy canes lollipop macaroon marshmallow gummi bears tiramisu. Dessert croissant cupcake candy canes. Bear claw faworki faworki lemon drops. Faworki marzipan sugar plum jelly-o marzipan jelly-o.

48 |
49 |
50 |
51 |
52 |

Croissant pudding gingerbread gummi bears marshmallow halvah. Wafer donut croissant. Cookie muffin jelly beans pie croissant croissant candy canes jelly marshmallow.

53 |
54 |
55 |

Wafer donut caramels chocolate caramels sweet roll. Gummi bears powder candy chocolate cake gummi bears icing wafer cupcake. Brownie cotton candy pastry chocolate wypas.

56 |
57 |
58 |
59 |
60 |

Marzipan dragée candy canes chocolate cake. Soufflé faworki jelly gingerbread cupcake. Powder gummies applicake.

61 |
62 |
63 |

Cotton candy caramels tootsie roll soufflé powder lemon drops carrot cake danish. Cotton candy candy canes fruitcake muffin gingerbread. Jujubes soufflé gingerbread donut donut.

64 |
65 |
66 |
67 |
68 |

Jujubes fruitcake tiramisu liquorice chocolate cake. Carrot cake faworki donut soufflé oat cake tootsie roll. Fruitcake fruitcake cake sweet pie jelly beans. Chocolate cake candy jujubes oat cake toffee croissant muffin.

69 |
70 |
71 |

Chocolate bar tiramisu marzipan. Croissant soufflé croissant lollipop liquorice dragée chupa chups carrot cake. Liquorice lollipop halvah toffee lollipop.

72 |
73 |
74 |
75 | 76 | 82 | 83 |
84 | 85 |
86 | 87 | 88 | 89 | 169 | 172 | 173 | -------------------------------------------------------------------------------- /index5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | BookBlock: A Content Flip Plugin - Demo 5 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 |
22 | Previous Demo 23 | Images by Isaac Montemayor 24 | Back to the Codrops Article 25 |
26 |
27 |

BookBlock A Content Flip Plugin

28 | 35 |
36 |
37 | 99 |
100 |
101 | 102 | 103 | 104 | 150 | 153 | 154 | -------------------------------------------------------------------------------- /js/bookblock.js: -------------------------------------------------------------------------------- 1 | /** 2 | * bookblock.js v2.0.1 3 | * http://www.codrops.com 4 | * 5 | * Licensed under the MIT license. 6 | * http://www.opensource.org/licenses/mit-license.php 7 | * 8 | * Copyright 2013, Codrops 9 | * http://www.codrops.com 10 | */ 11 | ;( function( window ) { 12 | 13 | 'use strict'; 14 | 15 | // global 16 | var document = window.document, 17 | Modernizr = window.Modernizr; 18 | 19 | // https://gist.github.com/edankwan/4389601 20 | Modernizr.addTest('csstransformspreserve3d', function () { 21 | var prop = Modernizr.prefixed('transformStyle'); 22 | var val = 'preserve-3d'; 23 | var computedStyle; 24 | if(!prop) return false; 25 | 26 | prop = prop.replace(/([A-Z])/g, function(str,m1){ return '-' + m1.toLowerCase(); }).replace(/^ms-/,'-ms-'); 27 | 28 | Modernizr.testStyles('#modernizr{' + prop + ':' + val + ';}', function (el, rule) { 29 | computedStyle = window.getComputedStyle ? getComputedStyle(el, null).getPropertyValue(prop) : ''; 30 | }); 31 | 32 | return (computedStyle === val); 33 | }); 34 | 35 | function extend( a, b ) { 36 | for( var key in b ) { 37 | if( b.hasOwnProperty( key ) ) { 38 | a[key] = b[key]; 39 | } 40 | } 41 | return a; 42 | } 43 | 44 | function BookBlock( el, options ) { 45 | this.el = el; 46 | this.options = extend( this.defaults, options ); 47 | this._init(); 48 | } 49 | 50 | BookBlock.prototype = { 51 | defaults : { 52 | // page to start on 53 | startPage : 1, 54 | // vertical or horizontal flip 55 | orientation : 'vertical', 56 | // ltr (left to right) or rtl (right to left) 57 | direction : 'ltr', 58 | // speed for the flip transition in ms 59 | speed : 1000, 60 | // easing for the flip transition 61 | easing : 'ease-in-out', 62 | // if set to true, both the flipping page and the sides will have an overlay to simulate shadows 63 | shadows : true, 64 | // opacity value for the "shadow" on both sides (when the flipping page is over it) 65 | // value : 0.1 - 1 66 | shadowSides : 0.2, 67 | // opacity value for the "shadow" on the flipping page (while it is flipping) 68 | // value : 0.1 - 1 69 | shadowFlip : 0.1, 70 | // if we should show the first item after reaching the end 71 | circular : false, 72 | // if we want to specify a selector that triggers the next() function. example: ´#bb-nav-next´ 73 | nextEl : '', 74 | // if we want to specify a selector that triggers the prev() function 75 | prevEl : '', 76 | // autoplay. If true it overwrites the circular option to true 77 | autoplay : false, 78 | // time (ms) between page switch, if autoplay is true 79 | interval : 3000, 80 | // 3d perspective 81 | perspective : 1200, 82 | // callback after the flip transition 83 | // old is the index of the previous item 84 | // page is the current item´s index 85 | // isLimit is true if the current page is the last one (or the first one) 86 | onEndFlip : function(old, page, isLimit) { return false; }, 87 | // callback before the flip transition 88 | // page is the current item´s index 89 | onBeforeFlip : function(page) { return false; } 90 | }, 91 | _init : function() { 92 | // orientation class 93 | this.el.className += ' bb-' + this.options.orientation; 94 | this.el.style.perspective = this.options.perspective + 'px'; 95 | // items 96 | this.items = Array.prototype.slice.call( this.el.querySelectorAll( '.bb-item' ) ); 97 | // total items 98 | this.itemsCount = this.items.length; 99 | // current item´s index 100 | if ( (this.options.startPage > 0) && (this.options.startPage <= this.itemsCount) ) { 101 | this.currentIdx = (this.options.startPage - 1); 102 | } else { 103 | this.currentIdx = 0; 104 | } 105 | // previous item´s index 106 | this.previous = -1; 107 | // show first item 108 | this.current = this.items[ this.currentIdx ]; 109 | this.current.style.display = 'block'; 110 | // get width of this.el 111 | // this will be necessary to create the flipping layout 112 | this.elWidth = this.el.offsetWidth; 113 | var transEndEventNames = { 114 | 'WebkitTransition': 'webkitTransitionEnd', 115 | 'MozTransition': 'transitionend', 116 | 'OTransition': 'oTransitionEnd', 117 | 'msTransition': 'MSTransitionEnd', 118 | 'transition': 'transitionend' 119 | }; 120 | this.transEndEventName = transEndEventNames[Modernizr.prefixed( 'transition' )]; 121 | // support css 3d transforms && css transitions && Modernizr.csstransformspreserve3d 122 | this.support = Modernizr.csstransitions && Modernizr.csstransforms3d && Modernizr.csstransformspreserve3d; 123 | // initialize/bind some events 124 | this._initEvents(); 125 | // start slideshow 126 | if ( this.options.autoplay ) { 127 | this.options.circular = true; 128 | this._startSlideshow(); 129 | } 130 | }, 131 | _initEvents : function() { 132 | 133 | var self = this; 134 | 135 | if ( this.options.nextEl !== '' ) { 136 | document.querySelector( this.options.nextEl ).addEventListener( 'click', function() { self._action( 'next' ); return false; } ); 137 | document.querySelector( this.options.nextEl ).addEventListener( 'touchstart', function() { self._action( 'next' ); return false; } ); 138 | } 139 | 140 | if ( this.options.prevEl !== '' ) { 141 | document.querySelector( this.options.prevEl ).addEventListener( 'click', function() { self._action( 'prev' ); return false; } ); 142 | document.querySelector( this.options.prevEl ).addEventListener( 'touchstart', function() { self._action( 'prev' ); return false; } ); 143 | } 144 | 145 | window.addEventListener( 'resize', function() { self._resizeHandler(); } ); 146 | 147 | }, 148 | _action : function( dir, page ) { 149 | this._stopSlideshow(); 150 | this._navigate( dir, page ); 151 | }, 152 | _navigate : function( dir, page ) { 153 | 154 | if ( this.isAnimating ) { 155 | return false; 156 | } 157 | 158 | // callback trigger 159 | this.options.onBeforeFlip( this.currentIdx ); 160 | 161 | this.isAnimating = true; 162 | // update current value 163 | this.current = this.items[ this.currentIdx ]; 164 | 165 | if ( page !== undefined ) { 166 | this.currentIdx = page; 167 | } 168 | else if ( dir === 'next' && this.options.direction === 'ltr' || dir === 'prev' && this.options.direction === 'rtl' ) { 169 | if ( !this.options.circular && this.currentIdx === this.itemsCount - 1 ) { 170 | this.end = true; 171 | } 172 | else { 173 | this.previous = this.currentIdx; 174 | this.currentIdx = this.currentIdx < this.itemsCount - 1 ? this.currentIdx + 1 : 0; 175 | } 176 | } 177 | else if ( dir === 'prev' && this.options.direction === 'ltr' || dir === 'next' && this.options.direction === 'rtl' ) { 178 | if ( !this.options.circular && this.currentIdx === 0 ) { 179 | this.end = true; 180 | } 181 | else { 182 | this.previous = this.currentIdx; 183 | this.currentIdx = this.currentIdx > 0 ? this.currentIdx - 1 : this.itemsCount - 1; 184 | } 185 | } 186 | 187 | this.nextItem = !this.options.circular && this.end ? this.current : this.items[ this.currentIdx ]; 188 | 189 | this.items.forEach( function( el, i ) { el.style.display = 'none'; } ); 190 | if ( !this.support ) { 191 | this._layoutNoSupport( dir ); 192 | } else { 193 | this._layout( dir ); 194 | } 195 | 196 | }, 197 | _layoutNoSupport : function(dir) { 198 | this.nextItem.style.display = 'block'; 199 | this.end = false; 200 | this.isAnimating = false; 201 | var isLimit = dir === 'next' && this.currentIdx === this.itemsCount - 1 || dir === 'prev' && this.currentIdx === 0; 202 | // callback trigger 203 | this.options.onEndFlip( this.previous, this.currentIdx, isLimit ); 204 | }, 205 | // creates the necessary layout for the 3d structure and triggers the transitions 206 | _layout : function(dir) { 207 | 208 | var self = this, 209 | // basic structure: 1 element for the left side. 210 | s_left = this._addSide( 'left', dir ), 211 | // 1 element for the flipping/middle page 212 | s_middle = this._addSide( 'middle', dir ), 213 | // 1 element for the right side 214 | s_right = this._addSide( 'right', dir ), 215 | // overlays 216 | o_left = s_left.querySelector( 'div.bb-overlay' ), 217 | o_middle_f = s_middle.querySelector( 'div.bb-front' ).querySelector( 'div.bb-flipoverlay' ), 218 | o_middle_b = s_middle.querySelector( 'div.bb-back' ).querySelector( 'div.bb-flipoverlay' ), 219 | o_right = s_right.querySelector( 'div.bb-overlay' ), 220 | speed = this.end ? 400 : this.options.speed; 221 | 222 | var fChild = this.items[0]; 223 | this.el.insertBefore( s_left, fChild ); 224 | this.el.insertBefore( s_middle, fChild ); 225 | this.el.insertBefore( s_right, fChild ); 226 | s_left.style.zIndex = 102; 227 | s_middle.style.zIndex = 103; 228 | s_right.style.zIndex = 101; 229 | 230 | s_middle.style.transitionDuration = speed + 'ms'; 231 | s_middle.style.transitionTimingFunction = this.options.easing; 232 | 233 | s_middle.addEventListener( this.transEndEventName, function( event ) { 234 | if ( (" " + event.target.className + " ").replace(/[\n\t]/g, " ").indexOf(" bb-page ") > -1 ) { 235 | Array.prototype.slice.call( self.el.querySelectorAll( '.bb-page' ) ).forEach( function( el, i ) { 236 | self.el.removeChild( el ); 237 | } ); 238 | self.nextItem.style.display = 'block'; 239 | self.end = false; 240 | self.isAnimating = false; 241 | var isLimit = dir === 'next' && self.currentIdx === self.itemsCount - 1 || dir === 'prev' && self.currentIdx === 0; 242 | // callback trigger 243 | self.options.onEndFlip( self.previous, self.currentIdx, isLimit ); 244 | } 245 | } ); 246 | 247 | if ( dir === 'prev' ) { 248 | s_middle.className += ' bb-flip-initial'; 249 | } 250 | 251 | // overlays 252 | if ( this.options.shadows && !this.end ) { 253 | if( dir === 'next' ) { 254 | o_middle_f.style.transition = 'opacity ' + this.options.speed / 2 + 'ms ' + 'linear'; 255 | o_middle_b.style.transition = 'opacity ' + this.options.speed / 2 + 'ms ' + 'linear' + ' ' + this.options.speed / 2 + 'ms'; 256 | o_middle_b.style.opacity = this.options.shadowFlip; 257 | o_left.style.transition = 'opacity ' + this.options.speed / 2 + 'ms ' + 'linear' + ' ' + this.options.speed / 2 + 'ms'; 258 | o_right.style.transition = 'opacity ' + this.options.speed / 2 + 'ms ' + 'linear'; 259 | o_right.style.opacity = this.options.shadowSides; 260 | } 261 | else if( dir === 'prev' ) { 262 | o_middle_f.style.transition = 'opacity ' + this.options.speed / 2 + 'ms ' + 'linear' + ' ' + this.options.speed / 2 + 'ms'; 263 | o_middle_f.style.opacity = this.options.shadowFlip; 264 | o_middle_b.style.transition = 'opacity ' + this.options.speed / 2 + 'ms ' + 'linear'; 265 | o_left.style.transition = 'opacity ' + this.options.speed / 2 + 'ms ' + 'linear'; 266 | o_left.style.opacity = this.options.shadowSides; 267 | o_right.style.transition = 'opacity ' + this.options.speed / 2 + 'ms ' + 'linear' + ' ' + this.options.speed / 2 + 'ms'; 268 | } 269 | } 270 | 271 | setTimeout( function() { 272 | // first && last pages lift slightly up when we can't go further 273 | s_middle.className += self.end ? ' bb-flip-' + dir + '-end' : ' bb-flip-' + dir; 274 | 275 | // overlays 276 | if ( self.options.shadows && !self.end ) { 277 | o_middle_f.style.opacity = dir === 'next' ? self.options.shadowFlip : 0; 278 | o_middle_b.style.opacity = dir === 'next' ? 0 : self.options.shadowFlip; 279 | o_left.style.opacity = dir === 'next' ? self.options.shadowSides : 0; 280 | o_right.style.opacity = dir === 'next' ? 0 : self.options.shadowSides; 281 | } 282 | }, 25 ); 283 | }, 284 | // adds the necessary sides (bb-page) to the layout 285 | _addSide : function( side, dir ) { 286 | var sideEl = document.createElement( 'div' ); 287 | sideEl.className = 'bb-page'; 288 | 289 | switch (side) { 290 | case 'left': 291 | /* 292 |
293 |
294 |
295 |
296 |
297 | dir==='next' ? [content of current page] : [content of next page] 298 |
299 |
300 |
301 |
302 |
303 |
304 | */ 305 | var inner = dir === 'next' ? this.current.innerHTML : this.nextItem.innerHTML; 306 | sideEl.innerHTML = '
' + inner + '
'; 307 | break; 308 | case 'middle': 309 | /* 310 |
311 |
312 |
313 |
314 |
315 | dir==='next' ? [content of current page] : [content of next page] 316 |
317 |
318 |
319 |
320 |
321 |
322 |
323 |
324 |
325 | dir==='next' ? [content of next page] : [content of current page] 326 |
327 |
328 |
329 |
330 |
331 |
332 | */ 333 | var frontinner = dir === 'next' ? this.current.innerHTML : this.nextItem.innerHTML; 334 | var backinner = dir === 'next' ? this.nextItem.innerHTML : this.current.innerHTML; 335 | sideEl.innerHTML = '
' + frontinner + '
' + backinner + '
'; 336 | break; 337 | case 'right': 338 | /* 339 |
340 |
341 |
342 |
343 |
344 | dir==='next' ? [content of next page] : [content of current page] 345 |
346 |
347 |
348 |
349 |
350 |
351 | */ 352 | var inner = dir === 'next' ? this.nextItem.innerHTML : this.current.innerHTML; 353 | sideEl.innerHTML = '
' + inner + '
'; 354 | break; 355 | } 356 | 357 | return sideEl; 358 | }, 359 | _startSlideshow : function() { 360 | var self = this; 361 | this.slideshow = setTimeout( function() { 362 | self._navigate( 'next' ); 363 | if ( self.options.autoplay ) { 364 | self._startSlideshow(); 365 | } 366 | }, this.options.interval ); 367 | }, 368 | _stopSlideshow : function() { 369 | if ( this.options.autoplay ) { 370 | clearTimeout( this.slideshow ); 371 | this.options.autoplay = false; 372 | } 373 | }, 374 | // public method: flips next 375 | next : function() { 376 | this._action( this.options.direction === 'ltr' ? 'next' : 'prev' ); 377 | }, 378 | // public method: flips back 379 | prev : function() { 380 | this._action( this.options.direction === 'ltr' ? 'prev' : 'next' ); 381 | }, 382 | // public method: goes to a specific page 383 | jump : function( page ) { 384 | 385 | page -= 1; 386 | 387 | if ( page === this.currentIdx || page >= this.itemsCount || page < 0 ) { 388 | return false; 389 | } 390 | var dir; 391 | if( this.options.direction === 'ltr' ) { 392 | dir = page > this.currentIdx ? 'next' : 'prev'; 393 | } 394 | else { 395 | dir = page > this.currentIdx ? 'prev' : 'next'; 396 | } 397 | this._action( dir, page ); 398 | 399 | }, 400 | // public method: goes to the last page 401 | last : function() { 402 | this.jump( this.itemsCount ); 403 | }, 404 | // public method: goes to the first page 405 | first : function() { 406 | this.jump( 1 ); 407 | }, 408 | // taken from https://github.com/desandro/vanilla-masonry/blob/master/masonry.js by David DeSandro 409 | // original debounce by John Hann 410 | // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/ 411 | _resizeHandler : function() { 412 | var self = this; 413 | function delayed() { 414 | self._resize(); 415 | self._resizeTimeout = null; 416 | } 417 | if ( this._resizeTimeout ) { 418 | clearTimeout( this._resizeTimeout ); 419 | } 420 | this._resizeTimeout = setTimeout( delayed, 50 ); 421 | }, 422 | _resize : function() { 423 | // update width value 424 | this.elWidth = this.el.offsetWidth; 425 | }, 426 | // public method: check if isAnimating is true 427 | isActive: function() { 428 | return this.isAnimating; 429 | }, 430 | // public method: dynamically adds new elements 431 | // call this method after inserting new "bb-item" elements inside the BookBlock 432 | update : function () { 433 | var currentItem = this.items[ this.currentIdx ]; 434 | this.items = Array.prototype.slice.call( this.el.querySelectorAll( '.bb-item' ) ); 435 | this.itemsCount = this.items.length; 436 | this.currentIdx = this.items.indexOf( currentItem ); 437 | }, 438 | destroy : function() { 439 | if ( this.options.autoplay ) { 440 | this._stopSlideshow(); 441 | } 442 | this.el.className = this.el.className.replace(new RegExp("(^|\\s+)" + 'bb-' + this.options.orientation + "(\\s+|$)"), ' '); 443 | this.items.forEach( function( el, i ) { el.style.display = 'block'; } ); 444 | 445 | if ( this.options.nextEl !== '' ) { 446 | this.options.nextEl.removeEventListener( 'click' ); 447 | this.options.nextEl.removeEventListener( 'touchstart' ); 448 | } 449 | 450 | if ( this.options.prevEl !== '' ) { 451 | this.options.prevEl.removeEventListener( 'click' ); 452 | this.options.prevEl.removeEventListener( 'touchstart' ); 453 | } 454 | 455 | window.removeEventListener( 'debouncedresize' ); 456 | } 457 | } 458 | 459 | // add to global namespace 460 | window.BookBlock = BookBlock; 461 | 462 | } )( window ); 463 | -------------------------------------------------------------------------------- /js/bookblock.min.js: -------------------------------------------------------------------------------- 1 | (function(c){var a=c.document,d=c.Modernizr;d.addTest("csstransformspreserve3d",function(){var h=d.prefixed("transformStyle");var g="preserve-3d";var f;if(!h){return false}h=h.replace(/([A-Z])/g,function(j,i){return"-"+i.toLowerCase()}).replace(/^ms-/,"-ms-");d.testStyles("#modernizr{"+h+":"+g+";}",function(i,j){f=c.getComputedStyle?getComputedStyle(i,null).getPropertyValue(h):""});return(f===g)});function e(g,f){for(var h in f){if(f.hasOwnProperty(h)){g[h]=f[h]}}return g}function b(g,f){this.el=g;this.options=e(this.defaults,f);this._init()}b.prototype={defaults:{startPage:1,orientation:"vertical",direction:"ltr",speed:1000,easing:"ease-in-out",shadows:true,shadowSides:0.2,shadowFlip:0.1,circular:false,nextEl:"",prevEl:"",autoplay:false,interval:3000,onEndFlip:function(f,h,g){return false},onBeforeFlip:function(f){return false}},_init:function(){this.el.className+=" bb-"+this.options.orientation;this.items=Array.prototype.slice.call(this.el.querySelectorAll(".bb-item"));this.itemsCount=this.items.length;if((this.options.startPage>0)&&(this.options.startPage<=this.itemsCount)){this.currentIdx=(this.options.startPage-1)}else{this.currentIdx=0}this.previous=-1;this.current=this.items[this.currentIdx];this.current.style.display="block";this.elWidth=this.el.offsetWidth;var f={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd",msTransition:"MSTransitionEnd",transition:"transitionend"};this.transEndEventName=f[d.prefixed("transition")];this.support=d.csstransitions&&d.csstransforms3d&&d.csstransformspreserve3d;this._initEvents();if(this.options.autoplay){this.options.circular=true;this._startSlideshow()}},_initEvents:function(){var f=this;if(this.options.nextEl!==""){a.querySelector(this.options.nextEl).addEventListener("click",function(){f._action("next");return false});a.querySelector(this.options.nextEl).addEventListener("touchstart",function(){f._action("next");return false})}if(this.options.prevEl!==""){a.querySelector(this.options.prevEl).addEventListener("click",function(){f._action("prev");return false});a.querySelector(this.options.prevEl).addEventListener("touchstart",function(){f._action("prev");return false})}c.addEventListener("resize",function(){f._resizeHandler()})},_action:function(f,g){this._stopSlideshow();this._navigate(f,g)},_navigate:function(f,g){if(this.isAnimating){return false}this.options.onBeforeFlip(this.currentIdx);this.isAnimating=true;this.current=this.items[this.currentIdx];if(g!==undefined){this.currentIdx=g}else{if(f==="next"&&this.options.direction==="ltr"||f==="prev"&&this.options.direction==="rtl"){if(!this.options.circular&&this.currentIdx===this.itemsCount-1){this.end=true}else{this.previous=this.currentIdx;this.currentIdx=this.currentIdx0?this.currentIdx-1:this.itemsCount-1}}}}this.nextItem=!this.options.circular&&this.end?this.current:this.items[this.currentIdx];this.items.forEach(function(j,h){j.style.display="none"});if(!this.support){this._layoutNoSupport(f)}else{this._layout(f)}},_layoutNoSupport:function(g){this.nextItem.style.display="block";this.end=false;this.isAnimating=false;var f=g==="next"&&this.currentIdx===this.itemsCount-1||g==="prev"&&this.currentIdx===0;this.options.onEndFlip(this.previous,this.currentIdx,f)},_layout:function(i){var o=this,j=this._addSide("left",i),p=this._addSide("middle",i),l=this._addSide("right",i),f=j.querySelector("div.bb-overlay"),m=p.querySelector("div.bb-front").querySelector("div.bb-flipoverlay"),n=p.querySelector("div.bb-back").querySelector("div.bb-flipoverlay"),k=l.querySelector("div.bb-overlay"),h=this.end?400:this.options.speed;var g=this.items[0];this.el.insertBefore(j,g);this.el.insertBefore(p,g);this.el.insertBefore(l,g);j.style.zIndex=102;p.style.zIndex=103;l.style.zIndex=101;p.style.transitionDuration=h+"ms";p.style.transitionTimingFunction=this.options.easing;p.addEventListener(this.transEndEventName,function(r){if((" "+r.target.className+" ").replace(/[\n\t]/g," ").indexOf(" bb-page ")>-1){Array.prototype.slice.call(o.el.querySelectorAll(".bb-page")).forEach(function(t,s){o.el.removeChild(t)});o.nextItem.style.display="block";o.end=false;o.isAnimating=false;var q=i==="next"&&o.currentIdx===o.itemsCount-1||i==="prev"&&o.currentIdx===0;o.options.onEndFlip(o.previous,o.currentIdx,q)}});if(i==="prev"){p.className+=" bb-flip-initial"}if(this.options.shadows&&!this.end){if(i==="next"){m.style.transition="opacity "+this.options.speed/2+"ms linear";n.style.transition="opacity "+this.options.speed/2+"ms linear "+this.options.speed/2+"ms";n.style.opacity=this.options.shadowFlip;f.style.transition="opacity "+this.options.speed/2+"ms linear "+this.options.speed/2+"ms";k.style.transition="opacity "+this.options.speed/2+"ms linear";k.style.opacity=this.options.shadowSides}else{if(i==="prev"){m.style.transition="opacity "+this.options.speed/2+"ms linear "+this.options.speed/2+"ms";m.style.opacity=this.options.shadowFlip;n.style.transition="opacity "+this.options.speed/2+"ms linear";f.style.transition="opacity "+this.options.speed/2+"ms linear";f.style.opacity=this.options.shadowSides;k.style.transition="opacity "+this.options.speed/2+"ms linear "+this.options.speed/2+"ms"}}}setTimeout(function(){p.className+=o.end?" bb-flip-"+i+"-end":" bb-flip-"+i;if(o.options.shadows&&!o.end){m.style.opacity=i==="next"?o.options.shadowFlip:0;n.style.opacity=i==="next"?0:o.options.shadowFlip;f.style.opacity=i==="next"?o.options.shadowSides:0;k.style.opacity=i==="next"?0:o.options.shadowSides}},25)},_addSide:function(h,g){var j=a.createElement("div");j.className="bb-page";switch(h){case"left":var f=g==="next"?this.current.innerHTML:this.nextItem.innerHTML;j.innerHTML='
'+f+'
';break;case"middle":var k=g==="next"?this.current.innerHTML:this.nextItem.innerHTML;var i=g==="next"?this.nextItem.innerHTML:this.current.innerHTML;j.innerHTML='
'+k+'
'+i+'
';break;case"right":var f=g==="next"?this.nextItem.innerHTML:this.current.innerHTML;j.innerHTML='
'+f+'
';break}return j},_startSlideshow:function(){var f=this;this.slideshow=setTimeout(function(){f._navigate("next");if(f.options.autoplay){f._startSlideshow()}},this.options.interval)},_stopSlideshow:function(){if(this.options.autoplay){clearTimeout(this.slideshow);this.options.autoplay=false}},next:function(){this._action(this.options.direction==="ltr"?"next":"prev")},prev:function(){this._action(this.options.direction==="ltr"?"prev":"next")},jump:function(g){g-=1;if(g===this.currentIdx||g>=this.itemsCount||g<0){return false}var f;if(this.options.direction==="ltr"){f=g>this.currentIdx?"next":"prev"}else{f=g>this.currentIdx?"prev":"next"}this._action(f,g)},last:function(){this.jump(this.itemsCount)},first:function(){this.jump(1)},_resizeHandler:function(){var f=this;function g(){f._resize();f._resizeTimeout=null}if(this._resizeTimeout){clearTimeout(this._resizeTimeout)}this._resizeTimeout=setTimeout(g,50)},_resize:function(){this.elWidth=this.el.offsetWidth},isActive:function(){return this.isAnimating},update:function(){var f=this.items[this.currentIdx];this.items=Array.prototype.slice.call(this.el.querySelectorAll(".bb-item"));this.itemsCount=this.items.length;this.currentIdx=this.items.indexOf(f)},destroy:function(){if(this.options.autoplay){this._stopSlideshow()}this.el.className=this.el.className.replace(new RegExp("(^|\\s+)bb-"+this.options.orientation+"(\\s+|$)")," ");this.items.forEach(function(g,f){g.style.display="block"});if(this.options.nextEl!==""){this.options.nextEl.removeEventListener("click");this.options.nextEl.removeEventListener("touchstart")}if(this.options.prevEl!==""){this.options.prevEl.removeEventListener("click");this.options.prevEl.removeEventListener("touchstart")}c.removeEventListener("debouncedresize")}};c.BookBlock=b})(window); -------------------------------------------------------------------------------- /js/jquery.bookblock.js: -------------------------------------------------------------------------------- 1 | /** 2 | * jquery.bookblock.js v2.0.1 3 | * http://www.codrops.com 4 | * 5 | * Licensed under the MIT license. 6 | * http://www.opensource.org/licenses/mit-license.php 7 | * 8 | * Copyright 2013, Codrops 9 | * http://www.codrops.com 10 | */ 11 | ;( function( $, window, undefined ) { 12 | 13 | 'use strict'; 14 | 15 | // global 16 | var $window = $(window), 17 | Modernizr = window.Modernizr; 18 | 19 | // https://gist.github.com/edankwan/4389601 20 | Modernizr.addTest('csstransformspreserve3d', function () { 21 | var prop = Modernizr.prefixed('transformStyle'); 22 | var val = 'preserve-3d'; 23 | var computedStyle; 24 | if(!prop) return false; 25 | 26 | prop = prop.replace(/([A-Z])/g, function(str,m1){ return '-' + m1.toLowerCase(); }).replace(/^ms-/,'-ms-'); 27 | 28 | Modernizr.testStyles('#modernizr{' + prop + ':' + val + ';}', function (el, rule) { 29 | computedStyle = window.getComputedStyle ? getComputedStyle(el, null).getPropertyValue(prop) : ''; 30 | }); 31 | 32 | return (computedStyle === val); 33 | }); 34 | 35 | /* 36 | * debouncedresize: special jQuery event that happens once after a window resize 37 | * 38 | * latest version and complete README available on Github: 39 | * https://github.com/louisremi/jquery-smartresize 40 | * 41 | * Copyright 2012 @louis_remi 42 | * Licensed under the MIT license. 43 | * 44 | * This saved you an hour of work? 45 | * Send me music http://www.amazon.co.uk/wishlist/HNTU0468LQON 46 | */ 47 | var $event = $.event, 48 | $special, 49 | resizeTimeout; 50 | 51 | $special = $event.special.debouncedresize = { 52 | setup: function() { 53 | $( this ).on( "resize", $special.handler ); 54 | }, 55 | teardown: function() { 56 | $( this ).off( "resize", $special.handler ); 57 | }, 58 | handler: function( event, execAsap ) { 59 | // Save the context 60 | var context = this, 61 | args = arguments, 62 | dispatch = function() { 63 | // set correct event type 64 | event.type = "debouncedresize"; 65 | $event.dispatch.apply( context, args ); 66 | }; 67 | 68 | if ( resizeTimeout ) { 69 | clearTimeout( resizeTimeout ); 70 | } 71 | 72 | execAsap ? 73 | dispatch() : 74 | resizeTimeout = setTimeout( dispatch, $special.threshold ); 75 | }, 76 | threshold: 150 77 | }; 78 | 79 | $.BookBlock = function( options, element ) { 80 | this.$el = $( element ); 81 | this._init( options ); 82 | }; 83 | 84 | // the options 85 | $.BookBlock.defaults = { 86 | // page to start on 87 | startPage : 1, 88 | // vertical or horizontal flip 89 | orientation : 'vertical', 90 | // ltr (left to right) or rtl (right to left) 91 | direction : 'ltr', 92 | // speed for the flip transition in ms 93 | speed : 1000, 94 | // easing for the flip transition 95 | easing : 'ease-in-out', 96 | // if set to true, both the flipping page and the sides will have an overlay to simulate shadows 97 | shadows : true, 98 | // opacity value for the "shadow" on both sides (when the flipping page is over it) 99 | // value : 0.1 - 1 100 | shadowSides : 0.2, 101 | // opacity value for the "shadow" on the flipping page (while it is flipping) 102 | // value : 0.1 - 1 103 | shadowFlip : 0.1, 104 | // if we should show the first item after reaching the end 105 | circular : false, 106 | // if we want to specify a selector that triggers the next() function. example: ´#bb-nav-next´ 107 | nextEl : '', 108 | // if we want to specify a selector that triggers the prev() function 109 | prevEl : '', 110 | // autoplay. If true it overwrites the circular option to true 111 | autoplay : false, 112 | // time (ms) between page switch, if autoplay is true 113 | interval : 3000, 114 | // callback after the flip transition 115 | // old is the index of the previous item 116 | // page is the current item´s index 117 | // isLimit is true if the current page is the last one (or the first one) 118 | onEndFlip : function(old, page, isLimit) { return false; }, 119 | // callback before the flip transition 120 | // page is the current item´s index 121 | onBeforeFlip : function(page) { return false; } 122 | }; 123 | 124 | $.BookBlock.prototype = { 125 | _init : function(options) { 126 | // options 127 | this.options = $.extend( true, {}, $.BookBlock.defaults, options ); 128 | // orientation class 129 | this.$el.addClass( 'bb-' + this.options.orientation ); 130 | // items 131 | this.$items = this.$el.children( '.bb-item' ).hide(); 132 | // total items 133 | this.itemsCount = this.$items.length; 134 | // current item´s index 135 | if ( (this.options.startPage > 0) && (this.options.startPage <= this.itemsCount) ) { 136 | this.current = (this.options.startPage - 1); 137 | } else { 138 | logError('startPage option is out of range'); 139 | this.current = 0; 140 | } 141 | // previous item´s index 142 | this.previous = -1; 143 | // show first item 144 | this.$current = this.$items.eq( this.current ).show(); 145 | // get width of this.$el 146 | // this will be necessary to create the flipping layout 147 | this.elWidth = this.$el.width(); 148 | var transEndEventNames = { 149 | 'WebkitTransition': 'webkitTransitionEnd', 150 | 'MozTransition': 'transitionend', 151 | 'OTransition': 'oTransitionEnd', 152 | 'msTransition': 'MSTransitionEnd', 153 | 'transition': 'transitionend' 154 | }; 155 | this.transEndEventName = transEndEventNames[Modernizr.prefixed( 'transition' )] + '.bookblock'; 156 | // support css 3d transforms && css transitions && Modernizr.csstransformspreserve3d 157 | this.support = Modernizr.csstransitions && Modernizr.csstransforms3d && Modernizr.csstransformspreserve3d; 158 | // initialize/bind some events 159 | this._initEvents(); 160 | // start slideshow 161 | if ( this.options.autoplay ) { 162 | this.options.circular = true; 163 | this._startSlideshow(); 164 | } 165 | }, 166 | _initEvents : function() { 167 | 168 | var self = this; 169 | 170 | if ( this.options.nextEl !== '' ) { 171 | $( this.options.nextEl ).on( 'click.bookblock touchstart.bookblock', function() { self._action( 'next' ); return false; } ); 172 | } 173 | 174 | if ( this.options.prevEl !== '' ) { 175 | $( this.options.prevEl ).on( 'click.bookblock touchstart.bookblock', function() { self._action( 'prev' ); return false; } ); 176 | } 177 | 178 | $window.on( 'debouncedresize', function() { 179 | // update width value 180 | self.elWidth = self.$el.width(); 181 | } ); 182 | 183 | }, 184 | _action : function( dir, page ) { 185 | this._stopSlideshow(); 186 | this._navigate( dir, page ); 187 | }, 188 | _navigate : function( dir, page ) { 189 | 190 | if ( this.isAnimating ) { 191 | return false; 192 | } 193 | 194 | // callback trigger 195 | this.options.onBeforeFlip( this.current ); 196 | 197 | this.isAnimating = true; 198 | // update current value 199 | this.$current = this.$items.eq( this.current ); 200 | 201 | if ( page !== undefined ) { 202 | this.current = page; 203 | } 204 | else if ( dir === 'next' && this.options.direction === 'ltr' || dir === 'prev' && this.options.direction === 'rtl' ) { 205 | if ( !this.options.circular && this.current === this.itemsCount - 1 ) { 206 | this.end = true; 207 | } 208 | else { 209 | this.previous = this.current; 210 | this.current = this.current < this.itemsCount - 1 ? this.current + 1 : 0; 211 | } 212 | } 213 | else if ( dir === 'prev' && this.options.direction === 'ltr' || dir === 'next' && this.options.direction === 'rtl' ) { 214 | if ( !this.options.circular && this.current === 0 ) { 215 | this.end = true; 216 | } 217 | else { 218 | this.previous = this.current; 219 | this.current = this.current > 0 ? this.current - 1 : this.itemsCount - 1; 220 | } 221 | } 222 | 223 | this.$nextItem = !this.options.circular && this.end ? this.$current : this.$items.eq( this.current ); 224 | 225 | if ( !this.support ) { 226 | this._layoutNoSupport( dir ); 227 | } else { 228 | this._layout( dir ); 229 | } 230 | 231 | }, 232 | _layoutNoSupport : function(dir) { 233 | this.$items.hide(); 234 | this.$nextItem.show(); 235 | this.end = false; 236 | this.isAnimating = false; 237 | var isLimit = dir === 'next' && this.current === this.itemsCount - 1 || dir === 'prev' && this.current === 0; 238 | // callback trigger 239 | this.options.onEndFlip( this.previous, this.current, isLimit ); 240 | }, 241 | // creates the necessary layout for the 3d structure 242 | _layout : function(dir) { 243 | 244 | var self = this, 245 | // basic structure: 1 element for the left side. 246 | $s_left = this._addSide( 'left', dir ), 247 | // 1 element for the flipping/middle page 248 | $s_middle = this._addSide( 'middle', dir ), 249 | // 1 element for the right side 250 | $s_right = this._addSide( 'right', dir ), 251 | // overlays 252 | $o_left = $s_left.find( 'div.bb-overlay' ), 253 | $o_middle_f = $s_middle.find( 'div.bb-flipoverlay:first' ), 254 | $o_middle_b = $s_middle.find( 'div.bb-flipoverlay:last' ), 255 | $o_right = $s_right.find( 'div.bb-overlay' ), 256 | speed = this.end ? 400 : this.options.speed; 257 | 258 | this.$items.hide(); 259 | this.$el.prepend( $s_left, $s_middle, $s_right ); 260 | 261 | $s_middle.css({ 262 | transitionDuration: speed + 'ms', 263 | transitionTimingFunction : this.options.easing 264 | }).on( this.transEndEventName, function( event ) { 265 | if ( $( event.target ).hasClass( 'bb-page' ) ) { 266 | self.$el.children( '.bb-page' ).remove(); 267 | self.$nextItem.show(); 268 | self.end = false; 269 | self.isAnimating = false; 270 | var isLimit = dir === 'next' && self.current === self.itemsCount - 1 || dir === 'prev' && self.current === 0; 271 | // callback trigger 272 | self.options.onEndFlip( self.previous, self.current, isLimit ); 273 | } 274 | }); 275 | 276 | if ( dir === 'prev' ) { 277 | $s_middle.addClass( 'bb-flip-initial' ); 278 | } 279 | 280 | // overlays 281 | if (this.options.shadows && !this.end) { 282 | 283 | var o_left_style = (dir === 'next') ? { 284 | transition: 'opacity ' + this.options.speed / 2 + 'ms ' + 'linear' + ' ' + this.options.speed / 2 + 'ms' 285 | } : { 286 | transition: 'opacity ' + this.options.speed / 2 + 'ms ' + 'linear', 287 | opacity: this.options.shadowSides 288 | }, 289 | o_middle_f_style = (dir === 'next') ? { 290 | transition: 'opacity ' + this.options.speed / 2 + 'ms ' + 'linear' 291 | } : { 292 | transition: 'opacity ' + this.options.speed / 2 + 'ms ' + 'linear' + ' ' + this.options.speed / 2 + 'ms', 293 | opacity: this.options.shadowFlip 294 | }, 295 | o_middle_b_style = (dir === 'next') ? { 296 | transition: 'opacity ' + this.options.speed / 2 + 'ms ' + 'linear' + ' ' + this.options.speed / 2 + 'ms', 297 | opacity: this.options.shadowFlip 298 | } : { 299 | transition: 'opacity ' + this.options.speed / 2 + 'ms ' + 'linear' 300 | }, 301 | o_right_style = (dir === 'next') ? { 302 | transition: 'opacity ' + this.options.speed / 2 + 'ms ' + 'linear', 303 | opacity: this.options.shadowSides 304 | } : { 305 | transition: 'opacity ' + this.options.speed / 2 + 'ms ' + 'linear' + ' ' + this.options.speed / 2 + 'ms' 306 | }; 307 | 308 | $o_middle_f.css(o_middle_f_style); 309 | $o_middle_b.css(o_middle_b_style); 310 | $o_left.css(o_left_style); 311 | $o_right.css(o_right_style); 312 | 313 | } 314 | 315 | setTimeout( function() { 316 | // first && last pages lift slightly up when we can't go further 317 | $s_middle.addClass( self.end ? 'bb-flip-' + dir + '-end' : 'bb-flip-' + dir ); 318 | 319 | // overlays 320 | if ( self.options.shadows && !self.end ) { 321 | 322 | $o_middle_f.css({ 323 | opacity: dir === 'next' ? self.options.shadowFlip : 0 324 | }); 325 | 326 | $o_middle_b.css({ 327 | opacity: dir === 'next' ? 0 : self.options.shadowFlip 328 | }); 329 | 330 | $o_left.css({ 331 | opacity: dir === 'next' ? self.options.shadowSides : 0 332 | }); 333 | 334 | $o_right.css({ 335 | opacity: dir === 'next' ? 0 : self.options.shadowSides 336 | }); 337 | 338 | } 339 | }, 25 ); 340 | }, 341 | // adds the necessary sides (bb-page) to the layout 342 | _addSide : function( side, dir ) { 343 | var $side; 344 | 345 | switch (side) { 346 | case 'left': 347 | /* 348 |
349 |
350 |
351 |
352 |
353 | dir==='next' ? [content of current page] : [content of next page] 354 |
355 |
356 |
357 |
358 |
359 |
360 | */ 361 | $side = $('
' + ( dir === 'next' ? this.$current.html() : this.$nextItem.html() ) + '
').css( 'z-index', 102 ); 362 | break; 363 | case 'middle': 364 | /* 365 |
366 |
367 |
368 |
369 |
370 | dir==='next' ? [content of current page] : [content of next page] 371 |
372 |
373 |
374 |
375 |
376 |
377 |
378 |
379 |
380 | dir==='next' ? [content of next page] : [content of current page] 381 |
382 |
383 |
384 |
385 |
386 |
387 | */ 388 | $side = $('
' + (dir === 'next' ? this.$current.html() : this.$nextItem.html()) + '
' + ( dir === 'next' ? this.$nextItem.html() : this.$current.html() ) + '
').css( 'z-index', 103 ); 389 | break; 390 | case 'right': 391 | /* 392 |
393 |
394 |
395 |
396 |
397 | dir==='next' ? [content of next page] : [content of current page] 398 |
399 |
400 |
401 |
402 |
403 |
404 | */ 405 | $side = $('
' + ( dir === 'next' ? this.$nextItem.html() : this.$current.html() ) + '
').css( 'z-index', 101 ); 406 | break; 407 | } 408 | 409 | return $side; 410 | }, 411 | _startSlideshow : function() { 412 | var self = this; 413 | this.slideshow = setTimeout( function() { 414 | self._navigate( 'next' ); 415 | if ( self.options.autoplay ) { 416 | self._startSlideshow(); 417 | } 418 | }, this.options.interval ); 419 | }, 420 | _stopSlideshow : function() { 421 | if ( this.options.autoplay ) { 422 | clearTimeout( this.slideshow ); 423 | this.options.autoplay = false; 424 | } 425 | }, 426 | // public method: flips next 427 | next : function() { 428 | this._action( this.options.direction === 'ltr' ? 'next' : 'prev' ); 429 | }, 430 | // public method: flips back 431 | prev : function() { 432 | this._action( this.options.direction === 'ltr' ? 'prev' : 'next' ); 433 | }, 434 | // public method: goes to a specific page 435 | jump : function( page ) { 436 | 437 | page -= 1; 438 | 439 | if ( page === this.current || page >= this.itemsCount || page < 0 ) { 440 | return false; 441 | } 442 | 443 | var dir; 444 | if( this.options.direction === 'ltr' ) { 445 | dir = page > this.current ? 'next' : 'prev'; 446 | } 447 | else { 448 | dir = page > this.current ? 'prev' : 'next'; 449 | } 450 | this._action( dir, page ); 451 | 452 | }, 453 | // public method: goes to the last page 454 | last : function() { 455 | this.jump( this.itemsCount ); 456 | }, 457 | // public method: goes to the first page 458 | first : function() { 459 | this.jump( 1 ); 460 | }, 461 | // public method: check if isAnimating is true 462 | isActive: function() { 463 | return this.isAnimating; 464 | }, 465 | // public method: dynamically adds new elements 466 | // call this method after inserting new "bb-item" elements inside the BookBlock 467 | update : function () { 468 | var $currentItem = this.$items.eq( this.current ); 469 | this.$items = this.$el.children( '.bb-item' ); 470 | this.itemsCount = this.$items.length; 471 | this.current = $currentItem.index(); 472 | }, 473 | destroy : function() { 474 | if ( this.options.autoplay ) { 475 | this._stopSlideshow(); 476 | } 477 | this.$el.removeClass( 'bb-' + this.options.orientation ); 478 | this.$items.show(); 479 | 480 | if ( this.options.nextEl !== '' ) { 481 | $( this.options.nextEl ).off( '.bookblock' ); 482 | } 483 | 484 | if ( this.options.prevEl !== '' ) { 485 | $( this.options.prevEl ).off( '.bookblock' ); 486 | } 487 | 488 | $window.off( 'debouncedresize' ); 489 | } 490 | } 491 | 492 | var logError = function( message ) { 493 | if ( window.console ) { 494 | window.console.error( message ); 495 | } 496 | }; 497 | 498 | $.fn.bookblock = function( options ) { 499 | if ( typeof options === 'string' ) { 500 | var args = Array.prototype.slice.call( arguments, 1 ); 501 | this.each(function() { 502 | var instance = $.data( this, 'bookblock' ); 503 | if ( !instance ) { 504 | logError( "cannot call methods on bookblock prior to initialization; " + 505 | "attempted to call method '" + options + "'" ); 506 | return; 507 | } 508 | if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) { 509 | logError( "no such method '" + options + "' for bookblock instance" ); 510 | return; 511 | } 512 | instance[ options ].apply( instance, args ); 513 | }); 514 | } 515 | else { 516 | this.each(function() { 517 | var instance = $.data( this, 'bookblock' ); 518 | if ( instance ) { 519 | instance._init(); 520 | } 521 | else { 522 | instance = $.data( this, 'bookblock', new $.BookBlock( options, this ) ); 523 | } 524 | }); 525 | } 526 | return this; 527 | }; 528 | 529 | } )( jQuery, window ); 530 | -------------------------------------------------------------------------------- /js/jquery.bookblock.min.js: -------------------------------------------------------------------------------- 1 | (function(f,g,d){var c=f(g),e=g.Modernizr;e.addTest("csstransformspreserve3d",function(){var l=e.prefixed("transformStyle");var k="preserve-3d";var j;if(!l){return false}l=l.replace(/([A-Z])/g,function(n,m){return"-"+m.toLowerCase()}).replace(/^ms-/,"-ms-");e.testStyles("#modernizr{"+l+":"+k+";}",function(m,n){j=g.getComputedStyle?getComputedStyle(m,null).getPropertyValue(l):""});return(j===k)});var a=f.event,b,i;b=a.special.debouncedresize={setup:function(){f(this).on("resize",b.handler)},teardown:function(){f(this).off("resize",b.handler)},handler:function(n,j){var m=this,l=arguments,k=function(){n.type="debouncedresize";a.dispatch.apply(m,l)};if(i){clearTimeout(i)}j?k():i=setTimeout(k,b.threshold)},threshold:150};f.BookBlock=function(j,k){this.$el=f(k);this._init(j)};f.BookBlock.defaults={startPage:1,orientation:"vertical",direction:"ltr",speed:1000,easing:"ease-in-out",shadows:true,shadowSides:0.2,shadowFlip:0.1,circular:false,nextEl:"",prevEl:"",autoplay:false,interval:3000,onEndFlip:function(j,l,k){return false},onBeforeFlip:function(j){return false}};f.BookBlock.prototype={_init:function(j){this.options=f.extend(true,{},f.BookBlock.defaults,j);this.$el.addClass("bb-"+this.options.orientation);this.$items=this.$el.children(".bb-item").hide();this.itemsCount=this.$items.length;if((this.options.startPage>0)&&(this.options.startPage<=this.itemsCount)){this.current=(this.options.startPage-1)}else{h("startPage option is out of range");this.current=0}this.previous=-1;this.$current=this.$items.eq(this.current).show();this.elWidth=this.$el.width();var k={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd",msTransition:"MSTransitionEnd",transition:"transitionend"};this.transEndEventName=k[e.prefixed("transition")]+".bookblock";this.support=e.csstransitions&&e.csstransforms3d&&e.csstransformspreserve3d;this._initEvents();if(this.options.autoplay){this.options.circular=true;this._startSlideshow()}},_initEvents:function(){var j=this;if(this.options.nextEl!==""){f(this.options.nextEl).on("click.bookblock touchstart.bookblock",function(){j._action("next");return false})}if(this.options.prevEl!==""){f(this.options.prevEl).on("click.bookblock touchstart.bookblock",function(){j._action("prev");return false})}c.on("debouncedresize",function(){j.elWidth=j.$el.width()})},_action:function(j,k){this._stopSlideshow();this._navigate(j,k)},_navigate:function(j,k){if(this.isAnimating){return false}this.options.onBeforeFlip(this.current);this.isAnimating=true;this.$current=this.$items.eq(this.current);if(k!==d){this.current=k}else{if(j==="next"&&this.options.direction==="ltr"||j==="prev"&&this.options.direction==="rtl"){if(!this.options.circular&&this.current===this.itemsCount-1){this.end=true}else{this.previous=this.current;this.current=this.current0?this.current-1:this.itemsCount-1}}}}this.$nextItem=!this.options.circular&&this.end?this.$current:this.$items.eq(this.current);if(!this.support){this._layoutNoSupport(j)}else{this._layout(j)}},_layoutNoSupport:function(k){this.$items.hide();this.$nextItem.show();this.end=false;this.isAnimating=false;var j=k==="next"&&this.current===this.itemsCount-1||k==="prev"&&this.current===0;this.options.onEndFlip(this.previous,this.current,j)},_layout:function(l){var v=this,u=this._addSide("left",l),o=this._addSide("middle",l),j=this._addSide("right",l),r=u.find("div.bb-overlay"),t=o.find("div.bb-flipoverlay:first"),w=o.find("div.bb-flipoverlay:last"),s=j.find("div.bb-overlay"),k=this.end?400:this.options.speed;this.$items.hide();this.$el.prepend(u,o,j);o.css({transitionDuration:k+"ms",transitionTimingFunction:this.options.easing}).on(this.transEndEventName,function(y){if(f(y.target).hasClass("bb-page")){v.$el.children(".bb-page").remove();v.$nextItem.show();v.end=false;v.isAnimating=false;var x=l==="next"&&v.current===v.itemsCount-1||l==="prev"&&v.current===0;v.options.onEndFlip(v.previous,v.current,x)}});if(l==="prev"){o.addClass("bb-flip-initial")}if(this.options.shadows&&!this.end){var n=(l==="next")?{transition:"opacity "+this.options.speed/2+"ms linear "+this.options.speed/2+"ms"}:{transition:"opacity "+this.options.speed/2+"ms linear",opacity:this.options.shadowSides},q=(l==="next")?{transition:"opacity "+this.options.speed/2+"ms linear"}:{transition:"opacity "+this.options.speed/2+"ms linear "+this.options.speed/2+"ms",opacity:this.options.shadowFlip},m=(l==="next")?{transition:"opacity "+this.options.speed/2+"ms linear "+this.options.speed/2+"ms",opacity:this.options.shadowFlip}:{transition:"opacity "+this.options.speed/2+"ms linear"},p=(l==="next")?{transition:"opacity "+this.options.speed/2+"ms linear",opacity:this.options.shadowSides}:{transition:"opacity "+this.options.speed/2+"ms linear "+this.options.speed/2+"ms"};t.css(q);w.css(m);r.css(n);s.css(p)}setTimeout(function(){o.addClass(v.end?"bb-flip-"+l+"-end":"bb-flip-"+l);if(v.options.shadows&&!v.end){t.css({opacity:l==="next"?v.options.shadowFlip:0});w.css({opacity:l==="next"?0:v.options.shadowFlip});r.css({opacity:l==="next"?v.options.shadowSides:0});s.css({opacity:l==="next"?0:v.options.shadowSides})}},25)},_addSide:function(l,k){var j;switch(l){case"left":j=f('
'+(k==="next"?this.$current.html():this.$nextItem.html())+'
').css("z-index",102);break;case"middle":j=f('
'+(k==="next"?this.$current.html():this.$nextItem.html())+'
'+(k==="next"?this.$nextItem.html():this.$current.html())+'
').css("z-index",103);break;case"right":j=f('
'+(k==="next"?this.$nextItem.html():this.$current.html())+'
').css("z-index",101);break}return j},_startSlideshow:function(){var j=this;this.slideshow=setTimeout(function(){j._navigate("next");if(j.options.autoplay){j._startSlideshow()}},this.options.interval)},_stopSlideshow:function(){if(this.options.autoplay){clearTimeout(this.slideshow);this.options.autoplay=false}},next:function(){this._action(this.options.direction==="ltr"?"next":"prev")},prev:function(){this._action(this.options.direction==="ltr"?"prev":"next")},jump:function(k){k-=1;if(k===this.current||k>=this.itemsCount||k<0){return false}var j;if(this.options.direction==="ltr"){j=k>this.current?"next":"prev"}else{j=k>this.current?"prev":"next"}this._action(j,k)},last:function(){this.jump(this.itemsCount)},first:function(){this.jump(1)},isActive:function(){return this.isAnimating},update:function(){var j=this.$items.eq(this.current);this.$items=this.$el.children(".bb-item");this.itemsCount=this.$items.length;this.current=j.index()},destroy:function(){if(this.options.autoplay){this._stopSlideshow()}this.$el.removeClass("bb-"+this.options.orientation);this.$items.show();if(this.options.nextEl!==""){f(this.options.nextEl).off(".bookblock")}if(this.options.prevEl!==""){f(this.options.prevEl).off(".bookblock")}c.off("debouncedresize")}};var h=function(j){if(g.console){g.console.error(j)}};f.fn.bookblock=function(k){if(typeof k==="string"){var j=Array.prototype.slice.call(arguments,1);this.each(function(){var l=f.data(this,"bookblock");if(!l){h("cannot call methods on bookblock prior to initialization; attempted to call method '"+k+"'");return}if(!f.isFunction(l[k])||k.charAt(0)==="_"){h("no such method '"+k+"' for bookblock instance");return}l[k].apply(l,j)})}else{this.each(function(){var l=f.data(this,"bookblock");if(l){l._init()}else{l=f.data(this,"bookblock",new f.BookBlock(k,this))}})}return this}})(jQuery,window); -------------------------------------------------------------------------------- /js/jquerypp.custom.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | var event = jQuery.event, 4 | 5 | //helper that finds handlers by type and calls back a function, this is basically handle 6 | // events - the events object 7 | // types - an array of event types to look for 8 | // callback(type, handlerFunc, selector) - a callback 9 | // selector - an optional selector to filter with, if there, matches by selector 10 | // if null, matches anything, otherwise, matches with no selector 11 | findHelper = function( events, types, callback, selector ) { 12 | var t, type, typeHandlers, all, h, handle, 13 | namespaces, namespace, 14 | match; 15 | for ( t = 0; t < types.length; t++ ) { 16 | type = types[t]; 17 | all = type.indexOf(".") < 0; 18 | if (!all ) { 19 | namespaces = type.split("."); 20 | type = namespaces.shift(); 21 | namespace = new RegExp("(^|\\.)" + namespaces.slice(0).sort().join("\\.(?:.*\\.)?") + "(\\.|$)"); 22 | } 23 | typeHandlers = (events[type] || []).slice(0); 24 | 25 | for ( h = 0; h < typeHandlers.length; h++ ) { 26 | handle = typeHandlers[h]; 27 | 28 | match = (all || namespace.test(handle.namespace)); 29 | 30 | if(match){ 31 | if(selector){ 32 | if (handle.selector === selector ) { 33 | callback(type, handle.origHandler || handle.handler); 34 | } 35 | } else if (selector === null){ 36 | callback(type, handle.origHandler || handle.handler, handle.selector); 37 | } 38 | else if (!handle.selector ) { 39 | callback(type, handle.origHandler || handle.handler); 40 | 41 | } 42 | } 43 | 44 | 45 | } 46 | } 47 | }; 48 | 49 | /** 50 | * Finds event handlers of a given type on an element. 51 | * @param {HTMLElement} el 52 | * @param {Array} types an array of event names 53 | * @param {String} [selector] optional selector 54 | * @return {Array} an array of event handlers 55 | */ 56 | event.find = function( el, types, selector ) { 57 | var events = ( $._data(el) || {} ).events, 58 | handlers = [], 59 | t, liver, live; 60 | 61 | if (!events ) { 62 | return handlers; 63 | } 64 | findHelper(events, types, function( type, handler ) { 65 | handlers.push(handler); 66 | }, selector); 67 | return handlers; 68 | }; 69 | /** 70 | * Finds all events. Group by selector. 71 | * @param {HTMLElement} el the element 72 | * @param {Array} types event types 73 | */ 74 | event.findBySelector = function( el, types ) { 75 | var events = $._data(el).events, 76 | selectors = {}, 77 | //adds a handler for a given selector and event 78 | add = function( selector, event, handler ) { 79 | var select = selectors[selector] || (selectors[selector] = {}), 80 | events = select[event] || (select[event] = []); 81 | events.push(handler); 82 | }; 83 | 84 | if (!events ) { 85 | return selectors; 86 | } 87 | //first check live: 88 | /*$.each(events.live || [], function( i, live ) { 89 | if ( $.inArray(live.origType, types) !== -1 ) { 90 | add(live.selector, live.origType, live.origHandler || live.handler); 91 | } 92 | });*/ 93 | //then check straight binds 94 | findHelper(events, types, function( type, handler, selector ) { 95 | add(selector || "", type, handler); 96 | }, null); 97 | 98 | return selectors; 99 | }; 100 | event.supportTouch = "ontouchend" in document; 101 | 102 | $.fn.respondsTo = function( events ) { 103 | if (!this.length ) { 104 | return false; 105 | } else { 106 | //add default ? 107 | return event.find(this[0], $.isArray(events) ? events : [events]).length > 0; 108 | } 109 | }; 110 | $.fn.triggerHandled = function( event, data ) { 111 | event = (typeof event == "string" ? $.Event(event) : event); 112 | this.trigger(event, data); 113 | return event.handled; 114 | }; 115 | /** 116 | * Only attaches one event handler for all types ... 117 | * @param {Array} types llist of types that will delegate here 118 | * @param {Object} startingEvent the first event to start listening to 119 | * @param {Object} onFirst a function to call 120 | */ 121 | event.setupHelper = function( types, startingEvent, onFirst ) { 122 | if (!onFirst ) { 123 | onFirst = startingEvent; 124 | startingEvent = null; 125 | } 126 | var add = function( handleObj ) { 127 | 128 | var bySelector, selector = handleObj.selector || ""; 129 | if ( selector ) { 130 | bySelector = event.find(this, types, selector); 131 | if (!bySelector.length ) { 132 | $(this).delegate(selector, startingEvent, onFirst); 133 | } 134 | } 135 | else { 136 | //var bySelector = event.find(this, types, selector); 137 | if (!event.find(this, types, selector).length ) { 138 | event.add(this, startingEvent, onFirst, { 139 | selector: selector, 140 | delegate: this 141 | }); 142 | } 143 | 144 | } 145 | 146 | }, 147 | remove = function( handleObj ) { 148 | var bySelector, selector = handleObj.selector || ""; 149 | if ( selector ) { 150 | bySelector = event.find(this, types, selector); 151 | if (!bySelector.length ) { 152 | $(this).undelegate(selector, startingEvent, onFirst); 153 | } 154 | } 155 | else { 156 | if (!event.find(this, types, selector).length ) { 157 | event.remove(this, startingEvent, onFirst, { 158 | selector: selector, 159 | delegate: this 160 | }); 161 | } 162 | } 163 | }; 164 | $.each(types, function() { 165 | event.special[this] = { 166 | add: add, 167 | remove: remove, 168 | setup: function() {}, 169 | teardown: function() {} 170 | }; 171 | }); 172 | }; 173 | })(jQuery); 174 | (function($){ 175 | var isPhantom = /Phantom/.test(navigator.userAgent), 176 | supportTouch = !isPhantom && "ontouchend" in document, 177 | scrollEvent = "touchmove scroll", 178 | // Use touch events or map it to mouse events 179 | touchStartEvent = supportTouch ? "touchstart" : "mousedown", 180 | touchStopEvent = supportTouch ? "touchend" : "mouseup", 181 | touchMoveEvent = supportTouch ? "touchmove" : "mousemove", 182 | data = function(event){ 183 | var d = event.originalEvent.touches ? 184 | event.originalEvent.touches[ 0 ] : 185 | event; 186 | return { 187 | time: (new Date).getTime(), 188 | coords: [ d.pageX, d.pageY ], 189 | origin: $( event.target ) 190 | }; 191 | }; 192 | 193 | /** 194 | * @add jQuery.event.swipe 195 | */ 196 | var swipe = $.event.swipe = { 197 | /** 198 | * @attribute delay 199 | * Delay is the upper limit of time the swipe motion can take in milliseconds. This defaults to 500. 200 | * 201 | * A user must perform the swipe motion in this much time. 202 | */ 203 | delay : 500, 204 | /** 205 | * @attribute max 206 | * The maximum distance the pointer must travel in pixels. The default is 75 pixels. 207 | */ 208 | max : 75, 209 | /** 210 | * @attribute min 211 | * The minimum distance the pointer must travel in pixels. The default is 30 pixels. 212 | */ 213 | min : 30 214 | }; 215 | 216 | $.event.setupHelper( [ 217 | 218 | /** 219 | * @hide 220 | * @attribute swipe 221 | */ 222 | "swipe", 223 | /** 224 | * @hide 225 | * @attribute swipeleft 226 | */ 227 | 'swipeleft', 228 | /** 229 | * @hide 230 | * @attribute swiperight 231 | */ 232 | 'swiperight', 233 | /** 234 | * @hide 235 | * @attribute swipeup 236 | */ 237 | 'swipeup', 238 | /** 239 | * @hide 240 | * @attribute swipedown 241 | */ 242 | 'swipedown'], touchStartEvent, function(ev){ 243 | var 244 | // update with data when the event was started 245 | start = data(ev), 246 | stop, 247 | delegate = ev.delegateTarget || ev.currentTarget, 248 | selector = ev.handleObj.selector, 249 | entered = this; 250 | 251 | function moveHandler(event){ 252 | if ( !start ) { 253 | return; 254 | } 255 | // update stop with the data from the current event 256 | stop = data(event); 257 | 258 | // prevent scrolling 259 | if ( Math.abs( start.coords[0] - stop.coords[0] ) > 10 ) { 260 | event.preventDefault(); 261 | } 262 | }; 263 | 264 | // Attach to the touch move events 265 | $(document.documentElement).bind(touchMoveEvent, moveHandler) 266 | .one(touchStopEvent, function(event){ 267 | $(this).unbind( touchMoveEvent, moveHandler); 268 | // if start and stop contain data figure out if we have a swipe event 269 | if ( start && stop ) { 270 | // calculate the distance between start and stop data 271 | var deltaX = Math.abs(start.coords[0] - stop.coords[0]), 272 | deltaY = Math.abs(start.coords[1] - stop.coords[1]), 273 | distance = Math.sqrt(deltaX*deltaX+deltaY*deltaY); 274 | 275 | // check if the delay and distance are matched 276 | if ( stop.time - start.time < swipe.delay && distance >= swipe.min ) { 277 | var events = ['swipe']; 278 | // check if we moved horizontally 279 | if( deltaX >= swipe.min && deltaY < swipe.min) { 280 | // based on the x coordinate check if we moved left or right 281 | events.push( start.coords[0] > stop.coords[0] ? "swipeleft" : "swiperight" ); 282 | } else 283 | // check if we moved vertically 284 | if(deltaY >= swipe.min && deltaX < swipe.min){ 285 | // based on the y coordinate check if we moved up or down 286 | events.push( start.coords[1] < stop.coords[1] ? "swipedown" : "swipeup" ); 287 | } 288 | 289 | // trigger swipe events on this guy 290 | $.each($.event.find(delegate, events, selector), function(){ 291 | this.call(entered, ev, {start : start, end: stop}) 292 | }) 293 | 294 | } 295 | } 296 | // reset start and stop 297 | start = stop = undefined; 298 | }) 299 | }); 300 | 301 | })(jQuery) -------------------------------------------------------------------------------- /js/modernizr.custom.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.6.2 (Custom Build) | MIT & BSD 2 | * Build: http://modernizr.com/download/#-csstransforms3d-csstransitions-shiv-cssclasses-prefixed-teststyles-testprop-testallprops-prefixes-domprefixes-load 3 | */ 4 | ;window.Modernizr=function(a,b,c){function z(a){j.cssText=a}function A(a,b){return z(m.join(a+";")+(b||""))}function B(a,b){return typeof a===b}function C(a,b){return!!~(""+a).indexOf(b)}function D(a,b){for(var d in a){var e=a[d];if(!C(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function E(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:B(f,"function")?f.bind(d||b):f}return!1}function F(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+o.join(d+" ")+d).split(" ");return B(b,"string")||B(b,"undefined")?D(e,b):(e=(a+" "+p.join(d+" ")+d).split(" "),E(e,b,c))}var d="2.6.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m=" -webkit- -moz- -o- -ms- ".split(" "),n="Webkit Moz O ms",o=n.split(" "),p=n.toLowerCase().split(" "),q={},r={},s={},t=[],u=t.slice,v,w=function(a,c,d,e){var f,i,j,k,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),l.appendChild(j);return f=["­",'"].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},x={}.hasOwnProperty,y;!B(x,"undefined")&&!B(x.call,"undefined")?y=function(a,b){return x.call(a,b)}:y=function(a,b){return b in a&&B(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=u.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(u.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(u.call(arguments)))};return e}),q.csstransforms3d=function(){var a=!!F("perspective");return a&&"webkitPerspective"in g.style&&w("@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}",function(b,c){a=b.offsetLeft===9&&b.offsetHeight===3}),a},q.csstransitions=function(){return F("transition")};for(var G in q)y(q,G)&&(v=G.toLowerCase(),e[v]=q[G](),t.push((e[v]?"":"no-")+v));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)y(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},z(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,e._prefixes=m,e._domPrefixes=p,e._cssomPrefixes=o,e.testProp=function(a){return D([a])},e.testAllProps=F,e.testStyles=w,e.prefixed=function(a,b,c){return b?F(a,b,c):F(a,"pfx")},g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+t.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f