├── .gitignore ├── README.md ├── css ├── demo.css ├── normalize.css ├── slideshow.css └── slideshow_layouts.css ├── favicon.ico ├── fonts └── nexa_boldfree_macroman │ ├── Nexa_Free_Bold-demo.html │ ├── Nexa_Free_Bold-webfont.eot │ ├── Nexa_Free_Bold-webfont.svg │ ├── Nexa_Free_Bold-webfont.ttf │ ├── Nexa_Free_Bold-webfont.woff │ ├── Nexa_Free_Bold-webfont.woff2 │ ├── specimen_files │ ├── easytabs.js │ ├── grid_12-825-55-15.css │ └── specimen_stylesheet.css │ └── stylesheet.css ├── img ├── 1.jpg ├── 10.jpg ├── 11.jpg ├── 12.jpg ├── 13.jpg ├── 14.jpg ├── 15.jpg ├── 16.jpg ├── 17.jpg ├── 18.jpg ├── 2.jpg ├── 3.jpg ├── 4.jpg ├── 5.jpg ├── 6.jpg ├── 7.jpg ├── 8.jpg ├── 9.jpg ├── related │ ├── ImageGridEffects.jpg │ └── PolaroidGrid.jpg └── small │ ├── 1.jpg │ ├── 10.jpg │ ├── 11.jpg │ ├── 12.jpg │ ├── 13.jpg │ ├── 14.jpg │ ├── 15.jpg │ ├── 16.jpg │ ├── 17.jpg │ ├── 18.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ ├── 6.jpg │ ├── 7.jpg │ ├── 8.jpg │ └── 9.jpg ├── index.html └── js ├── anime.min.js ├── imagesloaded.pkgd.min.js └── main.js /.gitignore: -------------------------------------------------------------------------------- 1 | *.DS_Store 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Multi-Layout Slideshow 2 | 3 | A simple decorative slideshow component with individual slide layouts and effects. 4 | 5 | ![Multi-Layout Slideshow](http://tympanus.net/codrops/wp-content/uploads/2016/07/MultiLayoutSlideshow_800x600.jpg) 6 | 7 | [Article on Codrops](http://tympanus.net/codrops/?p=27363) 8 | 9 | [Demo](http://tympanus.net/Development/MultiLayoutSlideshow/) 10 | 11 | ## License 12 | 13 | Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is". 14 | 15 | Read more here: [License](http://tympanus.net/codrops/licensing/) 16 | 17 | ## Credits 18 | 19 | - [Anime.js](http://anime-js.com/) by Julian Garnier 20 | - [imagesLoaded](http://imagesloaded.desandro.com/) by David DeSandro 21 | - Photography from [Unsplash.com](http://unsplash.com) 22 | 23 | ## Misc 24 | 25 | Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/pages/Codrops/159107397912), [Google+](https://plus.google.com/101095823814290637419), [GitHub](https://github.com/codrops), [Pinterest](http://www.pinterest.com/codrops/) 26 | 27 | [© Codrops 2016](http://www.codrops.com) 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /css/demo.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | -webkit-box-sizing: border-box; 5 | box-sizing: border-box; 6 | } 7 | 8 | body { 9 | font-family: 'Lucida Sans Typewriter', 'Lucida Console', monaco, 'Bitstream Vera Sans Mono', monospace; 10 | color: #5f6669; 11 | background: #1e2021; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | overflow-x: hidden; 15 | } 16 | 17 | a { 18 | text-decoration: none; 19 | color: #ffeb3b; 20 | outline: none; 21 | } 22 | 23 | a:hover, 24 | a:focus { 25 | color: #fff; 26 | } 27 | 28 | .hidden { 29 | position: absolute; 30 | overflow: hidden; 31 | width: 0; 32 | height: 0; 33 | pointer-events: none; 34 | } 35 | 36 | 37 | /* Icons */ 38 | 39 | .icon { 40 | display: block; 41 | width: 1.5em; 42 | height: 1.5em; 43 | margin: 0 auto; 44 | fill: currentColor; 45 | } 46 | 47 | 48 | /* Buttons */ 49 | 50 | .btn { 51 | display: inline-block; 52 | margin: 0; 53 | padding: 0; 54 | cursor: pointer; 55 | pointer-events: auto; 56 | color: #ffeb3b; 57 | border: none; 58 | background: none; 59 | } 60 | 61 | .btn:focus { 62 | outline: none; 63 | } 64 | 65 | .btn:hover { 66 | color: #fff; 67 | } 68 | 69 | .btn--arrow { 70 | font-size: 1.5em; 71 | display: block; 72 | } 73 | 74 | .btn--arrow:nth-child(2) { 75 | margin: 0 0 0 0.5em; 76 | } 77 | 78 | .btn--arrow .icon { 79 | height: 0.5em; 80 | } 81 | 82 | .btn--github { 83 | font-size: 1.25em; 84 | position: fixed; 85 | right: 0; 86 | bottom: 0; 87 | margin: 0 1.5em 1.25em 0; 88 | color: #fff; 89 | } 90 | 91 | .btn--github:hover, 92 | .btn--github:focus { 93 | color: #ffeb3b; 94 | } 95 | 96 | 97 | /* Codrops header */ 98 | 99 | .codrops-header { 100 | position: absolute; 101 | z-index: 100; 102 | top: 0; 103 | left: 0; 104 | display: -webkit-flex; 105 | display: -ms-flexbox; 106 | display: flex; 107 | -webkit-flex-direction: row; 108 | -ms-flex-direction: row; 109 | flex-direction: row; 110 | -webkit-flex-wrap: wrap; 111 | flex-wrap: wrap; 112 | -webkit-align-items: center; 113 | -ms-flex-align: center; 114 | align-items: center; 115 | width: 100%; 116 | padding: 0.8em 0.75em; 117 | } 118 | 119 | .codrops-header__title { 120 | font-size: 1em; 121 | font-weight: 500; 122 | margin: 0; 123 | padding: 0 0.75em; 124 | } 125 | 126 | .codrops-header__tagline { 127 | font-size: 0.85em; 128 | margin: 0 6em 0 auto; 129 | padding: 0 1em; 130 | color: #ffeb3b; 131 | } 132 | 133 | 134 | /* Top Navigation Style */ 135 | 136 | .codrops-links { 137 | position: relative; 138 | display: -webkit-flex; 139 | display: -ms-flexbox; 140 | display: flex; 141 | -webkit-justify-content: center; 142 | -ms-flex-pack: center; 143 | justify-content: center; 144 | text-align: center; 145 | white-space: nowrap; 146 | } 147 | 148 | .codrops-links::after { 149 | content: ''; 150 | position: absolute; 151 | top: 10%; 152 | left: 50%; 153 | width: 1px; 154 | height: 80%; 155 | opacity: 0.2; 156 | background: currentColor; 157 | -webkit-transform: rotate3d(0, 0, 1, 22.5deg); 158 | transform: rotate3d(0, 0, 1, 22.5deg); 159 | } 160 | 161 | .codrops-icon { 162 | display: inline-block; 163 | margin: 0.25em; 164 | padding: 0.25em; 165 | } 166 | 167 | .ie-message { 168 | font-weight: bold; 169 | display: none; 170 | margin: 1em; 171 | padding: 0.5em 1em; 172 | color: #fff; 173 | background: #d861a3; 174 | } 175 | 176 | 177 | /* Demo links */ 178 | 179 | .dummy-links { 180 | position: absolute; 181 | top: 0; 182 | left: 100%; 183 | width: 100vh; 184 | padding: 1.8em 2.25em; 185 | -webkit-transform: rotate3d(0, 0, 1, 90deg); 186 | transform: rotate3d(0, 0, 1, 90deg); 187 | -webkit-transform-origin: 0 0; 188 | transform-origin: 0 0; 189 | } 190 | 191 | .dummy-links__link { 192 | display: inline-block; 193 | margin: 0 1.5em 0 0; 194 | color: #fff; 195 | } 196 | 197 | .dummy-links__link:hover, 198 | .dummy-links__link:focus { 199 | color: #ffeb3b; 200 | } 201 | 202 | .dummy-links__link--current, 203 | .dummy-links__link--current:hover { 204 | color: #5f6669; 205 | } 206 | 207 | 208 | /* Slideshow nav (not part of plugin so we put the styles here) */ 209 | 210 | .slideshow__nav { 211 | position: absolute; 212 | pointer-events: none; 213 | } 214 | 215 | .no-js .slideshow__nav { 216 | display: none; 217 | } 218 | 219 | .slideshow__nav--arrows { 220 | font-size: 4em; 221 | right: 1.1em; 222 | bottom: 1.45em; 223 | } 224 | 225 | 226 | /* Content*/ 227 | 228 | .content { 229 | padding: 0 2em 8em; 230 | max-width: 1600px; 231 | margin: 0 auto; 232 | } 233 | 234 | .content p { 235 | margin: 0 0 1em; 236 | } 237 | 238 | .content--text p { 239 | font-size: 1.25em; 240 | line-height: 1.5; 241 | max-width: 600px; 242 | } 243 | 244 | 245 | /* Related demos */ 246 | 247 | .content--related { 248 | font-size: 0.85em; 249 | font-weight: bold; 250 | text-align: center; 251 | } 252 | 253 | .media-item { 254 | display: inline-block; 255 | padding: 1em; 256 | vertical-align: top; 257 | -webkit-transition: color 0.3s; 258 | transition: color 0.3s; 259 | } 260 | 261 | .media-item__img { 262 | max-width: 100%; 263 | opacity: 0.3; 264 | -webkit-transition: opacity 0.3s; 265 | transition: opacity 0.3s; 266 | } 267 | 268 | .media-item:hover .media-item__img, 269 | .media-item:focus .media-item__img { 270 | opacity: 1; 271 | } 272 | 273 | .media-item__title { 274 | font-size: 1em; 275 | margin: 0; 276 | padding: 0.5em; 277 | } 278 | 279 | @media screen and (max-width: 45em) { 280 | .codrops-header__title { 281 | font-size: 0.8em; 282 | } 283 | .codrops-header__tagline { 284 | display: none; 285 | } 286 | .dummy-links { 287 | font-size: 0.75em; 288 | position: relative; 289 | left: 0; 290 | width: auto; 291 | padding: 0.5em 1em 0; 292 | -webkit-transform: none; 293 | transform: none; 294 | } 295 | .content { 296 | font-size: 0.85em; 297 | } 298 | .slideshow__nav--arrows { 299 | font-size: 2em; 300 | right: auto; 301 | bottom: 1em; 302 | left: 0.5em; 303 | } 304 | .btn--github { 305 | margin: 0 0.25em 0.75em 0; 306 | } 307 | 308 | } 309 | -------------------------------------------------------------------------------- /css/normalize.css: -------------------------------------------------------------------------------- 1 | article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;} -------------------------------------------------------------------------------- /css/slideshow.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'nexa_boldregular'; 3 | font-weight: bold; 4 | font-style: normal; 5 | src: url('../fonts/nexa_boldfree_macroman/Nexa_Free_Bold-webfont.eot'); 6 | src: url('../fonts/nexa_boldfree_macroman/Nexa_Free_Bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/nexa_boldfree_macroman/Nexa_Free_Bold-webfont.woff2') format('woff2'), url('../fonts/nexa_boldfree_macroman/Nexa_Free_Bold-webfont.woff') format('woff'), url('../fonts/nexa_boldfree_macroman/Nexa_Free_Bold-webfont.ttf') format('truetype'), url('../fonts/nexa_boldfree_macroman/Nexa_Free_Bold-webfont.svg#nexa_boldregular') format('svg'); 7 | } 8 | 9 | .slideshow { 10 | position: relative; 11 | width: 100%; /* define width here */ 12 | max-width: 1600px; 13 | margin: 0 auto; 14 | } 15 | 16 | .slideshow:focus { 17 | outline: none; 18 | } 19 | 20 | .js .slideshow::after { 21 | content: ''; 22 | position: absolute; 23 | top: 50%; 24 | left: 50%; 25 | width: 70px; 26 | height: 70px; 27 | margin: -35px 0 0 -35px; 28 | pointer-events: none; 29 | border: 10px solid rgba(255, 255, 255, 0.1); 30 | border-top-color: #ffeb3b; 31 | border-radius: 50%; 32 | -webkit-transition: opacity 0.3s; 33 | transition: opacity 0.3s; 34 | -webkit-animation: rotateLoader 0.8s linear infinite forwards; 35 | animation: rotateLoader 0.8s linear infinite forwards; 36 | } 37 | 38 | @-webkit-keyframes rotateLoader { 39 | to { 40 | -webkit-transform: rotate3d(360deg); 41 | transform: rotate3d(360deg); 42 | } 43 | } 44 | 45 | @keyframes rotateLoader { 46 | to { 47 | -webkit-transform: rotate3d(0, 0, 1, 360deg); 48 | transform: rotate3d(0, 0, 1, 360deg); 49 | } 50 | } 51 | 52 | .js .slideshow--loaded::after { 53 | opacity: 0; 54 | } 55 | 56 | .js .slideshow { 57 | height: 100vh; /* define height here */ 58 | max-height: 1000px; 59 | pointer-events: none; 60 | } 61 | 62 | .slide { 63 | position: relative; 64 | width: 100%; 65 | margin: 0 0 1em 0; 66 | padding: 6em 5em; 67 | } 68 | 69 | .js .slide { 70 | position: absolute; 71 | top: 0; 72 | left: 0; 73 | height: 100%; 74 | margin: 0; 75 | pointer-events: none; 76 | opacity: 0; 77 | } 78 | 79 | .js .slide--current { 80 | pointer-events: auto; 81 | opacity: 1; 82 | } 83 | 84 | .slide-imgwrap { 85 | position: relative; 86 | width: calc(100% - 6em); 87 | height: 100%; 88 | margin: 0 auto; 89 | opacity: 0.5; 90 | } 91 | 92 | .no-js .slide-imgwrap { 93 | height: 400px; 94 | } 95 | 96 | .slide__img-inner { 97 | position: absolute; 98 | width: 100%; 99 | height: 100%; 100 | -webkit-transform: rotateZ(0deg); 101 | transform: rotateZ(0deg); 102 | -webkit-backface-visibility: hidden; 103 | backface-visibility: hidden; 104 | will-change: tranform, opacity; 105 | background-position: 50% 50%; 106 | background-size: cover; 107 | } 108 | 109 | .slide__title { 110 | position: absolute; 111 | bottom: 0; 112 | left: 0; 113 | width: calc(100% - 11em); 114 | max-width: 800px; 115 | padding: 2em; 116 | color: #e8e8e8; 117 | } 118 | 119 | .js .slide__title { 120 | pointer-events: none; 121 | opacity: 0; 122 | } 123 | 124 | .js .slide--current .slide__title { 125 | pointer-events: auto; 126 | opacity: 1; 127 | } 128 | 129 | .slide__title-main { 130 | font-family: 'nexa_boldregular', serif; 131 | font-size: 6em; 132 | line-height: 0.8; 133 | display: inline-block; 134 | margin: 0; 135 | } 136 | 137 | .slide__title-sub { 138 | font-size: 1.15em; 139 | line-height: 1.5; 140 | margin: 1em 0 0 0; 141 | } 142 | 143 | .slide__title-sub a { 144 | border-bottom: 1px solid; 145 | } 146 | 147 | 148 | /* Media query for smaller screens (general elements) */ 149 | 150 | @media screen and (max-width: 45em) { 151 | .slideshow { 152 | padding-top: 7em; 153 | } 154 | .js .slideshow { 155 | height: calc(100vh - 60px); 156 | } 157 | .slide { 158 | padding: 6em 0; 159 | } 160 | .no-js .slide { 161 | padding: 4em 0 0; 162 | } 163 | .slide-imgwrap { 164 | width: calc(100% - 1em); 165 | } 166 | .slide__title { 167 | width: calc(100% - 2em); 168 | margin: 0 0 4em 0; 169 | padding: 1.5em; 170 | } 171 | .slide__title-main { 172 | font-size: 2em; 173 | } 174 | .slide__title-sub { 175 | font-size: 0.75em; 176 | } 177 | } 178 | -------------------------------------------------------------------------------- /css/slideshow_layouts.css: -------------------------------------------------------------------------------- 1 | /* Individual layouts */ 2 | 3 | /* Layout 1: 3 grid images */ 4 | 5 | .slide--layout-1 .slide__img { 6 | position: absolute; 7 | width: calc(50% - 1em); 8 | } 9 | 10 | .slide--layout-1 .slide__img:first-child { 11 | left: 0.5em; 12 | height: 100%; 13 | } 14 | 15 | .slide--layout-1 .slide__img:nth-child(n+2) { 16 | left: calc(50% + 0.5em); 17 | height: calc(50% - 0.5em); 18 | } 19 | 20 | .slide--layout-1 .slide__img:nth-child(3) { 21 | top: calc(50% + 0.5em); 22 | } 23 | 24 | 25 | /* Layout 2: polaroid stack for 5 images */ 26 | 27 | .slide--layout-2 .slide__img { 28 | position: absolute; 29 | top: 50%; 30 | left: 50%; 31 | } 32 | 33 | .slide--layout-2 .slide__img:not(:last-child) { 34 | width: 300px; 35 | height: 300px; 36 | } 37 | 38 | .slide--layout-2 .slide__img:not(:last-child) .slide__img-inner { 39 | border: 5px solid #ffeb3b; 40 | } 41 | 42 | .slide--layout-2 .slide__img:first-child { 43 | -webkit-transform: translate3d(-50%,-50%,0) translate3d(-60%,-40%,0) rotate(-16deg); 44 | transform: translate3d(-50%,-50%,0) translate3d(-60%,-40%,0) rotate(-16deg); 45 | } 46 | 47 | .slide--layout-2 .slide__img:nth-child(2) { 48 | -webkit-transform: translate3d(-50%,-50%,0) translate3d(60%,-40%,0) rotate(10deg); 49 | transform: translate3d(-50%,-50%,0) translate3d(60%,-40%,0) rotate(10deg); 50 | } 51 | 52 | .slide--layout-2 .slide__img:nth-child(3) { 53 | -webkit-transform: translate3d(-50%,-50%,0) translate3d(60%,40%,0) rotate(-15deg); 54 | transform: translate3d(-50%,-50%,0) translate3d(60%,40%,0) rotate(-15deg); 55 | } 56 | 57 | .slide--layout-2 .slide__img:nth-child(4) { 58 | -webkit-transform: translate3d(-50%,-50%,0) translate3d(-60%,40%,0) rotate(10deg); 59 | transform: translate3d(-50%,-50%,0) translate3d(-60%,40%,0) rotate(10deg); 60 | } 61 | 62 | .slide--layout-2 .slide__img:last-child { 63 | -webkit-transform: translate3d(-50%,-50%,0); 64 | transform: translate3d(-50%,-50%,0); 65 | width: 450px; 66 | height: 400px; 67 | } 68 | 69 | .slide--layout-2 .slide__img:last-child .slide__img-inner { 70 | border: 10px solid #ffeb3b; 71 | border-bottom-width: 65px; 72 | } 73 | 74 | .slide__img-caption { 75 | font-family: 'Gochi Hand', cursive; 76 | position: absolute; 77 | width: 100%; 78 | top: 100%; 79 | text-align: center; 80 | margin: 0; 81 | padding: 1em; 82 | font-size: 1.25em; 83 | color: #25303b; 84 | font-weight: normal; 85 | } 86 | 87 | @media screen and (max-width: 45em) { 88 | .slide--layout-2 .slide__img:not(:last-child) { 89 | width: 100px; 90 | height: 100px; 91 | } 92 | .slide--layout-2 .slide__img:last-child .slide__img-inner { 93 | border-bottom-width: 40px; 94 | } 95 | .slide--layout-2 .slide__img:last-child { 96 | width: 160px; 97 | height: 160px; 98 | } 99 | .slide__img-caption { 100 | font-size: 0.75em; 101 | } 102 | } 103 | 104 | /* Layout 3: card stack with 7 images */ 105 | 106 | .slide--layout-3 .slide__img { 107 | position: absolute; 108 | width: 450px; 109 | height: 450px; 110 | top: 40%; 111 | left: 50%; 112 | -webkit-transform: translate3d(-50%,-50%,0) translate3d(-50%,0,0) rotate(-10deg); 113 | transform: translate3d(-50%,-50%,0) translate3d(-50%,0,0) rotate(-10deg); 114 | } 115 | 116 | @media screen and (max-width: 45em) { 117 | .slide--layout-3 .slide__img { 118 | width: 200px; 119 | height: 200px; 120 | } 121 | } 122 | 123 | 124 | .slide--layout-3 .slide__img-inner { 125 | -webkit-transform-origin: 50% 200%; 126 | transform-origin: 50% 200%; 127 | } 128 | 129 | /* Layout 4: asymmetrical with 4 images */ 130 | 131 | .slide--layout-4 .slide__img { 132 | position: absolute; 133 | } 134 | 135 | .slide--layout-4 .slide__img:nth-child(2) { 136 | top: 15%; 137 | left: 15%; 138 | width: 30%; 139 | height: 50%; 140 | } 141 | 142 | .slide--layout-4 .slide__img:first-child { 143 | top: 40%; 144 | left: 5%; 145 | width: 80%; 146 | height: 60%; 147 | } 148 | 149 | .slide--layout-4 .slide__img:nth-child(3) { 150 | top: 0; 151 | left: 40%; 152 | width: 40%; 153 | height: 60%; 154 | } 155 | 156 | .slide--layout-4 .slide__img:nth-child(4) { 157 | top: 50%; 158 | left: 75%; 159 | width: 22.5%; 160 | height: 42.5%; 161 | } 162 | 163 | 164 | /* Layout 5: grid with 20 images */ 165 | 166 | .slide--layout-5 .slide-imgwrap { 167 | display: -webkit-flex; 168 | display: -ms-flexbox; 169 | display: flex; 170 | -webkit-flex-wrap: wrap; 171 | -ms-flex-wrap: wrap; 172 | flex-wrap: wrap; 173 | -webkit-justify-content: center; 174 | -ms-flex-pack: center; 175 | justify-content: center; 176 | -webkit-align-content: center; 177 | -ms-flex-line-pack: center; 178 | align-content: center; 179 | padding: 8% 0; 180 | width: 80%; 181 | } 182 | 183 | .slide--layout-5 .slide__img { 184 | position: relative; 185 | width: calc((100% / 6) - 10px); 186 | padding-bottom: calc((100% / 6) - 10px); 187 | min-height: 150px; 188 | margin: 5px; 189 | } 190 | 191 | @media screen and (max-width: 45em) { 192 | .slide--layout-5 .slide__img { 193 | min-height: 50px; 194 | } 195 | } 196 | 197 | 198 | /* Layout 6: 3 round images */ 199 | 200 | .slide--layout-6 .slide__img { 201 | position: absolute; 202 | top: 50%; 203 | left: 50%; 204 | width: 45%; 205 | padding-bottom: 45%; 206 | -webkit-transform: translate3d(-50%,-50%,0); 207 | transform: translate3d(-50%,-50%,0); 208 | } 209 | 210 | .slide--layout-6 .slide__img-inner { 211 | border-radius: 50%; 212 | } 213 | 214 | .slide--layout-6 .slide__img:first-child { 215 | -webkit-transform: translate3d(0%,-40%,0) scale(0.6); 216 | transform: translate3d(0%,-40%,0) scale(0.6); 217 | } 218 | 219 | .slide--layout-6 .slide__img:nth-child(3) { 220 | -webkit-transform: translate3d(-100%,-60%,0) scale(0.75); 221 | transform: translate3d(-100%,-60%,0) scale(0.75); 222 | } 223 | 224 | /* Layout 7: 3 rhomboid images */ 225 | 226 | .slide--layout-7 .slide__img { 227 | position: absolute; 228 | top: 10%; 229 | width: 40%; 230 | height: 80%; 231 | } 232 | 233 | .slide--layout-7 .slide__img:nth-child(2) { 234 | left: 30%; 235 | } 236 | 237 | .slide--layout-7 .slide__img:nth-child(3) { 238 | left: 60%; 239 | } 240 | 241 | .slide--layout-7 .slide__img-inner { 242 | -webkit-clip-path: polygon(0% 100%, 30% 0%, 100% 0%, 70% 100%); 243 | clip-path: polygon(0% 100%, 30% 0%, 100% 0%, 70% 100%); 244 | -webkit-clip-path: url('#polygon-clip-rhomboid'); 245 | clip-path: url('../index.html#polygon-clip-rhomboid'); /* Firefox needs this path */ 246 | } -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MultiLayoutSlideshow/f5b3e94d8858a3128330213d26c71bbccba242da/favicon.ico -------------------------------------------------------------------------------- /fonts/nexa_boldfree_macroman/Nexa_Free_Bold-demo.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 17 | 18 | Nexa Bold Free Specimen 19 | 20 | 21 | 26 | 27 | 28 | 29 |
30 | 32 | 39 | 40 |
41 | 42 | 43 |
44 | 45 |
46 |
47 |
AaBb
48 |
49 |
50 | 51 |
52 |
A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;
53 |
54 |
55 |
56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 |
10abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
11abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
12abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
13abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
14abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
16abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
18abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
20abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
24abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
30abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
36abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
48abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
60abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
72abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
90abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
73 | 74 |
75 | 76 |
77 | 78 | 79 | 80 |
81 | 82 | 83 |
84 |
body
body
body
body
85 |
86 | bodyNexa Bold Free 87 |
88 |
89 | bodyArial 90 |
91 |
92 | bodyVerdana 93 |
94 |
95 | bodyGeorgia 96 |
97 | 98 | 99 | 100 |
101 | 102 | 103 |
104 | 105 |
106 |

10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

107 | 108 |
109 |
110 |

11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

111 | 112 |
113 |
114 |

12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

115 | 116 |
117 |
118 |

13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

119 | 120 |
121 |
122 | 123 |
124 |
125 |
126 |

14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

127 | 128 |
129 |
130 |

16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

131 | 132 |
133 |
134 |

18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

135 | 136 |
137 | 138 |
139 | 140 |
141 | 142 |
143 |
144 |

20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

145 |
146 |
147 |

24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

148 |
149 | 150 |
151 | 152 |
153 | 154 |
155 |
156 |

30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

157 |
158 |
159 | 160 |
161 | 162 | 163 | 164 |
165 |
166 |

10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

167 | 168 |
169 |
170 |

11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

171 | 172 |
173 |
174 |

12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

175 | 176 |
177 |
178 |

13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

179 | 180 |
181 |
182 | 183 |
184 | 185 |
186 |
187 |

14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

188 | 189 |
190 |
191 |

16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

192 | 193 |
194 |
195 |

18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

196 | 197 |
198 |
199 | 200 |
201 | 202 |
203 |
204 |

20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

205 |
206 |
207 |

24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

208 |
209 | 210 |
211 | 212 |
213 | 214 |
215 |
216 |

30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

217 |
218 |
219 | 220 |
221 | 222 | 223 | 224 | 225 |
226 | 227 |
228 | 229 |
230 | 231 |
232 |

Lorem Ipsum Dolor

233 |

Etiam porta sem malesuada magna mollis euismod

234 | 235 |

By Aenean Lacinia

236 |
237 |
238 |
239 |
240 |

Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

241 | 242 | 243 |

Pellentesque ornare sem

244 | 245 |

Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit.

246 | 247 |

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

248 | 249 |

Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.

250 | 251 |

Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.

252 | 253 |

Cras mattis consectetur

254 | 255 |

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum.

256 | 257 |

Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.

258 |
259 | 260 |
261 | 262 |
263 |

Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

264 |
265 | 266 |

Maecenas sed diam eget risus varius.

267 | 268 |

Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

269 | 270 | 271 | 272 |

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo.

273 | 274 |

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

275 | 276 |
277 |
278 | 279 |
280 | 281 | 282 | 283 | 284 | 285 | 286 |
287 |
288 |
289 | 290 |

Language Support

291 |

The subset of Nexa Bold Free in this kit supports the following languages:
292 | 293 | Albanian, Alsatian, Aragonese, Arapaho, Arrernte, Asturian, Aymara, Basque, Bislama, Breton, Cebuano, Chamorro, Cheyenne, Corsican, Danish, Demo, Dutch, English, Estonian, Faroese, Fijian, Finnish, French, French Creole (Saint Lucia), Frisian, Galician, Genoese, German, Gilbertese (Kiribati), Greenlandic, Haitian Creole, Hiligaynon, Hmong, Hopi, Ibanag, Iloko (Ilokano), Indonesian, Interglossa (Glosa), Interlingua, Irish (Gaelic), Islandic, Italian, Jèrriais, Latin Basic, Lojban, Lombard, Luxembourgian, Malagasy, Manx, Mohawk, Norfolk/Pitcairnese, Northern Sotho (Pedi), Norwegian, Occitan, Oromo, Pangasinan, Papiamento, Piedmontese, Portuguese, Potawatomi, Rhaeto-Romance, Romansh (Rumantsch), Rotokas, Sami (Lule), Samoan, Sardinian (Sardu), Scots (Gaelic), Seychellois Creole (Seselwa), Shona, Sicilian, Somali, Southern Ndebele, Southern Sotho (Sesotho), Spanish, Swahili, Swati/Swazi, Swedish, Tagalog (Filipino/Pilipino), Tetum (Tetun), Tok Pisin, Tswana, ubasic, Uyghur (Latinized), Volapük, Votic (Latinized), Walloon, Warlpiri, Xhosa, Yapese, Zulu

294 |

Glyph Chart

295 |

The subset of Nexa Bold Free in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.

296 |
297 | 298 |
299 |
300 | 301 | 302 |
303 |
304 | 305 | 306 |
307 | 308 |
309 | 310 |
311 |
312 |
313 |

Installing Webfonts

314 | 315 |

Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.

316 | 317 |

1. Upload your webfonts

318 |

You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

319 | 320 |

2. Include the webfont stylesheet

321 |

A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the Fontspring blog post about it. The code for it is as follows:

322 | 323 | 324 | 325 | @font-face{ 326 | font-family: 'MyWebFont'; 327 | src: url('WebFont.eot'); 328 | src: url('WebFont.eot?#iefix') format('embedded-opentype'), 329 | url('WebFont.woff') format('woff'), 330 | url('WebFont.ttf') format('truetype'), 331 | url('WebFont.svg#webfont') format('svg'); 332 | } 333 | 334 | 335 |

We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:

336 | <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /> 337 | 338 |

3. Modify your own stylesheet

339 |

To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:

340 | p { font-family: 'MyWebFont', Arial, sans-serif; } 341 | 342 |

4. Test

343 |

Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.

344 |
345 | 346 |
347 |
348 |

Troubleshooting
Font-Face Problems

349 |

Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.

350 | 351 |

Fonts not showing in any browser

352 | 353 |

This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.

354 | 355 |

Fonts not loading in iPhone or iPad

356 | 357 |

The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.

358 | 359 |

Fonts not loading in Firefox

360 | 361 |

The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)

362 | 363 |

Fonts not loading in IE

364 | 365 |

Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.

366 | 367 |

Fonts not loading in IE9

368 | 369 |

IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.

370 |
371 |
372 |
373 | 374 |
375 | 376 |
377 | 380 |
381 | 382 | 383 | -------------------------------------------------------------------------------- /fonts/nexa_boldfree_macroman/Nexa_Free_Bold-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MultiLayoutSlideshow/f5b3e94d8858a3128330213d26c71bbccba242da/fonts/nexa_boldfree_macroman/Nexa_Free_Bold-webfont.eot -------------------------------------------------------------------------------- /fonts/nexa_boldfree_macroman/Nexa_Free_Bold-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MultiLayoutSlideshow/f5b3e94d8858a3128330213d26c71bbccba242da/fonts/nexa_boldfree_macroman/Nexa_Free_Bold-webfont.ttf -------------------------------------------------------------------------------- /fonts/nexa_boldfree_macroman/Nexa_Free_Bold-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MultiLayoutSlideshow/f5b3e94d8858a3128330213d26c71bbccba242da/fonts/nexa_boldfree_macroman/Nexa_Free_Bold-webfont.woff -------------------------------------------------------------------------------- /fonts/nexa_boldfree_macroman/Nexa_Free_Bold-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MultiLayoutSlideshow/f5b3e94d8858a3128330213d26c71bbccba242da/fonts/nexa_boldfree_macroman/Nexa_Free_Bold-webfont.woff2 -------------------------------------------------------------------------------- /fonts/nexa_boldfree_macroman/specimen_files/easytabs.js: -------------------------------------------------------------------------------- 1 | (function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;} 2 | if(typeof param.defaultContent=="number") 3 | {var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;} 4 | $(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();} 5 | function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none") 6 | {$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}} 7 | $(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery); -------------------------------------------------------------------------------- /fonts/nexa_boldfree_macroman/specimen_files/grid_12-825-55-15.css: -------------------------------------------------------------------------------- 1 | /*Notes about grid: 2 | Columns: 12 3 | Grid Width: 825px 4 | Column Width: 55px 5 | Gutter Width: 15px 6 | -------------------------------*/ 7 | 8 | 9 | 10 | .section {margin-bottom: 18px; 11 | } 12 | .section:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} 13 | .section {*zoom: 1;} 14 | 15 | .section .firstcolumn, 16 | .section .firstcol {margin-left: 0;} 17 | 18 | 19 | /* Border on left hand side of a column. */ 20 | .border { 21 | padding-left: 7px; 22 | margin-left: 7px; 23 | border-left: 1px solid #eee; 24 | } 25 | 26 | /* Border with more whitespace, spans one column. */ 27 | .colborder { 28 | padding-left: 42px; 29 | margin-left: 42px; 30 | border-left: 1px solid #eee; 31 | } 32 | 33 | 34 | 35 | /* The Grid Classes */ 36 | .grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12 37 | {margin-left: 15px;float: left;display: inline; overflow: hidden;} 38 | 39 | 40 | .width1, .grid1, .span-1 {width: 55px;} 41 | .width1_2cols,.grid1_2cols {width: 20px;} 42 | .width1_3cols,.grid1_3cols {width: 8px;} 43 | .width1_4cols,.grid1_4cols {width: 2px;} 44 | .input_width1 {width: 49px;} 45 | 46 | .width2, .grid2, .span-2 {width: 125px;} 47 | .width2_3cols,.grid2_3cols {width: 31px;} 48 | .width2_4cols,.grid2_4cols {width: 20px;} 49 | .input_width2 {width: 119px;} 50 | 51 | .width3, .grid3, .span-3 {width: 195px;} 52 | .width3_2cols,.grid3_2cols {width: 90px;} 53 | .width3_4cols,.grid3_4cols {width: 37px;} 54 | .input_width3 {width: 189px;} 55 | 56 | .width4, .grid4, .span-4 {width: 265px;} 57 | .width4_3cols,.grid4_3cols {width: 78px;} 58 | .input_width4 {width: 259px;} 59 | 60 | .width5, .grid5, .span-5 {width: 335px;} 61 | .width5_2cols,.grid5_2cols {width: 160px;} 62 | .width5_3cols,.grid5_3cols {width: 101px;} 63 | .width5_4cols,.grid5_4cols {width: 72px;} 64 | .input_width5 {width: 329px;} 65 | 66 | .width6, .grid6, .span-6 {width: 405px;} 67 | .width6_4cols,.grid6_4cols {width: 90px;} 68 | .input_width6 {width: 399px;} 69 | 70 | .width7, .grid7, .span-7 {width: 475px;} 71 | .width7_2cols,.grid7_2cols {width: 230px;} 72 | .width7_3cols,.grid7_3cols {width: 148px;} 73 | .width7_4cols,.grid7_4cols {width: 107px;} 74 | .input_width7 {width: 469px;} 75 | 76 | .width8, .grid8, .span-8 {width: 545px;} 77 | .width8_3cols,.grid8_3cols {width: 171px;} 78 | .input_width8 {width: 539px;} 79 | 80 | .width9, .grid9, .span-9 {width: 615px;} 81 | .width9_2cols,.grid9_2cols {width: 300px;} 82 | .width9_4cols,.grid9_4cols {width: 142px;} 83 | .input_width9 {width: 609px;} 84 | 85 | .width10, .grid10, .span-10 {width: 685px;} 86 | .width10_3cols,.grid10_3cols {width: 218px;} 87 | .width10_4cols,.grid10_4cols {width: 160px;} 88 | .input_width10 {width: 679px;} 89 | 90 | .width11, .grid11, .span-11 {width: 755px;} 91 | .width11_2cols,.grid11_2cols {width: 370px;} 92 | .width11_3cols,.grid11_3cols {width: 241px;} 93 | .width11_4cols,.grid11_4cols {width: 177px;} 94 | .input_width11 {width: 749px;} 95 | 96 | .width12, .grid12, .span-12 {width: 825px;} 97 | .input_width12 {width: 819px;} 98 | 99 | /* Subdivided grid spaces */ 100 | .emptycols_left1, .prepend-1 {padding-left: 70px;} 101 | .emptycols_right1, .append-1 {padding-right: 70px;} 102 | .emptycols_left2, .prepend-2 {padding-left: 140px;} 103 | .emptycols_right2, .append-2 {padding-right: 140px;} 104 | .emptycols_left3, .prepend-3 {padding-left: 210px;} 105 | .emptycols_right3, .append-3 {padding-right: 210px;} 106 | .emptycols_left4, .prepend-4 {padding-left: 280px;} 107 | .emptycols_right4, .append-4 {padding-right: 280px;} 108 | .emptycols_left5, .prepend-5 {padding-left: 350px;} 109 | .emptycols_right5, .append-5 {padding-right: 350px;} 110 | .emptycols_left6, .prepend-6 {padding-left: 420px;} 111 | .emptycols_right6, .append-6 {padding-right: 420px;} 112 | .emptycols_left7, .prepend-7 {padding-left: 490px;} 113 | .emptycols_right7, .append-7 {padding-right: 490px;} 114 | .emptycols_left8, .prepend-8 {padding-left: 560px;} 115 | .emptycols_right8, .append-8 {padding-right: 560px;} 116 | .emptycols_left9, .prepend-9 {padding-left: 630px;} 117 | .emptycols_right9, .append-9 {padding-right: 630px;} 118 | .emptycols_left10, .prepend-10 {padding-left: 700px;} 119 | .emptycols_right10, .append-10 {padding-right: 700px;} 120 | .emptycols_left11, .prepend-11 {padding-left: 770px;} 121 | .emptycols_right11, .append-11 {padding-right: 770px;} 122 | .pull-1 {margin-left: -70px;} 123 | .push-1 {margin-right: -70px;margin-left: 18px;float: right;} 124 | .pull-2 {margin-left: -140px;} 125 | .push-2 {margin-right: -140px;margin-left: 18px;float: right;} 126 | .pull-3 {margin-left: -210px;} 127 | .push-3 {margin-right: -210px;margin-left: 18px;float: right;} 128 | .pull-4 {margin-left: -280px;} 129 | .push-4 {margin-right: -280px;margin-left: 18px;float: right;} -------------------------------------------------------------------------------- /fonts/nexa_boldfree_macroman/specimen_files/specimen_stylesheet.css: -------------------------------------------------------------------------------- 1 | @import url('grid_12-825-55-15.css'); 2 | 3 | /* 4 | CSS Reset by Eric Meyer - Released under Public Domain 5 | http://meyerweb.com/eric/tools/css/reset/ 6 | */ 7 | html, body, div, span, applet, object, iframe, 8 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 9 | a, abbr, acronym, address, big, cite, code, 10 | del, dfn, em, font, img, ins, kbd, q, s, samp, 11 | small, strike, strong, sub, sup, tt, var, 12 | b, u, i, center, dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, table, 14 | caption, tbody, tfoot, thead, tr, th, td 15 | {margin: 0;padding: 0;border: 0;outline: 0; 16 | font-size: 100%;vertical-align: baseline; 17 | background: transparent;} 18 | body {line-height: 1;} 19 | ol, ul {list-style: none;} 20 | blockquote, q {quotes: none;} 21 | blockquote:before, blockquote:after, 22 | q:before, q:after {content: ''; content: none;} 23 | :focus {outline: 0;} 24 | ins {text-decoration: none;} 25 | del {text-decoration: line-through;} 26 | table {border-collapse: collapse;border-spacing: 0;} 27 | 28 | 29 | 30 | 31 | body { 32 | color: #000; 33 | background-color: #dcdcdc; 34 | } 35 | 36 | a { 37 | text-decoration: none; 38 | color: #1883ba; 39 | } 40 | 41 | h1{ 42 | font-size: 32px; 43 | font-weight: normal; 44 | font-style: normal; 45 | margin-bottom: 18px; 46 | } 47 | 48 | h2{ 49 | font-size: 18px; 50 | } 51 | 52 | #container { 53 | width: 865px; 54 | margin: 0px auto; 55 | } 56 | 57 | 58 | #header { 59 | padding: 20px; 60 | font-size: 36px; 61 | background-color: #000; 62 | color: #fff; 63 | } 64 | 65 | #header span { 66 | color: #666; 67 | } 68 | #main_content { 69 | background-color: #fff; 70 | padding: 60px 20px 20px; 71 | } 72 | 73 | 74 | #footer p { 75 | margin: 0; 76 | padding-top: 10px; 77 | padding-bottom: 50px; 78 | color: #333; 79 | font: 10px Arial, sans-serif; 80 | } 81 | 82 | .tabs { 83 | width: 100%; 84 | height: 31px; 85 | background-color: #444; 86 | } 87 | .tabs li { 88 | float: left; 89 | margin: 0; 90 | overflow: hidden; 91 | background-color: #444; 92 | } 93 | .tabs li a { 94 | display: block; 95 | color: #fff; 96 | text-decoration: none; 97 | font: bold 11px/11px 'Arial'; 98 | text-transform: uppercase; 99 | padding: 10px 15px; 100 | border-right: 1px solid #fff; 101 | } 102 | 103 | .tabs li a:hover { 104 | background-color: #00b3ff; 105 | 106 | } 107 | 108 | .tabs li.active a { 109 | color: #000; 110 | background-color: #fff; 111 | } 112 | 113 | 114 | 115 | div.huge { 116 | 117 | font-size: 300px; 118 | line-height: 1em; 119 | padding: 0; 120 | letter-spacing: -.02em; 121 | overflow: hidden; 122 | } 123 | div.glyph_range { 124 | font-size: 72px; 125 | line-height: 1.1em; 126 | } 127 | 128 | .size10{ font-size: 10px; } 129 | .size11{ font-size: 11px; } 130 | .size12{ font-size: 12px; } 131 | .size13{ font-size: 13px; } 132 | .size14{ font-size: 14px; } 133 | .size16{ font-size: 16px; } 134 | .size18{ font-size: 18px; } 135 | .size20{ font-size: 20px; } 136 | .size24{ font-size: 24px; } 137 | .size30{ font-size: 30px; } 138 | .size36{ font-size: 36px; } 139 | .size48{ font-size: 48px; } 140 | .size60{ font-size: 60px; } 141 | .size72{ font-size: 72px; } 142 | .size90{ font-size: 90px; } 143 | 144 | 145 | .psample_row1 { height: 120px;} 146 | .psample_row1 { height: 120px;} 147 | .psample_row2 { height: 160px;} 148 | .psample_row3 { height: 160px;} 149 | .psample_row4 { height: 160px;} 150 | 151 | .psample { 152 | overflow: hidden; 153 | position: relative; 154 | } 155 | .psample p { 156 | line-height: 1.3em; 157 | display: block; 158 | overflow: hidden; 159 | margin: 0; 160 | } 161 | 162 | .psample span { 163 | margin-right: .5em; 164 | } 165 | 166 | .white_blend { 167 | width: 100%; 168 | height: 61px; 169 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==); 170 | position: absolute; 171 | bottom: 0; 172 | } 173 | .black_blend { 174 | width: 100%; 175 | height: 61px; 176 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC); 177 | position: absolute; 178 | bottom: 0; 179 | } 180 | .fullreverse { 181 | background: #000 !important; 182 | color: #fff !important; 183 | margin-left: -20px; 184 | padding-left: 20px; 185 | margin-right: -20px; 186 | padding-right: 20px; 187 | padding: 20px; 188 | margin-bottom:0; 189 | } 190 | 191 | 192 | .sample_table td { 193 | padding-top: 3px; 194 | padding-bottom:5px; 195 | padding-left: 5px; 196 | vertical-align: middle; 197 | line-height: 1.2em; 198 | } 199 | 200 | .sample_table td:first-child { 201 | background-color: #eee; 202 | text-align: right; 203 | padding-right: 5px; 204 | padding-left: 0; 205 | padding: 5px; 206 | font: 11px/12px "Courier New", Courier, mono; 207 | } 208 | 209 | code { 210 | white-space: pre; 211 | background-color: #eee; 212 | display: block; 213 | padding: 10px; 214 | margin-bottom: 18px; 215 | overflow: auto; 216 | } 217 | 218 | 219 | .bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;} 220 | 221 | .box { 222 | padding: 18px; 223 | margin-bottom: 18px; 224 | background: #eee; 225 | } 226 | 227 | .reverse,.reversed { background: #000 !important;color: #fff !important; border: none !important;} 228 | 229 | #bodycomparison { 230 | position: relative; 231 | overflow: hidden; 232 | font-size: 72px; 233 | height: 90px; 234 | white-space: nowrap; 235 | } 236 | 237 | #bodycomparison div{ 238 | font-size: 72px; 239 | line-height: 90px; 240 | display: inline; 241 | margin: 0 15px 0 0; 242 | padding: 0; 243 | } 244 | 245 | #bodycomparison div span{ 246 | font: 10px Arial; 247 | position: absolute; 248 | left: 0; 249 | } 250 | #xheight { 251 | float: none; 252 | position: absolute; 253 | color: #d9f3ff; 254 | font-size: 72px; 255 | line-height: 90px; 256 | } 257 | 258 | .fontbody { 259 | position: relative; 260 | } 261 | .arialbody{ 262 | font-family: Arial; 263 | position: relative; 264 | } 265 | .verdanabody{ 266 | font-family: Verdana; 267 | position: relative; 268 | } 269 | .georgiabody{ 270 | font-family: Georgia; 271 | position: relative; 272 | } 273 | 274 | /* @group Layout page 275 | */ 276 | 277 | #layout h1 { 278 | font-size: 36px; 279 | line-height: 42px; 280 | font-weight: normal; 281 | font-style: normal; 282 | } 283 | 284 | #layout h2 { 285 | font-size: 24px; 286 | line-height: 23px; 287 | font-weight: normal; 288 | font-style: normal; 289 | } 290 | 291 | #layout h3 { 292 | font-size: 22px; 293 | line-height: 1.4em; 294 | margin-top: 1em; 295 | font-weight: normal; 296 | font-style: normal; 297 | } 298 | 299 | 300 | #layout p.byline { 301 | font-size: 12px; 302 | margin-top: 18px; 303 | line-height: 12px; 304 | margin-bottom: 0; 305 | } 306 | #layout p { 307 | font-size: 14px; 308 | line-height: 21px; 309 | margin-bottom: .5em; 310 | } 311 | 312 | #layout p.large{ 313 | font-size: 18px; 314 | line-height: 26px; 315 | } 316 | 317 | #layout .sidebar p{ 318 | font-size: 12px; 319 | line-height: 1.4em; 320 | } 321 | 322 | #layout p.caption { 323 | font-size: 10px; 324 | margin-top: -16px; 325 | margin-bottom: 18px; 326 | } 327 | 328 | /* @end */ 329 | 330 | /* @group Glyphs */ 331 | 332 | #glyph_chart div{ 333 | background-color: #d9f3ff; 334 | color: black; 335 | float: left; 336 | font-size: 36px; 337 | height: 1.2em; 338 | line-height: 1.2em; 339 | margin-bottom: 1px; 340 | margin-right: 1px; 341 | text-align: center; 342 | width: 1.2em; 343 | position: relative; 344 | padding: .6em .2em .2em; 345 | } 346 | 347 | #glyph_chart div p { 348 | position: absolute; 349 | left: 0; 350 | top: 0; 351 | display: block; 352 | text-align: center; 353 | font: bold 9px Arial, sans-serif; 354 | background-color: #3a768f; 355 | width: 100%; 356 | color: #fff; 357 | padding: 2px 0; 358 | } 359 | 360 | 361 | #glyphs h1 { 362 | font-family: Arial, sans-serif; 363 | } 364 | /* @end */ 365 | 366 | /* @group Installing */ 367 | 368 | #installing { 369 | font: 13px Arial, sans-serif; 370 | } 371 | 372 | #installing p, 373 | #glyphs p{ 374 | line-height: 1.2em; 375 | margin-bottom: 18px; 376 | font: 13px Arial, sans-serif; 377 | } 378 | 379 | 380 | 381 | #installing h3{ 382 | font-size: 15px; 383 | margin-top: 18px; 384 | } 385 | 386 | /* @end */ 387 | 388 | #rendering h1 { 389 | font-family: Arial, sans-serif; 390 | } 391 | .render_table td { 392 | font: 11px "Courier New", Courier, mono; 393 | vertical-align: middle; 394 | } 395 | 396 | 397 | -------------------------------------------------------------------------------- /fonts/nexa_boldfree_macroman/stylesheet.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Web Fonts from fontspring.com 3 | * 4 | * All OpenType features and all extended glyphs have been removed. 5 | * Fully installable fonts can be purchased at http://www.fontspring.com 6 | * 7 | * The fonts included in this stylesheet are subject to the End User License you purchased 8 | * from Fontspring. The fonts are protected under domestic and international trademark and 9 | * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or 10 | * distributing this font software. 11 | * 12 | * (c) 2010-2016 Fontspring 13 | * 14 | * 15 | * 16 | * 17 | * The fonts included are copyrighted by the vendor listed below. 18 | * 19 | * Vendor: Fontfabric 20 | * License URL: https://www.fontspring.com/licenses/fontfabric/webfont 21 | * 22 | * 23 | */ 24 | 25 | @font-face { 26 | font-family: 'nexa_boldregular'; 27 | src: url('Nexa_Free_Bold-webfont.eot'); 28 | src: url('Nexa_Free_Bold-webfont.eot?#iefix') format('embedded-opentype'), 29 | url('Nexa_Free_Bold-webfont.woff2') format('woff2'), 30 | url('Nexa_Free_Bold-webfont.woff') format('woff'), 31 | url('Nexa_Free_Bold-webfont.ttf') format('truetype'), 32 | url('Nexa_Free_Bold-webfont.svg#nexa_boldregular') format('svg'); 33 | font-weight: normal; 34 | font-style: normal; 35 | 36 | } 37 | 38 | -------------------------------------------------------------------------------- /img/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MultiLayoutSlideshow/f5b3e94d8858a3128330213d26c71bbccba242da/img/1.jpg -------------------------------------------------------------------------------- /img/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MultiLayoutSlideshow/f5b3e94d8858a3128330213d26c71bbccba242da/img/10.jpg -------------------------------------------------------------------------------- /img/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MultiLayoutSlideshow/f5b3e94d8858a3128330213d26c71bbccba242da/img/11.jpg -------------------------------------------------------------------------------- /img/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MultiLayoutSlideshow/f5b3e94d8858a3128330213d26c71bbccba242da/img/12.jpg -------------------------------------------------------------------------------- /img/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MultiLayoutSlideshow/f5b3e94d8858a3128330213d26c71bbccba242da/img/13.jpg -------------------------------------------------------------------------------- /img/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MultiLayoutSlideshow/f5b3e94d8858a3128330213d26c71bbccba242da/img/14.jpg -------------------------------------------------------------------------------- /img/15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MultiLayoutSlideshow/f5b3e94d8858a3128330213d26c71bbccba242da/img/15.jpg -------------------------------------------------------------------------------- /img/16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MultiLayoutSlideshow/f5b3e94d8858a3128330213d26c71bbccba242da/img/16.jpg -------------------------------------------------------------------------------- /img/17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MultiLayoutSlideshow/f5b3e94d8858a3128330213d26c71bbccba242da/img/17.jpg -------------------------------------------------------------------------------- /img/18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MultiLayoutSlideshow/f5b3e94d8858a3128330213d26c71bbccba242da/img/18.jpg -------------------------------------------------------------------------------- /img/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MultiLayoutSlideshow/f5b3e94d8858a3128330213d26c71bbccba242da/img/2.jpg -------------------------------------------------------------------------------- /img/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MultiLayoutSlideshow/f5b3e94d8858a3128330213d26c71bbccba242da/img/3.jpg -------------------------------------------------------------------------------- /img/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MultiLayoutSlideshow/f5b3e94d8858a3128330213d26c71bbccba242da/img/4.jpg -------------------------------------------------------------------------------- /img/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MultiLayoutSlideshow/f5b3e94d8858a3128330213d26c71bbccba242da/img/5.jpg -------------------------------------------------------------------------------- /img/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MultiLayoutSlideshow/f5b3e94d8858a3128330213d26c71bbccba242da/img/6.jpg -------------------------------------------------------------------------------- /img/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MultiLayoutSlideshow/f5b3e94d8858a3128330213d26c71bbccba242da/img/7.jpg -------------------------------------------------------------------------------- /img/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MultiLayoutSlideshow/f5b3e94d8858a3128330213d26c71bbccba242da/img/8.jpg -------------------------------------------------------------------------------- /img/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MultiLayoutSlideshow/f5b3e94d8858a3128330213d26c71bbccba242da/img/9.jpg -------------------------------------------------------------------------------- /img/related/ImageGridEffects.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MultiLayoutSlideshow/f5b3e94d8858a3128330213d26c71bbccba242da/img/related/ImageGridEffects.jpg -------------------------------------------------------------------------------- /img/related/PolaroidGrid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MultiLayoutSlideshow/f5b3e94d8858a3128330213d26c71bbccba242da/img/related/PolaroidGrid.jpg -------------------------------------------------------------------------------- /img/small/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MultiLayoutSlideshow/f5b3e94d8858a3128330213d26c71bbccba242da/img/small/1.jpg -------------------------------------------------------------------------------- /img/small/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MultiLayoutSlideshow/f5b3e94d8858a3128330213d26c71bbccba242da/img/small/10.jpg -------------------------------------------------------------------------------- /img/small/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MultiLayoutSlideshow/f5b3e94d8858a3128330213d26c71bbccba242da/img/small/11.jpg -------------------------------------------------------------------------------- /img/small/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MultiLayoutSlideshow/f5b3e94d8858a3128330213d26c71bbccba242da/img/small/12.jpg -------------------------------------------------------------------------------- /img/small/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MultiLayoutSlideshow/f5b3e94d8858a3128330213d26c71bbccba242da/img/small/13.jpg -------------------------------------------------------------------------------- /img/small/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MultiLayoutSlideshow/f5b3e94d8858a3128330213d26c71bbccba242da/img/small/14.jpg -------------------------------------------------------------------------------- /img/small/15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MultiLayoutSlideshow/f5b3e94d8858a3128330213d26c71bbccba242da/img/small/15.jpg -------------------------------------------------------------------------------- /img/small/16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MultiLayoutSlideshow/f5b3e94d8858a3128330213d26c71bbccba242da/img/small/16.jpg -------------------------------------------------------------------------------- /img/small/17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MultiLayoutSlideshow/f5b3e94d8858a3128330213d26c71bbccba242da/img/small/17.jpg -------------------------------------------------------------------------------- /img/small/18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MultiLayoutSlideshow/f5b3e94d8858a3128330213d26c71bbccba242da/img/small/18.jpg -------------------------------------------------------------------------------- /img/small/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MultiLayoutSlideshow/f5b3e94d8858a3128330213d26c71bbccba242da/img/small/2.jpg -------------------------------------------------------------------------------- /img/small/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MultiLayoutSlideshow/f5b3e94d8858a3128330213d26c71bbccba242da/img/small/3.jpg -------------------------------------------------------------------------------- /img/small/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MultiLayoutSlideshow/f5b3e94d8858a3128330213d26c71bbccba242da/img/small/4.jpg -------------------------------------------------------------------------------- /img/small/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MultiLayoutSlideshow/f5b3e94d8858a3128330213d26c71bbccba242da/img/small/5.jpg -------------------------------------------------------------------------------- /img/small/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MultiLayoutSlideshow/f5b3e94d8858a3128330213d26c71bbccba242da/img/small/6.jpg -------------------------------------------------------------------------------- /img/small/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MultiLayoutSlideshow/f5b3e94d8858a3128330213d26c71bbccba242da/img/small/7.jpg -------------------------------------------------------------------------------- /img/small/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MultiLayoutSlideshow/f5b3e94d8858a3128330213d26c71bbccba242da/img/small/8.jpg -------------------------------------------------------------------------------- /img/small/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/MultiLayoutSlideshow/f5b3e94d8858a3128330213d26c71bbccba242da/img/small/9.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Multi-Layout Slideshow | Demo 1 | Codrops 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 23 | 24 | 25 | 26 | 54 |
55 |
56 |
57 | 58 | 59 |
60 |

Multi-Layout Slideshow

61 |

A decorative slideshow with a different layout for each slide

62 |

Please note that your browser does not support the CSS clip-path property.

63 | 68 | 69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |

Now or Never

79 |

Our battered suitcases were piled on the sidewalk again; we had longer ways to go. But no matter, the road is life. Read more

80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |

Today is someday

89 |
90 |
91 |

Crazy Breed

92 |

There's those thinking more or less less is more. But if less is more how you're keeping score?

93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |

Safe Harbor

107 |

Twenty years from now you will be more disappointed by the things you didn’t do than by the ones you did do.

108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |

Our Freedom

119 |

For to be free is not merely to cast off one's chains, but to live in a way that respects and enhances the freedom of others.

120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |

Stopping Time

145 |

Emancipate yourselves from mental slavery, none but ourselves can free our minds.

146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |

Walk the Walk

156 |

The trouble with being in the rat race is that even if you win, you're still a rat.

157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |

Caged Birds

167 |

They told me to grow roots, instead I grew wings. Birds born in a cage think flying is an illness.

168 |
169 |
170 | 174 |
175 |
176 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 177 | tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 178 | quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 179 | consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 180 | cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 181 | proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

182 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 183 | tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 184 | quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 185 | consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 186 | cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 187 | proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

188 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 189 | tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 190 | quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 191 | consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 192 | cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 193 | proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

194 |
195 | 196 |
197 |

If you enjoyed this demo you might also like:

198 | 199 | 200 |

Image Grid Effects

201 | 202 | 203 | 204 |

Polaroid Grid Animation

205 | 206 |
207 |
208 | 209 | 210 | 211 | 224 | 225 | 226 | -------------------------------------------------------------------------------- /js/anime.min.js: -------------------------------------------------------------------------------- 1 | (function(t,q){"function"===typeof define&&define.amd?define([],q):"object"===typeof module&&module.exports?module.exports=q():t.anime=q()})(this,function(){var t={duration:1E3,delay:0,loop:!1,autoplay:!0,direction:"normal",easing:"easeOutElastic",elasticity:400,round:!1,begin:void 0,update:void 0,complete:void 0},q="translateX translateY translateZ rotate rotateX rotateY rotateZ scale scaleX scaleY scaleZ skewX skewY".split(" "),x,f=function(){return{array:function(a){return Array.isArray(a)},object:function(a){return-1< 2 | Object.prototype.toString.call(a).indexOf("Object")},svg:function(a){return a instanceof SVGElement},dom:function(a){return a.nodeType||f.svg(a)},number:function(a){return!isNaN(parseInt(a))},string:function(a){return"string"===typeof a},func:function(a){return"function"===typeof a},undef:function(a){return"undefined"===typeof a},"null":function(a){return"null"===typeof a},hex:function(a){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(a)},rgb:function(a){return/^rgb/.test(a)},rgba:function(a){return/^rgba/.test(a)}, 3 | hsl:function(a){return/^hsl/.test(a)},color:function(a){return f.hex(a)||f.rgb(a)||f.rgba(a)||f.hsl(a)}}}(),C=function(){var a={},b={Sine:function(a){return 1-Math.cos(a*Math.PI/2)},Circ:function(a){return 1-Math.sqrt(1-a*a)},Elastic:function(a,b){if(0===a||1===a)return a;var d=1-Math.min(b,998)/1E3,g=a/1-1;return-(Math.pow(2,10*g)*Math.sin(2*(g-d/(2*Math.PI)*Math.asin(1))*Math.PI/d))},Back:function(a){return a*a*(3*a-2)},Bounce:function(a){for(var b,d=4;a<((b=Math.pow(2,--d))-1)/11;);return 1/Math.pow(4, 4 | 3-d)-7.5625*Math.pow((3*b-2)/22-a,2)}};["Quad","Cubic","Quart","Quint","Expo"].forEach(function(a,e){b[a]=function(a){return Math.pow(a,e+2)}});Object.keys(b).forEach(function(c){var e=b[c];a["easeIn"+c]=e;a["easeOut"+c]=function(a,b){return 1-e(1-a,b)};a["easeInOut"+c]=function(a,b){return.5>a?e(2*a,b)/2:1-e(-2*a+2,b)/2}});a.linear=function(a){return a};return a}(),y=function(a){return f.string(a)?a:a+""},D=function(a){return a.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()},E=function(a){if(f.color(a))return!1; 5 | try{return document.querySelectorAll(a)}catch(b){return!1}},z=function(a){return a.reduce(function(a,c){return a.concat(f.array(c)?z(c):c)},[])},r=function(a){if(f.array(a))return a;f.string(a)&&(a=E(a)||a);return a instanceof NodeList||a instanceof HTMLCollection?[].slice.call(a):[a]},F=function(a,b){return a.some(function(a){return a===b})},R=function(a,b){var c={};a.forEach(function(a){var d=JSON.stringify(b.map(function(b){return a[b]}));c[d]=c[d]||[];c[d].push(a)});return Object.keys(c).map(function(a){return c[a]})}, 6 | G=function(a){return a.filter(function(a,c,e){return e.indexOf(a)===c})},A=function(a){var b={},c;for(c in a)b[c]=a[c];return b},u=function(a,b){for(var c in b)a[c]=f.undef(a[c])?b[c]:a[c];return a},S=function(a){a=a.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,function(a,b,c,H){return b+b+c+c+H+H});var b=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(a);a=parseInt(b[1],16);var c=parseInt(b[2],16),b=parseInt(b[3],16);return"rgb("+a+","+c+","+b+")"},T=function(a){a=/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(a); 7 | var b=parseInt(a[1])/360,c=parseInt(a[2])/100,e=parseInt(a[3])/100;a=function(a,b,c){0>c&&(c+=1);1c?b:c<2/3?a+(b-a)*(2/3-c)*6:a};if(0==c)c=e=b=e;else var d=.5>e?e*(1+c):e+c-e*c,g=2*e-d,c=a(g,d,b+1/3),e=a(g,d,b),b=a(g,d,b-1/3);return"rgb("+255*c+","+255*e+","+255*b+")"},p=function(a){return/([\+\-]?[0-9|auto\.]+)(%|px|pt|em|rem|in|cm|mm|ex|pc|vw|vh|deg)?/.exec(a)[2]},I=function(a,b,c){return p(b)?b:-1=d.delay&&(d.begin(b),d.begin=void 0);c.current>=b.duration&&(d.loop?(c.start=a,"alternate"===d.direction&&B(b,!0),f.number(d.loop)&&d.loop--):(b.ended=!0,b.pause(),d.complete&&d.complete(b)),c.last=0)};b.seek=function(a){P(b,a/100*b.duration)};b.pause=function(){ba(b);var a=n.indexOf(b);-1 0 ? this.current - 1 : this.slidesTotal - 1; 379 | } 380 | 381 | var nextSlide = this.slides[this.current], 382 | nextLayout = nextSlide.getAttribute('data-layout'), 383 | nextTitle = nextSlide.querySelector('.slide__title'); 384 | 385 | // Animate the nextSlide´s items in.. 386 | var animateIn = function() { 387 | clearTimeout(self.navtime); 388 | 389 | var inItems = [].slice.call(nextSlide.querySelectorAll('.slide-imgwrap .slide__img-inner')), 390 | inconfig = self.options.layoutConfig[nextLayout] !== undefined ? self.options.layoutConfig[nextLayout].in : self.options.layoutConfig['layout1'].in, 391 | inresetconfig = inconfig.resetProps, 392 | animeInProps = { 393 | targets: inItems, 394 | duration: inconfig.duration, 395 | easing: inconfig.easing, 396 | delay: function(el, index) { 397 | return direction === 'next' ? index * inconfig.itemsDelay : (inItems.length - 1 - index) * inconfig.itemsDelay; 398 | }, 399 | complete: function() { 400 | self.isAnimating = false; 401 | } 402 | }; 403 | 404 | // Configure the animation in properties. 405 | self._setAnimationProperties(animeInProps, inconfig, direction); 406 | // Reset before animating in: 407 | inItems.forEach(function(item, pos) { 408 | var transformStr = ''; 409 | if( inresetconfig.translateX !== undefined ) { 410 | var tx = typeof inresetconfig.translateX === 'object' ? function() { 411 | return typeof inresetconfig.translateX[direction] === 'function' ? self._getValuePercentage(inresetconfig.translateX[direction](item, pos), 'width') : self._getValuePercentage(inresetconfig.translateX[direction], 'width'); 412 | } : self._getValuePercentage(inresetconfig.translateX, 'width'); 413 | 414 | transformStr += ' translateX(' + (typeof tx === 'function' ? tx() : tx) + 'px)'; 415 | } 416 | if( inresetconfig.translateY !== undefined ) { 417 | var ty = typeof inresetconfig.translateY === 'object' ? function() { 418 | return typeof inresetconfig.translateY[direction] === 'function' ? self._getValuePercentage(inresetconfig.translateY[direction](item, pos), 'height') : self._getValuePercentage(inresetconfig.translateY[direction], 'height'); 419 | } : self._getValuePercentage(inresetconfig.translateY, 'height'); 420 | transformStr += ' translateY(' + (typeof ty === 'function' ? ty() : ty) + 'px)'; 421 | } 422 | if( inresetconfig.rotateZ !== undefined ) { 423 | var rot = typeof inresetconfig.rotateZ === 'object' ? function() { 424 | return typeof inresetconfig.rotateZ[direction] === 'function' ? inresetconfig.rotateZ[direction](item, pos) : inresetconfig.rotateZ[direction]; 425 | } : inresetconfig.rotateZ; 426 | 427 | transformStr += ' rotateZ(' + (typeof rot === 'function' ? rot() : rot) + 'deg)'; 428 | } 429 | if( inresetconfig.scale !== undefined ) { 430 | var s = typeof inresetconfig.scale === 'object' ? function() { 431 | return typeof inresetconfig.scale[direction] === 'function' ? inresetconfig.scale[direction](item, pos) : inresetconfig.scale[direction]; 432 | } : inresetconfig.scale; 433 | 434 | transformStr += ' scale(' + (typeof s === 'function' ? s() : s) + ')'; 435 | } 436 | if( transformStr !== '' ) { 437 | item.style.transform = item.style.WebkitTransform = transformStr; 438 | } 439 | if( inresetconfig.opacity !== undefined ) { 440 | item.style.opacity = inresetconfig.opacity; 441 | } 442 | }); 443 | // Reset next title. 444 | nextTitle.style.opacity = 0; 445 | // Switch current class. 446 | nextSlide.classList.add('slide--current'); 447 | // Animate next slide in. 448 | anime(animeInProps); 449 | // Animate next title in. 450 | self._animateTitle(nextTitle, 'in'); 451 | }; 452 | 453 | // Animate the currentSlide´s items out.. 454 | var outItems = [].slice.call(currentSlide.querySelectorAll('.slide-imgwrap .slide__img-inner')), 455 | outconfig = this.options.layoutConfig[currentLayout] !== undefined ? this.options.layoutConfig[currentLayout].out : this.options.layoutConfig['layout1'].out, 456 | animeOutProps = { 457 | targets: outItems, 458 | duration: outconfig.duration, 459 | easing : outconfig.easing, 460 | delay: function(el, index) { 461 | return direction === 'next' ? index * outconfig.itemsDelay : (outItems.length - 1 - index) * outconfig.itemsDelay; 462 | }, 463 | complete: function() { 464 | currentSlide.classList.remove('slide--current'); 465 | } 466 | }; 467 | 468 | // Configure the animation out properties. 469 | this._setAnimationProperties(animeOutProps, outconfig, direction); 470 | // Animate current slide out. 471 | anime(animeOutProps); 472 | // Animate current title out. 473 | this._animateTitle(currentTitle, 'out'); 474 | // Animate the next items in.. 475 | clearTimeout(this.navtime); 476 | this.navtime = setTimeout(animateIn, this.options.layoutConfig[nextLayout] !== undefined && this.options.layoutConfig[nextLayout].in.delay !== undefined ? this.options.layoutConfig[nextLayout].in.delay : 150 ); 477 | }; 478 | 479 | /** 480 | * Sets the animation properties for anime.js. 481 | */ 482 | MLSlideshow.prototype._setAnimationProperties = function(props, config, direction) { 483 | var self = this; 484 | if( config.translateX !== undefined ) { 485 | props.translateX = typeof config.translateX === 'object' ? function(el, index) { 486 | return typeof config.translateX[direction] === 'function' ? self._getValuePercentage(config.translateX[direction](el, index), 'width') : self._getValuePercentage(config.translateX[direction], 'width'); 487 | } : this._getValuePercentage(config.translateX, 'width'); 488 | } 489 | if( config.translateY !== undefined ) { 490 | props.translateY = typeof config.translateY === 'object' ? function(el, index) { 491 | return typeof config.translateY[direction] === 'function' ? self._getValuePercentage(config.translateY[direction](el, index), 'width') : self._getValuePercentage(config.translateY[direction], 'height'); 492 | } : this._getValuePercentage(config.translateY, 'height'); 493 | } 494 | if( config.rotateZ !== undefined ) { 495 | props.rotateZ = typeof config.rotateZ === 'object' ? function(el, index) { 496 | return typeof config.rotateZ[direction] === 'function' ? config.rotateZ[direction](el, index) : config.rotateZ[direction]; 497 | } : config.rotateZ; 498 | } 499 | if( config.scale !== undefined ) { 500 | props.scale = typeof config.scale === 'object' ? function(el, index) { 501 | return typeof config.scale[direction] === 'function' ? config.scale[direction](el, index) : config.scale[direction]; 502 | } : config.scale; 503 | } 504 | if( config.opacity !== undefined ) { 505 | props.opacity = config.opacity; 506 | } 507 | }; 508 | 509 | /** 510 | * Animate the title in and out. 511 | */ 512 | MLSlideshow.prototype._animateTitle = function(titleEl, dir) { 513 | anime({ 514 | targets: titleEl, 515 | opacity: dir === 'out' ? 0 : 1, 516 | duration: dir === 'out' ? 200 : 500, 517 | easing: 'easeOutExpo' 518 | }); 519 | }; 520 | 521 | /** 522 | * Navigate to the next slide. 523 | */ 524 | MLSlideshow.prototype.next = function() { 525 | this._navigate('next'); 526 | }; 527 | 528 | /** 529 | * Navigate to the previous slide. 530 | */ 531 | MLSlideshow.prototype.prev = function() { 532 | this._navigate('prev'); 533 | }; 534 | 535 | /** 536 | * If "str" is a percentage value (e.g. 50%) it returns the calculation in px for that value (relative to the main Slideshow element). 537 | */ 538 | MLSlideshow.prototype._getValuePercentage = function(str, axis) { 539 | return typeof str === 'string' && str.indexOf('%') !== -1 ? parseFloat(str)/100*this.dimentions[axis] : str; 540 | }; 541 | 542 | window.MLSlideshow = MLSlideshow; 543 | 544 | })(window); --------------------------------------------------------------------------------