├── Demo ├── img │ ├── slide1.jpg │ ├── slide2.jpg │ ├── slide3.jpg │ ├── slide1_blurred.jpg │ ├── slide2_blurred.jpg │ └── slide3_blurred.jpg ├── immersive-slider.css ├── jquery.immersive-slider.js └── demo.html ├── immersive-slider.css ├── jquery.immersive-slider.min.js ├── README.md └── jquery.immersive-slider.js /Demo/img/slide1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peachananr/immersive-slider/HEAD/Demo/img/slide1.jpg -------------------------------------------------------------------------------- /Demo/img/slide2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peachananr/immersive-slider/HEAD/Demo/img/slide2.jpg -------------------------------------------------------------------------------- /Demo/img/slide3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peachananr/immersive-slider/HEAD/Demo/img/slide3.jpg -------------------------------------------------------------------------------- /Demo/img/slide1_blurred.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peachananr/immersive-slider/HEAD/Demo/img/slide1_blurred.jpg -------------------------------------------------------------------------------- /Demo/img/slide2_blurred.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peachananr/immersive-slider/HEAD/Demo/img/slide2_blurred.jpg -------------------------------------------------------------------------------- /Demo/img/slide3_blurred.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/peachananr/immersive-slider/HEAD/Demo/img/slide3_blurred.jpg -------------------------------------------------------------------------------- /immersive-slider.css: -------------------------------------------------------------------------------- 1 | /*================================================= 2 | Class Definitions 3 | =================================================*/ 4 | 5 | .immersive_slider { 6 | background: #161923; 7 | max-width: 100%; 8 | height: 480px; 9 | opacity: .9; 10 | box-sizing: border-box; 11 | -moz-box-sizing: border-box; 12 | -webkit-box-sizing: border-box; 13 | position: relative; 14 | overflow: hidden; 15 | } 16 | .immersive_slider .is-slide { 17 | display: table; 18 | height: 100%; 19 | width: 100%; 20 | box-sizing: border-box; 21 | -moz-box-sizing: border-box; 22 | -webkit-box-sizing: border-box; 23 | padding: 50px 100px; 24 | position: absolute; 25 | } 26 | .immersive_slider .is-slide .image { 27 | float: none; 28 | width: 50%; 29 | padding-left: 10px; 30 | box-sizing: border-box; 31 | -moz-box-sizing: border-box; 32 | -webkit-box-sizing: border-box; 33 | vertical-align: middle; 34 | display: table-cell; 35 | padding: 0 0 0 10px; 36 | } 37 | .is-bg-overflow { 38 | width: 100%; 39 | height: 100%; 40 | position: absolute; 41 | z-index: 0; 42 | } 43 | 44 | .is-overflow, .is-bg-overflow { 45 | height: 100%; 46 | } 47 | 48 | .ease { 49 | -webkit-transition: 1000ms ease all; 50 | -moz-transition: 1000ms ease all; 51 | -o-transition: 1000ms ease all; 52 | transition: 1000ms ease all; 53 | } 54 | 55 | .bounce { 56 | -webkit-transition: 1000ms cubic-bezier(0.175, 0.885, 0.420, 1.310) all; 57 | -moz-transition: 1000ms cubic-bezier(0.175, 0.885, 0.420, 1.310) all; 58 | -o-transition: 1000ms cubic-bezier(0.175, 0.885, 0.420, 1.310) all; 59 | transition: 1000ms cubic-bezier(0.175, 0.885, 0.420, 1.310) all; 60 | } 61 | 62 | .no-animation { 63 | -webkit-transition: none!important; 64 | -moz-transition: none!important; 65 | -o-transition: none!important; 66 | transition: none !important; 67 | } 68 | 69 | .immersive_slider .is-slide .image img{ 70 | max-width: 100%; 71 | display: block; 72 | width: 100%; 73 | } 74 | 75 | .immersive_slider .is-slide .content { 76 | float: none; 77 | width: 50%; 78 | padding-right: 10px; 79 | box-sizing: border-box; 80 | -moz-box-sizing: border-box; 81 | -webkit-box-sizing: border-box; 82 | color: white; 83 | text-align: left; 84 | line-height: 160%; 85 | vertical-align: middle; 86 | display: table-cell; 87 | } 88 | 89 | .immersive_slider .is-slide .content h2{ 90 | font-size: 42px; 91 | font-weight: 300; 92 | text-align: left; 93 | } 94 | 95 | .is-container { 96 | position: relative; 97 | overflow: hidden; 98 | } 99 | 100 | .is-container .is-background { 101 | position: absolute; 102 | top: 0; 103 | left: 0; 104 | width: 100%; 105 | height: 100%; 106 | } 107 | 108 | .is-container .is-background img{ 109 | width: 100%; 110 | height: 100%; 111 | left: 0; 112 | position: relative; 113 | } 114 | 115 | .is-container .is-background.gs_cssblur { 116 | -webkit-filter: blur(20px); 117 | -moz-filter: blur(20px); 118 | -o-filter: blur(20px); 119 | filter: blur(20px); 120 | } 121 | 122 | .is-pagination { 123 | position: absolute; 124 | left: 0; 125 | width: 100%; 126 | bottom: 20px; 127 | z-index: 5; 128 | list-style: none; 129 | margin: 0; 130 | padding: 0; 131 | text-align: center; 132 | } 133 | .is-pagination li { 134 | padding: 0; 135 | display: inline-block; 136 | text-align: center; 137 | position: relative; 138 | } 139 | .is-pagination li a{ 140 | padding: 10px; 141 | width: 4px; 142 | height: 4px; 143 | display: block; 144 | 145 | } 146 | .is-pagination li a:before{ 147 | content: ''; 148 | position: absolute; 149 | width: 4px; 150 | height: 4px; 151 | background: rgba(255,255,255,0.85); 152 | border-radius: 10px; 153 | -webkit-border-radius: 10px; 154 | -moz-border-radius: 10px; 155 | } 156 | 157 | .is-pagination li a.active:before{ 158 | width: 10px; 159 | height: 10px; 160 | background: none; 161 | border: 1px solid white; 162 | margin-top: -4px; 163 | left: 8px; 164 | } 165 | 166 | .is-next, .is-prev { 167 | padding: 5px 5px 15px; 168 | font-size: 50px; 169 | position: absolute; 170 | bottom: 50%; 171 | margin-bottom: -36px; 172 | width: 35px; 173 | color: #FFF; 174 | display: inline-block; 175 | line-height: 100%; 176 | background: rgba(0, 0, 0, 0.35); 177 | } 178 | 179 | .is-next { 180 | right: 10px; 181 | } 182 | 183 | .is-prev { 184 | left: 10px; 185 | } -------------------------------------------------------------------------------- /Demo/immersive-slider.css: -------------------------------------------------------------------------------- 1 | /*================================================= 2 | Class Definitions 3 | =================================================*/ 4 | 5 | .immersive_slider { 6 | background: #161923; 7 | max-width: 100%; 8 | height: 480px; 9 | opacity: .9; 10 | box-sizing: border-box; 11 | -moz-box-sizing: border-box; 12 | -webkit-box-sizing: border-box; 13 | position: relative; 14 | overflow: hidden; 15 | } 16 | .immersive_slider .is-slide { 17 | display: table; 18 | height: 100%; 19 | width: 100%; 20 | box-sizing: border-box; 21 | -moz-box-sizing: border-box; 22 | -webkit-box-sizing: border-box; 23 | padding: 50px 100px; 24 | position: absolute; 25 | } 26 | .immersive_slider .is-slide .image { 27 | float: none; 28 | width: 50%; 29 | padding-left: 10px; 30 | box-sizing: border-box; 31 | -moz-box-sizing: border-box; 32 | -webkit-box-sizing: border-box; 33 | vertical-align: middle; 34 | display: table-cell; 35 | padding: 0 0 0 10px; 36 | } 37 | .is-bg-overflow { 38 | width: 100%; 39 | height: 100%; 40 | position: absolute; 41 | z-index: 0; 42 | } 43 | 44 | .is-overflow, .is-bg-overflow { 45 | height: 100%; 46 | } 47 | 48 | .ease { 49 | -webkit-transition: 1000ms ease all; 50 | -moz-transition: 1000ms ease all; 51 | -o-transition: 1000ms ease all; 52 | transition: 1000ms ease all; 53 | } 54 | 55 | .bounce { 56 | -webkit-transition: 1000ms cubic-bezier(0.175, 0.885, 0.420, 1.310) all; 57 | -moz-transition: 1000ms cubic-bezier(0.175, 0.885, 0.420, 1.310) all; 58 | -o-transition: 1000ms cubic-bezier(0.175, 0.885, 0.420, 1.310) all; 59 | transition: 1000ms cubic-bezier(0.175, 0.885, 0.420, 1.310) all; 60 | } 61 | 62 | .no-animation { 63 | -webkit-transition: none!important; 64 | -moz-transition: none!important; 65 | -o-transition: none!important; 66 | transition: none !important; 67 | } 68 | 69 | .immersive_slider .is-slide .image img{ 70 | max-width: 100%; 71 | display: block; 72 | width: 100%; 73 | } 74 | 75 | .immersive_slider .is-slide .content { 76 | float: none; 77 | width: 50%; 78 | padding-right: 10px; 79 | box-sizing: border-box; 80 | -moz-box-sizing: border-box; 81 | -webkit-box-sizing: border-box; 82 | color: white; 83 | text-align: left; 84 | line-height: 160%; 85 | vertical-align: middle; 86 | display: table-cell; 87 | } 88 | 89 | .immersive_slider .is-slide .content h2{ 90 | font-size: 42px; 91 | font-weight: 300; 92 | text-align: left; 93 | } 94 | 95 | .is-container { 96 | position: relative; 97 | overflow: hidden; 98 | } 99 | 100 | .is-container .is-background { 101 | position: absolute; 102 | top: 0; 103 | left: 0; 104 | width: 100%; 105 | height: 100%; 106 | } 107 | 108 | .is-container .is-background img{ 109 | width: 100%; 110 | height: 100%; 111 | left: 0; 112 | position: relative; 113 | } 114 | 115 | .is-container .is-background.gs_cssblur { 116 | -webkit-filter: blur(20px); 117 | -moz-filter: blur(20px); 118 | -o-filter: blur(20px); 119 | filter: blur(20px); 120 | } 121 | 122 | .is-pagination { 123 | position: absolute; 124 | left: 0; 125 | width: 100%; 126 | bottom: 20px; 127 | z-index: 5; 128 | list-style: none; 129 | margin: 0; 130 | padding: 0; 131 | text-align: center; 132 | } 133 | .is-pagination li { 134 | padding: 0; 135 | display: inline-block; 136 | text-align: center; 137 | position: relative; 138 | } 139 | .is-pagination li a{ 140 | padding: 10px; 141 | width: 4px; 142 | height: 4px; 143 | display: block; 144 | 145 | } 146 | .is-pagination li a:before{ 147 | content: ''; 148 | position: absolute; 149 | width: 4px; 150 | height: 4px; 151 | background: rgba(255,255,255,0.85); 152 | border-radius: 10px; 153 | -webkit-border-radius: 10px; 154 | -moz-border-radius: 10px; 155 | } 156 | 157 | .is-pagination li a.active:before{ 158 | width: 10px; 159 | height: 10px; 160 | background: none; 161 | border: 1px solid white; 162 | margin-top: -4px; 163 | left: 8px; 164 | } 165 | 166 | .is-next, .is-prev { 167 | padding: 5px 5px 15px; 168 | font-size: 50px; 169 | position: absolute; 170 | bottom: 50%; 171 | margin-bottom: -36px; 172 | width: 35px; 173 | color: #FFF; 174 | display: inline-block; 175 | line-height: 100%; 176 | background: rgba(0, 0, 0, 0.35); 177 | } 178 | 179 | .is-next { 180 | right: 10px; 181 | } 182 | 183 | .is-prev { 184 | left: 10px; 185 | } -------------------------------------------------------------------------------- /jquery.immersive-slider.min.js: -------------------------------------------------------------------------------- 1 | !function(e){var t={animation:"bounce",slideSelector:".slide",container:".main",cssBlur:false,pagination:true,loop:true,autoStart:4e3};e.fn.swipeEvents=function(){return this.each(function(){function i(e){var i=e.originalEvent.touches;if(i&&i.length){t=i[0].pageX;n=i[0].pageY;r.bind("touchmove",s)}e.preventDefault()}function s(e){var i=e.originalEvent.touches;if(i&&i.length){var o=t-i[0].pageX;var u=n-i[0].pageY;if(o>=50){r.trigger("swipeLeft")}if(o<=-50){r.trigger("swipeRight")}if(u>=50){r.trigger("swipeUp")}if(u<=-50){r.trigger("swipeDown")}if(Math.abs(o)>=50||Math.abs(u)>=50){r.unbind("touchmove",s)}}e.preventDefault()}var t,n,r=e(this);r.bind("touchstart",i)})};e.fn.transformSlider=function(t,n){var r=e(this);switch(t.animation){case"slide":r.addClass("ease").css({"-webkit-transform":"translate3d("+n+"%, 0, 0)","-moz-transform":"translate3d("+n+"%, 0, 0)","-ms-transform":"translate3d("+n+"%, 0, 0)",transform:"translate3d("+n+"%, 0, 0)"});break;case"slideUp":r.addClass("ease").css({"-webkit-transform":"translate3d(0, "+n+"%, 0)","-moz-transform":"translate3d(0, "+n+"%, 0)","-ms-transform":"translate3d(0, "+n+"%, 0)",transform:"translate3d(0, "+n+"%, 0)"});break;case"bounce":r.addClass("bounce").css({"-webkit-transform":"translate3d("+n+"%, 0, 0)","-moz-transform":"translate3d("+n+"%, 0, 0)","-ms-transform":"translate3d("+n+"%, 0, 0)",transform:"translate3d("+n+"%, 0, 0)"});break;case"bounceUp":r.addClass("bounce").css({"-webkit-transform":"translate3d(0, "+n+"%, 0)","-moz-transform":"translate3d(0, "+n+"%, 0)","-ms-transform":"translate3d(0, "+n+"%, 0)",transform:"translate3d(0, "+n+"%, 0)"});break;case"fade":r.addClass("no-animation").fadeOut("slow",function(){r.css({"-webkit-transform":"translate3d("+n+"%, 0, 0)","-moz-transform":"translate3d("+n+"%, 0, 0)","-ms-transform":"translate3d("+n+"%, 0, 0)",transform:"translate3d("+n+"%, 0, 0)"}).fadeIn("slow")});break}};e.fn.positionSlides=function(t,n){var r=e(this);if(t.animation=="slideUp"||t.animation=="bounceUp"){r.css({top:n*100+"%"})}else{r.css({left:n*100+"%"})}};e.fn.immersive_slider=function(n){var r=e.extend({},t,n),i=e(this),s="",o="";i.addClass("immersive_slider");i.find(r.slideSelector).addClass("is-slide");if(r.cssBlur==true){i.find(".is-slide img:first-child").each(function(t){var n="";if(t==0)n="active";var i=e(this);e(r.container).addClass("is-container").prepend("
"+i.clone().wrap("
").parent().html()+"
");e("#slide_"+(t+1)+"_bg").positionSlides(r,t)})}else{i.find(".is-slide").each(function(t){var n="";if(t==0)n="active";var i="";e(r.container).addClass("is-container").prepend("
"+i+"
");e("#slide_"+(t+1)+"_bg").positionSlides(r,t)})}if(r.autoStart!=0||r.autoStart!=false){setInterval(function(){i.moveNext()},r.autoStart)}e(r.container).find(".is-background").wrapAll("
");i.find(".is-slide").wrapAll("
");i.find(".is-slide").each(function(t){var n="";if(t==0)n="active";e(this).attr("id","slide_"+(t+1)).addClass(n);e(this).positionSlides(r,t);if(r.pagination==true){o+="
    • "}});e("
      "+o+"
    ").appendTo(i);if(r.pagination==true){e(".is-pagination li a").click(function(){var t=e(this).attr("href");if(!e(this).hasClass("active")){i.moveSlider(r,t)}return false})}e(".is-next").click(function(){i.moveNext();return false});e(".is-prev").click(function(){i.movePrev();return false});e.fn.moveSlider=function(t,n){var r=e(this),i=r.find(".is-slide.active"),s=r.find(".is-slide"+n),o=e(t.container).find(".is-background.active"),u=e(t.container).find(".is-background"+n+"_bg");if(s){i.removeClass("active");s.addClass("active");o.removeClass("active");u.addClass("active");e(".is-pagination li a"+".active").removeClass("active");e(".is-pagination li a"+"[href='"+n+"']").addClass("active")}pos=(n.replace("#slide_","")-1)*100*-1;r.find(".is-overflow").transformSlider(t,pos);e(t.container).find(".is-bg-overflow").transformSlider(t,pos)};e.fn.moveNext=function(){var t=e(this),n=t.find(r.slideSelector).length+1,i=parseInt(e(this).find(".is-slide.active").attr("id").replace("slide_",""))+1;if(i0){t.moveSlider(r,"#slide_"+i)}else{if(r.loop==true)t.moveSlider(r,"#slide_"+(n-1))}};i.swipeEvents().bind("swipeRight",function(){i.movePrev()}).bind("swipeLeft",function(){i.moveNext()})}}(window.jQuery) -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | #Immersive Slider by Pete R. 2 | Create an immersive slider that changes the whole container to match the viewing slide 3 | Created by [Pete R.](http://www.thepetedesign.com), Founder of [BucketListly](http://www.bucketlistly.com) 4 | 5 | 6 | ## Demo 7 | [View demo](http://peachananr.github.io/immersive-slider/Demo/demo.html) 8 | 9 | ## Compatibility 10 | Modern browsers such as Chrome, Firefox, and Safari on both desktop and smartphones have been tested. Not tested on IE. 11 | 12 | ## Basic Usage 13 | Immersive Slider let you create a unique immersive slider experience that changes the whole container to match the viewing slide like you see at the [Google's TV website](http://www.google.com/tv/). The plugin will let you assign background images per slide without you doing all the hard work. 14 | 15 | To add this to your website, simply include the latest jQuery library together with `jquery.immersive-slider.js`, and `immersive-slider.css` into your document's `` and create an HTML markup as follows: 16 | 17 | ````html 18 |
    19 | ... 20 |
    21 |
    22 | ... 23 |
    24 |
    25 | ... 26 |
    27 | 28 | ... 29 | 30 | « 31 | » 32 |
    33 |
    34 | ```` 35 | The container main will be used to display the background images. Make sure you change all the `<>` occurrences to the image path you wish the slider to show when that slide is active. Feel free to remove the navigational buttons if you don't need it. Once that is done, simply call the script like this: 36 | 37 | ````javascript 38 | $("#immersive_slider").immersive_slider({ 39 | animation: "bounce", // As usual, you can change the animation to these: slide (default), bounce, fade, slideUp, and bounceUp 40 | slideSelector: ".slide", // This option will let you assign custom selector for each slides in case .slide is already taken 41 | container: ".main", // This option lets you define the container of which the background will appear. Make sure the slider is inside this container as well. 42 | cssBlur: false, // Experimental: In case you don't want to keep adding new data-blurred attributes, trigger this to true and it will generate the blur image on the fly (more info below). 43 | pagination: true, // Toggle this to false if you don't want a pagination 44 | loop: true, // Toggle to false if you don't want the slider to loop. Default is true. 45 | autoStart: 5000 // Define the number of milliseconds before it navigates automatically. Change this to 0 or false to disable autoStart. The default value is 5000. 46 | }); 47 | ```` 48 | And that's all you have to do to get this plugin up and running on your website. Pretty easy right? 49 | 50 | ## Experimental Feature: CSSBlur 51 | The plugin is capable of blurring the first image it finds in each slide, blow them up and use it as a background without you having to manually set each slide a background image. This is done using the CSS3 style called Filter which only works on Chrome, and maybe a performance hog. Use it at your own risk. 52 | 53 | To do this simply toggle the cssBlur option to true like this: 54 | 55 | ````javascript 56 | $("#immersive_slider").immersive_slider({ 57 | cssBlur: true 58 | }); 59 | ```` 60 | 61 | and make sure the images you want to blow up as a background are in each slides like this: 62 | 63 | ````html 64 |
    65 | ... 66 |
    67 |
    68 | 69 | ... 70 |
    71 |
    72 | 73 | ... 74 |
    75 | ... 76 |
    77 |
    78 | ```` 79 | 80 | The script will grab this first image, apply the CSS filter and blow them up with CSS filling the container for you. This is great when you already have an existing slider and you don't want to add a new attribute for the background. 81 | 82 | ## Public Methods 83 | You can also trigger the slider to move programmatically as well: 84 | 85 | ### $.fn.moveNext() 86 | This method allows you to move the slider to the next one. 87 | 88 | ````javascript 89 | $("#immersive_slider").moveNext(); 90 | ```` 91 | 92 | ### $.fn.movePrev() 93 | This method allows you to move the slider to the previous one. 94 | 95 | ````javascript 96 | $("#immersive_slider").movePrev(); 97 | ```` 98 | 99 | If you want to see more of my plugins, visit [The Pete Design](http://www.thepetedesign.com/#design), or follow me on [Twitter](http://www.twitter.com/peachananr) and [Github](http://www.github.com/peachananr). 100 | 101 | ## Other Resources 102 | - Tutorial (Coming Soon) 103 | - [Eike Send's jQuery Swipe Events](https://github.com/eikes/jquery.swipe-events.js) 104 | -------------------------------------------------------------------------------- /jquery.immersive-slider.js: -------------------------------------------------------------------------------- 1 | /* =========================================================== 2 | * jquery-immersive-slider.js v1 3 | * =========================================================== 4 | * Copyright 2013 Pete Rojwongsuriya. 5 | * http://www.thepetedesign.com 6 | * 7 | * Create an immersive slider that changes the 8 | * the whole container to match the viewing slide 9 | * 10 | * https://github.com/peachananr/immersive-slider 11 | * 12 | * ========================================================== */ 13 | 14 | !function($){ 15 | 16 | var defaults = { 17 | animation: "bounce", 18 | slideSelector: ".slide", 19 | container: ".main", 20 | cssBlur: false, 21 | pagination: true, 22 | loop: true, 23 | autoStart: 4000 24 | }; 25 | 26 | /*------------------------------------------------*/ 27 | /* Credit: Eike Send for the awesome swipe event */ 28 | /*------------------------------------------------*/ 29 | 30 | $.fn.swipeEvents = function() { 31 | return this.each(function() { 32 | 33 | var startX, 34 | startY, 35 | $this = $(this); 36 | 37 | $this.bind('touchstart', touchstart); 38 | 39 | function touchstart(event) { 40 | var touches = event.originalEvent.touches; 41 | if (touches && touches.length) { 42 | startX = touches[0].pageX; 43 | startY = touches[0].pageY; 44 | $this.bind('touchmove', touchmove); 45 | } 46 | event.preventDefault(); 47 | } 48 | 49 | function touchmove(event) { 50 | var touches = event.originalEvent.touches; 51 | if (touches && touches.length) { 52 | var deltaX = startX - touches[0].pageX; 53 | var deltaY = startY - touches[0].pageY; 54 | 55 | if (deltaX >= 50) { 56 | $this.trigger("swipeLeft"); 57 | } 58 | if (deltaX <= -50) { 59 | $this.trigger("swipeRight"); 60 | } 61 | if (deltaY >= 50) { 62 | $this.trigger("swipeUp"); 63 | } 64 | if (deltaY <= -50) { 65 | $this.trigger("swipeDown"); 66 | } 67 | if (Math.abs(deltaX) >= 50 || Math.abs(deltaY) >= 50) { 68 | $this.unbind('touchmove', touchmove); 69 | } 70 | } 71 | event.preventDefault(); 72 | } 73 | 74 | }); 75 | }; 76 | 77 | $.fn.transformSlider = function(settings, pos) { 78 | var el = $(this) 79 | switch(settings.animation) { 80 | case 'slide': 81 | el.addClass("ease").css({ 82 | "-webkit-transform": "translate3d(" + pos + "%, 0, 0)", 83 | "-moz-transform": "translate3d(" + pos + "%, 0, 0)", 84 | "-ms-transform": "translate3d(" + pos + "%, 0, 0)", 85 | "transform": "translate3d(" + pos + "%, 0, 0)" 86 | }); 87 | break; 88 | case 'slideUp': 89 | el.addClass("ease").css({ 90 | "-webkit-transform": "translate3d(0, " + pos + "%, 0)", 91 | "-moz-transform": "translate3d(0, " + pos + "%, 0)", 92 | "-ms-transform": "translate3d(0, " + pos + "%, 0)", 93 | "transform": "translate3d(0, " + pos + "%, 0)" 94 | }); 95 | break; 96 | case 'bounce': 97 | el.addClass("bounce").css({ 98 | "-webkit-transform": "translate3d(" + pos + "%, 0, 0)", 99 | "-moz-transform": "translate3d(" + pos + "%, 0, 0)", 100 | "-ms-transform": "translate3d(" + pos + "%, 0, 0)", 101 | "transform": "translate3d(" + pos + "%, 0, 0)" 102 | }); 103 | break; 104 | case 'bounceUp': 105 | el.addClass("bounce").css({ 106 | "-webkit-transform": "translate3d(0, " + pos + "%, 0)", 107 | "-moz-transform": "translate3d(0, " + pos + "%, 0)", 108 | "-ms-transform": "translate3d(0, " + pos + "%, 0)", 109 | "transform": "translate3d(0, " + pos + "%, 0)" 110 | }); 111 | break; 112 | case 'fade': 113 | el.addClass("no-animation").fadeOut("slow", function() { 114 | el.css({ 115 | "-webkit-transform": "translate3d(" + pos + "%, 0, 0)", 116 | "-moz-transform": "translate3d(" + pos + "%, 0, 0)", 117 | "-ms-transform": "translate3d(" + pos + "%, 0, 0)", 118 | "transform": "translate3d(" + pos + "%, 0, 0)" 119 | }).fadeIn("slow"); 120 | }); 121 | 122 | break; 123 | } 124 | } 125 | 126 | $.fn.positionSlides = function(settings, index) { 127 | var el = $(this); 128 | if (settings.animation == "slideUp" || settings.animation == "bounceUp") { 129 | el.css({ 130 | top: (index * 100) + "%" 131 | }); 132 | }else { 133 | el.css({ 134 | left: (index * 100) + "%" 135 | }); 136 | } 137 | } 138 | 139 | 140 | 141 | $.fn.immersive_slider = function(options){ 142 | var settings = $.extend({}, defaults, options), 143 | el = $(this), 144 | cssblur = "", 145 | pagination = ""; 146 | 147 | // Add all the gs sepecific classes 148 | el.addClass("immersive_slider") 149 | el.find(settings.slideSelector).addClass("is-slide"); 150 | 151 | // Use CSS to blur the first image the plugin found automatically 152 | if (settings.cssBlur == true) { 153 | el.find(".is-slide img:first-child").each(function( index ) { 154 | var activeclass = "" 155 | if(index == 0) activeclass = "active" 156 | var img = $(this); 157 | 158 | $(settings.container).addClass("is-container").prepend("
    " + img.clone().wrap("
    ").parent().html() + "
    ") 159 | $("#slide_" + (index + 1) + "_bg").positionSlides(settings, index) 160 | }); 161 | } else { 162 | el.find(".is-slide").each(function( index ) { 163 | var activeclass = "" 164 | if(index == 0) activeclass = "active" 165 | var img = ""; 166 | 167 | $(settings.container).addClass("is-container").prepend("
    " + img + "
    ") 168 | $("#slide_" + (index + 1) + "_bg").positionSlides(settings, index) 169 | }); 170 | } 171 | 172 | if(settings.autoStart != 0 || settings.autoStart != false) { 173 | setInterval(function() { 174 | el.moveNext(); 175 | }, settings.autoStart); 176 | } 177 | 178 | $(settings.container).find(".is-background").wrapAll( "
    "); 179 | el.find(".is-slide").wrapAll( "
    "); 180 | el.find(".is-slide").each(function( index ) { 181 | var activeclass = "" 182 | if(index == 0) activeclass = "active" 183 | $(this).attr("id","slide_" + (index + 1)).addClass(activeclass) 184 | $(this).positionSlides(settings, index) 185 | if(settings.pagination == true) { 186 | pagination += "
    • " 187 | } 188 | }); 189 | 190 | $("
      "+pagination+"
    ").appendTo(el) 191 | 192 | if(settings.pagination == true) { 193 | $(".is-pagination li a").click(function (){ 194 | var page_index = $(this).attr("href"); 195 | 196 | if (!$(this).hasClass("active")) { 197 | el.moveSlider(settings, page_index) 198 | } 199 | return false 200 | }); 201 | } 202 | $(".is-next").click(function() { 203 | el.moveNext(); 204 | return false; 205 | }); 206 | $(".is-prev").click(function() { 207 | el.movePrev(); 208 | return false; 209 | }); 210 | 211 | $.fn.moveSlider = function(settings, page_index) { 212 | var el = $(this), 213 | current = el.find(".is-slide.active"), 214 | next = el.find(".is-slide" + page_index), 215 | bg_current = $(settings.container).find(".is-background.active"), 216 | bg_next = $(settings.container).find(".is-background" + page_index + "_bg"); 217 | if(next) { 218 | current.removeClass("active") 219 | next.addClass("active") 220 | 221 | bg_current.removeClass("active") 222 | bg_next.addClass("active") 223 | $(".is-pagination li a" + ".active").removeClass("active"); 224 | $(".is-pagination li a" + "[href='" + (page_index) + "']").addClass("active"); 225 | } 226 | pos = ((page_index.replace('#slide_','') - 1) * 100) * -1; 227 | el.find(".is-overflow").transformSlider(settings, pos); 228 | $(settings.container).find(".is-bg-overflow").transformSlider(settings, pos); 229 | } 230 | 231 | $.fn.moveNext = function() { 232 | var el = $(this), 233 | total = el.find(settings.slideSelector).length + 1, 234 | page_index_number = parseInt($(this).find(".is-slide.active").attr("id").replace('slide_','')) + 1; 235 | if(page_index_number < total) { 236 | el.moveSlider(settings, "#slide_" + page_index_number) 237 | } else { 238 | if (settings.loop == true ) el.moveSlider(settings, "#slide_1") 239 | } 240 | } 241 | 242 | $.fn.movePrev = function() { 243 | var el = $(this), 244 | total = el.find(settings.slideSelector).length + 1, 245 | page_index_number = parseInt($(this).find(".is-slide.active").attr("id").replace('slide_','')) - 1; 246 | if(page_index_number <= total && page_index_number > 0) { 247 | el.moveSlider(settings, "#slide_" + page_index_number) 248 | }else { 249 | if (settings.loop == true ) el.moveSlider(settings, "#slide_" + (total - 1 )) 250 | } 251 | } 252 | 253 | el.swipeEvents().bind("swipeRight", function(){ 254 | el.movePrev(); 255 | }).bind("swipeLeft", function(){ 256 | el.moveNext(); 257 | }); 258 | 259 | } 260 | 261 | }(window.jQuery); 262 | 263 | 264 | -------------------------------------------------------------------------------- /Demo/jquery.immersive-slider.js: -------------------------------------------------------------------------------- 1 | /* =========================================================== 2 | * jquery-immersive-slider.js v1 3 | * =========================================================== 4 | * Copyright 2013 Pete Rojwongsuriya. 5 | * http://www.thepetedesign.com 6 | * 7 | * Create an immersive slider that changes the 8 | * the whole container to match the viewing slide 9 | * 10 | * https://github.com/peachananr/immersive-slider 11 | * 12 | * ========================================================== */ 13 | 14 | !function($){ 15 | 16 | var defaults = { 17 | animation: "bounce", 18 | slideSelector: ".slide", 19 | container: ".main", 20 | cssBlur: false, 21 | pagination: true, 22 | loop: true, 23 | autoStart: 4000 24 | }; 25 | 26 | /*------------------------------------------------*/ 27 | /* Credit: Eike Send for the awesome swipe event */ 28 | /*------------------------------------------------*/ 29 | 30 | $.fn.swipeEvents = function() { 31 | return this.each(function() { 32 | 33 | var startX, 34 | startY, 35 | $this = $(this); 36 | 37 | $this.bind('touchstart', touchstart); 38 | 39 | function touchstart(event) { 40 | var touches = event.originalEvent.touches; 41 | if (touches && touches.length) { 42 | startX = touches[0].pageX; 43 | startY = touches[0].pageY; 44 | $this.bind('touchmove', touchmove); 45 | } 46 | event.preventDefault(); 47 | } 48 | 49 | function touchmove(event) { 50 | var touches = event.originalEvent.touches; 51 | if (touches && touches.length) { 52 | var deltaX = startX - touches[0].pageX; 53 | var deltaY = startY - touches[0].pageY; 54 | 55 | if (deltaX >= 50) { 56 | $this.trigger("swipeLeft"); 57 | } 58 | if (deltaX <= -50) { 59 | $this.trigger("swipeRight"); 60 | } 61 | if (deltaY >= 50) { 62 | $this.trigger("swipeUp"); 63 | } 64 | if (deltaY <= -50) { 65 | $this.trigger("swipeDown"); 66 | } 67 | if (Math.abs(deltaX) >= 50 || Math.abs(deltaY) >= 50) { 68 | $this.unbind('touchmove', touchmove); 69 | } 70 | } 71 | event.preventDefault(); 72 | } 73 | 74 | }); 75 | }; 76 | 77 | $.fn.transformSlider = function(settings, pos) { 78 | var el = $(this) 79 | switch(settings.animation) { 80 | case 'slide': 81 | el.addClass("ease").css({ 82 | "-webkit-transform": "translate3d(" + pos + "%, 0, 0)", 83 | "-moz-transform": "translate3d(" + pos + "%, 0, 0)", 84 | "-ms-transform": "translate3d(" + pos + "%, 0, 0)", 85 | "transform": "translate3d(" + pos + "%, 0, 0)" 86 | }); 87 | break; 88 | case 'slideUp': 89 | el.addClass("ease").css({ 90 | "-webkit-transform": "translate3d(0, " + pos + "%, 0)", 91 | "-moz-transform": "translate3d(0, " + pos + "%, 0)", 92 | "-ms-transform": "translate3d(0, " + pos + "%, 0)", 93 | "transform": "translate3d(0, " + pos + "%, 0)" 94 | }); 95 | break; 96 | case 'bounce': 97 | el.addClass("bounce").css({ 98 | "-webkit-transform": "translate3d(" + pos + "%, 0, 0)", 99 | "-moz-transform": "translate3d(" + pos + "%, 0, 0)", 100 | "-ms-transform": "translate3d(" + pos + "%, 0, 0)", 101 | "transform": "translate3d(" + pos + "%, 0, 0)" 102 | }); 103 | break; 104 | case 'bounceUp': 105 | el.addClass("bounce").css({ 106 | "-webkit-transform": "translate3d(0, " + pos + "%, 0)", 107 | "-moz-transform": "translate3d(0, " + pos + "%, 0)", 108 | "-ms-transform": "translate3d(0, " + pos + "%, 0)", 109 | "transform": "translate3d(0, " + pos + "%, 0)" 110 | }); 111 | break; 112 | case 'fade': 113 | el.addClass("no-animation").fadeOut("slow", function() { 114 | el.css({ 115 | "-webkit-transform": "translate3d(" + pos + "%, 0, 0)", 116 | "-moz-transform": "translate3d(" + pos + "%, 0, 0)", 117 | "-ms-transform": "translate3d(" + pos + "%, 0, 0)", 118 | "transform": "translate3d(" + pos + "%, 0, 0)" 119 | }).fadeIn("slow"); 120 | }); 121 | 122 | break; 123 | } 124 | } 125 | 126 | $.fn.positionSlides = function(settings, index) { 127 | var el = $(this); 128 | if (settings.animation == "slideUp" || settings.animation == "bounceUp") { 129 | el.css({ 130 | top: (index * 100) + "%" 131 | }); 132 | }else { 133 | el.css({ 134 | left: (index * 100) + "%" 135 | }); 136 | } 137 | } 138 | 139 | 140 | 141 | $.fn.immersive_slider = function(options){ 142 | var settings = $.extend({}, defaults, options), 143 | el = $(this), 144 | cssblur = "", 145 | pagination = ""; 146 | 147 | // Add all the gs sepecific classes 148 | el.addClass("immersive_slider") 149 | el.find(settings.slideSelector).addClass("is-slide"); 150 | 151 | // Use CSS to blur the first image the plugin found automatically 152 | if (settings.cssBlur == true) { 153 | el.find(".is-slide img:first-child").each(function( index ) { 154 | var activeclass = "" 155 | if(index == 0) activeclass = "active" 156 | var img = $(this); 157 | 158 | $(settings.container).addClass("is-container").prepend("
    " + img.clone().wrap("
    ").parent().html() + "
    ") 159 | $("#slide_" + (index + 1) + "_bg").positionSlides(settings, index) 160 | }); 161 | } else { 162 | el.find(".is-slide").each(function( index ) { 163 | var activeclass = "" 164 | if(index == 0) activeclass = "active" 165 | var img = ""; 166 | 167 | $(settings.container).addClass("is-container").prepend("
    " + img + "
    ") 168 | $("#slide_" + (index + 1) + "_bg").positionSlides(settings, index) 169 | }); 170 | } 171 | 172 | if(settings.autoStart != 0 || settings.autoStart != false) { 173 | setInterval(function() { 174 | el.moveNext(); 175 | }, settings.autoStart); 176 | } 177 | 178 | $(settings.container).find(".is-background").wrapAll( "
    "); 179 | el.find(".is-slide").wrapAll( "
    "); 180 | el.find(".is-slide").each(function( index ) { 181 | var activeclass = "" 182 | if(index == 0) activeclass = "active" 183 | $(this).attr("id","slide_" + (index + 1)).addClass(activeclass) 184 | $(this).positionSlides(settings, index) 185 | if(settings.pagination == true) { 186 | pagination += "
    • " 187 | } 188 | }); 189 | 190 | $("
      "+pagination+"
    ").appendTo(el) 191 | 192 | if(settings.pagination == true) { 193 | $(".is-pagination li a").click(function (){ 194 | var page_index = $(this).attr("href"); 195 | 196 | if (!$(this).hasClass("active")) { 197 | el.moveSlider(settings, page_index) 198 | } 199 | return false 200 | }); 201 | } 202 | $(".is-next").click(function() { 203 | el.moveNext(); 204 | return false; 205 | }); 206 | $(".is-prev").click(function() { 207 | el.movePrev(); 208 | return false; 209 | }); 210 | 211 | $.fn.moveSlider = function(settings, page_index) { 212 | var el = $(this), 213 | current = el.find(".is-slide.active"), 214 | next = el.find(".is-slide" + page_index), 215 | bg_current = $(settings.container).find(".is-background.active"), 216 | bg_next = $(settings.container).find(".is-background" + page_index + "_bg"); 217 | if(next) { 218 | current.removeClass("active") 219 | next.addClass("active") 220 | 221 | bg_current.removeClass("active") 222 | bg_next.addClass("active") 223 | $(".is-pagination li a" + ".active").removeClass("active"); 224 | $(".is-pagination li a" + "[href='" + (page_index) + "']").addClass("active"); 225 | } 226 | pos = ((page_index.replace('#slide_','') - 1) * 100) * -1; 227 | el.find(".is-overflow").transformSlider(settings, pos); 228 | $(settings.container).find(".is-bg-overflow").transformSlider(settings, pos); 229 | } 230 | 231 | $.fn.moveNext = function() { 232 | var el = $(this), 233 | total = el.find(settings.slideSelector).length + 1, 234 | page_index_number = parseInt($(this).find(".is-slide.active").attr("id").replace('slide_','')) + 1; 235 | if(page_index_number < total) { 236 | el.moveSlider(settings, "#slide_" + page_index_number) 237 | } else { 238 | if (settings.loop == true ) el.moveSlider(settings, "#slide_1") 239 | } 240 | } 241 | 242 | $.fn.movePrev = function() { 243 | var el = $(this), 244 | total = el.find(settings.slideSelector).length + 1, 245 | page_index_number = parseInt($(this).find(".is-slide.active").attr("id").replace('slide_','')) - 1; 246 | if(page_index_number <= total && page_index_number > 0) { 247 | el.moveSlider(settings, "#slide_" + page_index_number) 248 | }else { 249 | if (settings.loop == true ) el.moveSlider(settings, "#slide_" + (total - 1 )) 250 | } 251 | } 252 | 253 | el.swipeEvents().bind("swipeRight", function(){ 254 | el.movePrev(); 255 | }).bind("swipeLeft", function(){ 256 | el.moveNext(); 257 | }); 258 | 259 | } 260 | 261 | }(window.jQuery); 262 | 263 | 264 | -------------------------------------------------------------------------------- /Demo/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | jQuery Immersive Slider by Pete R. | The Pete Design 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 467 | 468 | 469 |
    470 | 471 |
    472 | 473 |
    474 | 475 |
    476 |

    jQuery Immersive Slider

    477 |

    Create an immersive slider experience with jQuery Immersive Slider

    478 |

    Created by Pete R., Founder of BucketListly

    479 | 480 | Back to The Pete Design 481 | Fork me on GitHub 482 |
    483 |
    484 |
    485 |
    486 |
    487 |
    488 |

    BucketListly

    489 |

    It’s never been easier to watch YouTube on the big screen 490 | Send your favorite YouTube videos from your Android phone or tablet to TV with the touch of a button. It’s easy. No wires, no setup, no nothing. Find out more here.

    491 |
    492 |
    493 | 494 | Slider 1 495 | 496 |
    497 |
    498 |
    499 |
    500 |

    BucketListly Apps

    501 |

    It’s never been easier to watch YouTube on the big screen 502 | Send your favorite YouTube videos from your Android phone or tablet to TV with the touch of a button. It’s easy. No wires, no setup, no nothing. Find out more here.

    503 |
    504 |
    505 | Slider 1 506 |
    507 |
    508 |
    509 |
    510 |

    The Pete Design

    511 |

    It’s never been easier to watch YouTube on the big screen 512 | Send your favorite YouTube videos from your Android phone or tablet to TV with the touch of a button. It’s easy. No wires, no setup, no nothing. Find out more here.

    513 |
    514 |
    515 | Slider 1 516 |
    517 |
    518 | 519 | « 520 | » 521 |
    522 |
    523 |
    524 |
    525 |
    526 | 527 |
    528 |
    529 | 537 |
    538 | 539 | 540 | 547 | 548 | 549 | 550 | --------------------------------------------------------------------------------