├── README.md ├── css ├── component.css └── default.css ├── fonts ├── controls │ ├── entypo.dev.svg │ ├── entypo.eot │ ├── entypo.svg │ ├── entypo.ttf │ ├── entypo.woff │ └── license.txt ├── fontawesome.eot ├── fontawesome.svg ├── fontawesome.ttf ├── fontawesome.woff └── readme.md ├── images ├── 1.jpg ├── 2.jpg ├── 3.jpg ├── 4.jpg ├── 5.jpg └── 6.jpg ├── index.html └── js ├── cbpBGSlideshow.js ├── cbpBGSlideshow.min.js ├── jquery.imagesloaded.min.js └── modernizr.custom.js /README.md: -------------------------------------------------------------------------------- 1 | Blueprint: Background Slideshow 2 | ========= 3 | 4 | A fullscreen background slideshow with autoplay functionality. 5 | 6 | [article on Codrops](http://tympanus.net/codrops/?p=14667) 7 | 8 | [demo](http://tympanus.net/Blueprints/BackgroundSlideshow/) 9 | 10 | The Blueprints are a collection of basic and minimal website concepts, components, plugins and layouts with minimal style for easy adaption and usage, or simply for inspiration. 11 | Check out all of our Blueprints [here](http://tympanus.net/codrops/category/blueprints/) 12 | 13 | [LICENSING & TERMS OF USE](http://tympanus.net/codrops/licensing/) -------------------------------------------------------------------------------- /css/component.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'entypo'; 3 | src:url('../fonts/controls/entypo.eot'); 4 | src:url('../fonts/controls/entypo.eot?#iefix') format('embedded-opentype'), 5 | url('../fonts/controls/entypo.woff') format('woff'), 6 | url('../fonts/controls/entypo.ttf') format('truetype'), 7 | url('../fonts/controls/entypo.svg#entypo') format('svg'); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | 12 | .cbp-bislideshow { 13 | list-style: none; 14 | width: 100%; 15 | height: 100%; 16 | position: fixed; 17 | top: 0; 18 | left: 0; 19 | z-index: -1; 20 | padding: 0; 21 | margin: 0; 22 | } 23 | 24 | .cbp-bislideshow li { 25 | position: absolute; 26 | width: 101%; 27 | height: 101%; 28 | top: -0.5%; 29 | left: -0.5%; 30 | opacity: 0; 31 | -webkit-transition: opacity 1s; 32 | -moz-transition: opacity 1s; 33 | transition: opacity 1s; 34 | } 35 | 36 | /* If background-size supported we'll add the images to the background of the li */ 37 | 38 | .backgroundsize .cbp-bislideshow li { 39 | -webkit-background-size: cover; 40 | -moz-background-size: cover; 41 | background-size: cover; 42 | background-position: center center; 43 | } 44 | 45 | /* ...and hide the images */ 46 | .backgroundsize .cbp-bislideshow li img { 47 | display: none; 48 | } 49 | 50 | .cbp-bislideshow li img { 51 | display: block; 52 | width: 100%; 53 | } 54 | 55 | .cbp-bicontrols { 56 | position: fixed; 57 | width: 300px; 58 | height: 100px; 59 | margin: -50px 0 0 -150px; 60 | top: 50%; 61 | left: 50%; 62 | } 63 | 64 | .cbp-bicontrols span { 65 | float: left; 66 | width: 100px; 67 | height: 100px; 68 | position: relative; 69 | cursor: pointer; 70 | } 71 | 72 | .cbp-bicontrols span:before { 73 | position: absolute; 74 | width: 100%; 75 | height: 100%; 76 | top: 0; 77 | left: 0; 78 | text-align: center; 79 | font-family: 'entypo'; 80 | speak: none; 81 | font-style: normal; 82 | font-weight: normal; 83 | font-variant: normal; 84 | text-transform: none; 85 | line-height: 100px; 86 | font-size: 80px; 87 | color: #fff; 88 | -webkit-font-smoothing: antialiased; 89 | opacity: 0.7; 90 | } 91 | 92 | .cbp-bicontrols span:hover:before { 93 | opacity: 1; 94 | } 95 | 96 | .cbp-bicontrols span:active:before { 97 | top: 2px; 98 | } 99 | 100 | span.cbp-biplay:before { 101 | content: "\e002"; 102 | } 103 | 104 | span.cbp-bipause:before { 105 | content: "\e003"; 106 | } 107 | 108 | span.cbp-binext:before { 109 | content: "\e000"; 110 | } 111 | 112 | span.cbp-biprev:before { 113 | content: "\e001"; 114 | } 115 | 116 | .cbp-bicontrols span.cbp-binext { 117 | float: right; 118 | } 119 | 120 | /* Fallback */ 121 | 122 | .no-js.no-backgroundsize .cbp-bislideshow li:first-child { 123 | opacity: 1; 124 | } 125 | 126 | .no-js.backgroundsize .cbp-bislideshow li:first-child img { 127 | display: block; 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: 'fontawesome'; 6 | src:url('../fonts/fontawesome.eot'); 7 | src:url('../fonts/fontawesome.eot?#iefix') format('embedded-opentype'), 8 | url('../fonts/fontawesome.svg#fontawesome') format('svg'), 9 | url('../fonts/fontawesome.woff') format('woff'), 10 | url('../fonts/fontawesome.ttf') format('truetype'); 11 | font-weight: normal; 12 | font-style: normal; 13 | } 14 | 15 | body, html { font-size: 100%; padding: 0; margin: 0;} 16 | 17 | /* Reset */ 18 | *, 19 | *:after, 20 | *:before { 21 | -webkit-box-sizing: border-box; 22 | -moz-box-sizing: border-box; 23 | box-sizing: border-box; 24 | } 25 | 26 | /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ 27 | .clearfix:before, 28 | .clearfix:after { 29 | content: " "; 30 | display: table; 31 | } 32 | 33 | .clearfix:after { 34 | clear: both; 35 | } 36 | 37 | body { 38 | font-family: 'Lato', Calibri, Arial, sans-serif; 39 | color: #47a3da; 40 | 41 | } 42 | 43 | a { 44 | color: #f0f0f0; 45 | text-decoration: none; 46 | } 47 | 48 | a:hover { 49 | color: #000; 50 | } 51 | 52 | .main, 53 | .container > header { 54 | width: 90%; 55 | max-width: 69em; 56 | margin: 0 auto; 57 | padding: 0 1.875em 3.125em 1.875em; 58 | } 59 | 60 | .container > header { 61 | padding: 2.875em 1.875em 1.875em; 62 | } 63 | 64 | .container > header h1 { 65 | font-size: 2.125em; 66 | line-height: 1.3; 67 | margin: 0; 68 | float: left; 69 | font-weight: 400; 70 | } 71 | 72 | .container > header span { 73 | display: block; 74 | font-weight: 700; 75 | text-transform: uppercase; 76 | letter-spacing: 0.5em; 77 | padding: 0 0 0.6em 0.1em; 78 | } 79 | 80 | .container > header nav { 81 | float: right; 82 | } 83 | 84 | .container > header nav a { 85 | display: block; 86 | float: left; 87 | position: relative; 88 | width: 2.5em; 89 | height: 2.5em; 90 | background: #fff; 91 | border-radius: 50%; 92 | color: transparent; 93 | margin: 0 0.1em; 94 | border: 4px solid #47a3da; 95 | text-indent: -8000px; 96 | } 97 | 98 | .container > header nav a:after { 99 | content: attr(data-info); 100 | color: #47a3da; 101 | position: absolute; 102 | width: 600%; 103 | top: 120%; 104 | text-align: right; 105 | right: 0; 106 | opacity: 0; 107 | pointer-events: none; 108 | } 109 | 110 | .container > header nav a:hover:after { 111 | opacity: 1; 112 | } 113 | 114 | .container > header nav a:hover { 115 | background: #47a3da; 116 | } 117 | 118 | .icon-drop:before, 119 | .icon-arrow-left:before { 120 | font-family: 'fontawesome'; 121 | position: absolute; 122 | top: 0; 123 | width: 100%; 124 | height: 100%; 125 | speak: none; 126 | font-style: normal; 127 | font-weight: normal; 128 | line-height: 2; 129 | text-align: center; 130 | color: #47a3da; 131 | -webkit-font-smoothing: antialiased; 132 | text-indent: 8000px; 133 | padding-left: 8px; 134 | } 135 | 136 | .container > header nav a:hover:before { 137 | color: #fff; 138 | } 139 | 140 | .icon-drop:before { 141 | content: "\e000"; 142 | } 143 | 144 | .icon-arrow-left:before { 145 | content: "\f060"; 146 | } 147 | 148 | -------------------------------------------------------------------------------- /fonts/controls/entypo.dev.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /fonts/controls/entypo.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Blueprint-BackgroundSlideshow/786c8a390d4cb6d0d40e5f1cc9befb6c749067b4/fonts/controls/entypo.eot -------------------------------------------------------------------------------- /fonts/controls/entypo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /fonts/controls/entypo.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Blueprint-BackgroundSlideshow/786c8a390d4cb6d0d40e5f1cc9befb6c749067b4/fonts/controls/entypo.ttf -------------------------------------------------------------------------------- /fonts/controls/entypo.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Blueprint-BackgroundSlideshow/786c8a390d4cb6d0d40e5f1cc9befb6c749067b4/fonts/controls/entypo.woff -------------------------------------------------------------------------------- /fonts/controls/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/fontawesome.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Blueprint-BackgroundSlideshow/786c8a390d4cb6d0d40e5f1cc9befb6c749067b4/fonts/fontawesome.eot -------------------------------------------------------------------------------- /fonts/fontawesome.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /fonts/fontawesome.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Blueprint-BackgroundSlideshow/786c8a390d4cb6d0d40e5f1cc9befb6c749067b4/fonts/fontawesome.ttf -------------------------------------------------------------------------------- /fonts/fontawesome.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Blueprint-BackgroundSlideshow/786c8a390d4cb6d0d40e5f1cc9befb6c749067b4/fonts/fontawesome.woff -------------------------------------------------------------------------------- /fonts/readme.md: -------------------------------------------------------------------------------- 1 | Icons made with http://icomoon.io/ 2 | 3 | #Font Awesome 3.0.2 4 | ##the iconic font designed for use with Twitter Bootstrap 5 | 6 | The full suite of pictographic icons, examples, and documentation can be found at: 7 | http://fortawesome.github.com/Font-Awesome/ 8 | 9 | 10 | ##License 11 | - The Font Awesome font is licensed under the SIL Open Font License - http://scripts.sil.org/OFL 12 | - Font Awesome CSS, LESS, and SASS files are licensed under the MIT License - http://opensource.org/licenses/mit-license.html 13 | - The Font Awesome pictograms are licensed under the CC BY 3.0 License - http://creativecommons.org/licenses/by/3.0/ 14 | - Attribution is no longer required in Font Awesome 3.0, but much appreciated: "Font Awesome by Dave Gandy - http://fortawesome.github.com/Font-Awesome" 15 | 16 | ##Contact 17 | - Email: dave@davegandy.com 18 | - Twitter: http://twitter.com/fortaweso_me 19 | - Work: Lead Product Designer @ http://kyru.us 20 | 21 | ##Changelog 22 | - v3.0.0 - all icons redesigned from scratch, optimized for Bootstrap's 14px default 23 | - v3.0.1 - much improved rendering in webkit, various bugfixes 24 | - v3.0.2 - much improved rendering and alignment in IE7 25 | -------------------------------------------------------------------------------- /images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Blueprint-BackgroundSlideshow/786c8a390d4cb6d0d40e5f1cc9befb6c749067b4/images/1.jpg -------------------------------------------------------------------------------- /images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Blueprint-BackgroundSlideshow/786c8a390d4cb6d0d40e5f1cc9befb6c749067b4/images/2.jpg -------------------------------------------------------------------------------- /images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Blueprint-BackgroundSlideshow/786c8a390d4cb6d0d40e5f1cc9befb6c749067b4/images/3.jpg -------------------------------------------------------------------------------- /images/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Blueprint-BackgroundSlideshow/786c8a390d4cb6d0d40e5f1cc9befb6c749067b4/images/4.jpg -------------------------------------------------------------------------------- /images/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Blueprint-BackgroundSlideshow/786c8a390d4cb6d0d40e5f1cc9befb6c749067b4/images/5.jpg -------------------------------------------------------------------------------- /images/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/Blueprint-BackgroundSlideshow/786c8a390d4cb6d0d40e5f1cc9befb6c749067b4/images/6.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 | 7 |