In this tutorial you will lean how to create a responsive layered slider. The slider will have multiple slides, each slide will have multiple layers which can have a different fade in effect.
The entire slider works by using just a JavaScript document and you don't have to attach any CSS style sheets to use it. Each layer will have 18 possible effects which you can use to your liking. All animations are created by inserting CSS code into the page using JavaScript
I was able to make the slider responsive by recalculating all layers sizing and positioning every time the browser is resized. This is quite a complex tutorial and if you want to use it in your projects i would advise you to read the entire tutorial.
Check Andrey Gordeev work on behance, he provided the images used in this demo.
HTML
This is the basic html structure:
<div class="sim-slider" data-width="2550" data-height="1240" data-animation="250" data-current="true" data-progress="true">
<div class="sim-slider-inner">
</div>
</div>I used the attributes data-width and data-height to indicate the maximum width and height of the slider, data-animation is the time it takes for animations on each layer, data-current can be set to true or false and it will show or not show the current slide indicator at the bottom, data-progress can be set to true or false and it will show the progress of the current slide.
<div class="sim-slider-slide">
<div class="sim-slider-layer" data-effect="fadeInDown" data-width="1052" data-height="174" data-left="751" data-top="50"><img src="_assets/layer_0025.png" /></div>
<div class="sim-slider-layer" data-effect="fadeInLeft" data-width="694" data-height="841" data-left="54" data-top="277"><img src="_assets/layer_0027.png" /></div>
<div class="sim-slider-layer" data-effect="fadeInUp" data-width="1019" data-height="848" data-left="770" data-top="277"><img src="_assets/layer_0026.png" /></div>
<div class="sim-slider-layer" data-effect="fadeInRight" data-width="694" data-height="841" data-left="1811" data-top="277"><img src="_assets/layer_0028.png" /></div>
</div>
After creating the main structure we will go ahead and insert the slides. You can insert as many slides as you want. In each slide there will be a number of layers and here as well you can insert as many layers as you want. Please keep in mind that inside each layer you can only insert images, png images are perfect for this. You should insert images with a size that makes sense related to the maximum sizes of the slider.
You will need to write the sizes of that layer using the attributes data-width and data-height as well as setting the distance from the layer to the left margin of the slider using data-left and the distance from the layer to the top of the slider using data-top, data-effect is the attribute that reflects the display effect for that particular layer.
You can use the following effects:
data-effect="bounceIn"
data-effect="fadeIn"
data-effect="rollIn"
data-effect="fadeInDown"
data-effect="fadeInDownBig"
data-effect="fadeInUp"
data-effect="fadeInUpBig"
data-effect="fadeInLeft"
data-effect="fadeInLeftBig"
data-effect="fadeInRight"
data-effect="fadeInRightBig"
data-effect="flipInX"
data-effect="flipInY"
data-effect="zoomIn"
data-effect="zoomInDown"
data-effect="zoomInUp"
data-effect="zoomInLeft"
data-effect="zoomInRight"CSS
Nothing to see here, keep scrolling !
JavaScript
Let's start by creating some variables that will make our work easier:
//options
var selected_element = $('.sim-slider');
var controls_color = 'rgba(150,40,189,0.5)';
var controls_hover_color = 'rgba(150,40,189,1)';
var progress_size = '3';
var current_slide = 1;
var per_slide_duration = selected_element.attr('data-animation');
var end_duration = 3000;selected_element is the element that we are applying the slider to, controls_coloris the default color for the progress bad and for the current slider indicators, controls_hover_color is the darker shade of color for the indicators and it will highlight the current slide, progress_size is the height in pixels of the progress bar, current_slide is the slide number at which the slider will start from, per_slide_duration is the duration it will take for each layer to show, end_duration is the pause duration after all layer are displayed in that particular slide.
You can modify the following variables: controls_color, controls_hover_color, progress_size, current_slide, end_duration.
Because this is a complex project I've put everything into functions.
The first function is style_page(), this function appends the CSS effects in the header of the document. Those style sheets will create all 18 effects. Because there is a lot of CSS i will only include a small portion of that code here, if you want to see the rest go ahead and download the files for this tutorial.
//style function;
function style_page(){
var css_style = '<style>.animate{-webkit-animation-duration:'+(per_slide_duration/1000)+'s;animation-duration:'+(per_slide_duration/1000)+'s;-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes bounceIn{0%,100%,20%,40%,60%,80%{-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}..@keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}100%{opacity:1;-webkit-transform:none;transform:none}}.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)}}@keyframes rollOut{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)}}.rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}</style>';
$('head').append(css_style);
}Thinks to keep in mind: the string from css_style variable needs to be on a single line else you will get errors.
The next function is check_overlay()
//overlay function
function check_overlay(){
//html loop
var slider = selected_element;
slider.css("position","relative");
slider.css("overflow","hidden");
var current = slider.attr("data-current");
var progress = slider.attr("data-progress");
if(current=='true'){
i = 0;
text = '';
while (i < slider.find(".sim-slider-slide").length) {
i++;
if(i==current_slide){background_color = 'background-color:'+controls_hover_color+';';}else{background_color = 'background-color:'+controls_color+';';}
text += '<div class="sim-slider-current-inner-tab" data-slide="'+i+'" style="width:10px;height:10px;float:left;margin-left:5px;margin-right:5px;'+background_color+'-moz-border-radius: 50% 50% 50% 50%;-webkit-border-radius: 50% 50% 50% 50%;border-radius: 50% 50% 50% 50%;"></div>';
}
slider.prepend('<div class="sim-slider-current" style="width:100%;height:10px;position:absolute;left:0px;bottom:20px;z-index:5;"><div class="sim-slider-current-inner" style="margin-left:auto;margin-right:auto;height:10px;width:'+((slider.find(".sim-slider-slide").length)*20)+'px;">'+text+'</div></div>');
}
if(progress=='true'){
slider.prepend('<div class="sim-slider-progress" style="width:1px;height:'+progress_size+'px;position:absolute;left:0px;background-color:'+controls_color+';z-index:5;"></div>');
}
} This function will append, if they are activated, the html of 'current slide indicator' and the html of 'progress bar'.
The next function is resize(). This is the most complex function in this tutorial. First we will create some variables:
//resize function
function resize(){
//slider loop
var slider = selected_element;
var slider_inner = slider.children(".sim-slider-inner");
var width = selected_element.attr("data-width");
var height = selected_element.attr("data-height");
var ratio = Math.round(width/height*100)/100;
var window_width = window.innerWidth;
}We will use those variables to the slider, slides and the layers each time you resize the browser.
slider_inner.css("margin-left","auto").css("margin-right","auto");
slider.css("float","left").css("width","100%");
if(window_width<=width){
slider.height(window_width/ratio);
slider_inner.height(window_width/ratio).css("width","100%");
}else{
slider.height(height);
slider_inner.width(width).height(height);
}
In order to change all the slides we will have to loop thru them.
//slide loop
slider.find(".sim-slider-slide").each(function() {
var slide = $(this);
slide.css("position","relative");
if(window_width<=width){
slide.height(window_width/ratio).css("width","100%");
}else{
slide.width(width).height(height);
}
}); Now, inside each slide we have to create another loop to resize each layer.
//layer loop
slide.find(".sim-slider-layer").each(function() {
var layer = $(this);
var layer_width = layer.attr("data-width");
var layer_height = layer.attr("data-height");
var layer_ratio = Math.round(layer_width/layer_height*100)/100;
var layer_width_percentage = (layer_width/width)*100;
var layer_with_percentage_pixel = (window_width/100)*layer_width_percentage;
var layer_left = layer.attr("data-left");
var layer_top = layer.attr("data-top");
var layer_left_percentage = (layer_left/width)*100;
var layer_top_percentage = (layer_top/height)*100;
layer.css("position","absolute");
if(window_width<=width){
layer.width(layer_with_percentage_pixel).height(layer_with_percentage_pixel/layer_ratio).css("left",layer_left_percentage+"%").css("top",layer_top_percentage+"%");
layer.children("img").width(layer_with_percentage_pixel).height(layer_with_percentage_pixel/layer_ratio)
}else{
layer.children("img").width(layer_width).height(layer_height);
layer.width(layer_width).height(layer_height).css("left",layer_left+"px").css("top",layer_top+"px");
}
});
In this loop we will change the with, height and distance from left and from the top of the layer. All those properties will change each time you resize the browser, that is why we will have to instantiate this function each time that happens.
Think about that for a second each time you resize your browser the script will loop all the slides then loop all the layers and also calculate with, height and distances for all the layers. That is crazy.
Enough with the thinking let's move to the next function.
//progress bar function
function progress_bar(timer){
var progress = selected_element.attr("data-progress");
if(progress=='true'){
selected_element.find('.sim-slider-progress').animate({
width: "100%"
}, timer, function() {
selected_element.find('.sim-slider-progress').width(0);
});
}
} progress_bar() function will make the progress bar wider within a given amount of time, this function will in instantiated later in another function.
//show hide layers
function check_layer(element,type){
var effect = element.attr("data-effect");
var fadein_effect = '';
var fadeout_effect = '';
if(effect=='bounceIn'){fadeout_effect='bounceOut'; fadein_effect = effect; }
if(effect=='fadeIn'){fadeout_effect='fadeOut'; fadein_effect = effect; }
if(effect=='rollIn'){fadeout_effect='rollOut'; fadein_effect = effect; }
if(effect=='fadeInDown'){fadeout_effect='fadeOutUp'; fadein_effect = effect; }
if(effect=='fadeInDownBig'){fadeout_effect='fadeOutUpBig'; fadein_effect = effect; }
if(effect=='fadeInUp'){fadeout_effect='fadeOutDown'; fadein_effect = effect; }
if(effect=='fadeInUpBig'){fadeout_effect='fadeOutDownBig'; fadein_effect = effect; }
if(effect=='fadeInLeft'){fadeout_effect='fadeOutLeft'; fadein_effect = effect; }
if(effect=='fadeInLeftBig'){fadeout_effect='fadeOutLeftBig'; fadein_effect = effect; }
if(effect=='fadeInRight'){fadeout_effect='fadeOutRight'; fadein_effect = effect; }
if(effect=='fadeInRightBig'){fadeout_effect='fadeOutRightBig'; fadein_effect = effect; }
if(effect=='flipInX'){fadeout_effect='flipOutX'; fadein_effect = effect; }
if(effect=='flipInY'){fadeout_effect='flipOutY'; fadein_effect = effect; }
if(effect=='zoomIn'){fadeout_effect='zoomOut'; fadein_effect = effect; }
if(effect=='zoomInDown'){fadeout_effect='zoomOutDown'; fadein_effect = effect; }
if(effect=='zoomInUp'){fadeout_effect='zoomOutUp'; fadein_effect = effect; }
if(effect=='zoomInLeft'){fadeout_effect='zoomOutLeft'; fadein_effect = effect; }
if(effect=='zoomInRight'){fadeout_effect='zoomOutRight'; fadein_effect = effect; }
if(type == 'show'){
element.show().addClass('animate '+fadein_effect);
setTimeout( function() {element.removeClass('animate '+fadein_effect)},per_slide_duration);
}
if(type == 'hide'){
element.addClass('animate '+fadeout_effect);
setTimeout( function() {element.removeClass('animate '+fadeout_effect).hide()},per_slide_duration);
}
}
check_layer() function will apply the appropriate effect to a layer. This is done by adding and removing CSS classes.
The next function will hide all the slides and all the layers. We will need to do this as each slide or layer needs to be hidden at the beginning, we will show or hire layers using another function.
//animate slider function
function hide_slides(){
$('.sim-slider-slide').hide();
$('.sim-slider-layer').hide();
}
The last function we will need is the cycle() function. This function will be used to move the slider from one slide to another.
//cycle slides function
function cycle(){
var this_slide = $('.sim-slider-slide:eq('+(current_slide-1)+')');
this_slide.show();
var total_layers = this_slide.find('.sim-slider-layer').length;
var total_duration = ((total_layers*2)*per_slide_duration)+end_duration;
progress_bar(total_duration);
$(".sim-slider-current-inner-tab").css('background-color',controls_color);
$(".sim-slider-current-inner-tab[data-slide='"+current_slide+"']").css('background-color',controls_hover_color);
function doSetTimeout(i,total_layers) {
setTimeout( function() { check_layer(this_slide.find(".sim-slider-layer:eq("+(i)+")"),'show'); }, i*per_slide_duration );
setTimeout( function() { check_layer(this_slide.find(".sim-slider-layer:eq("+(i)+")"),'hide'); }, (total_layers*per_slide_duration)+(i*per_slide_duration)+end_duration);
}
for (var i = 0; i < total_layers; ++i){doSetTimeout(i,total_layers);}
if(selected_element.find('.sim-slider-slide').length==current_slide){current_slide=1;}else{current_slide++; }
setTimeout( function() {this_slide.hide();},total_duration);
setTimeout(cycle,total_duration);
}
What this function does is to instantiate the progress bar function, set timers for when to hide and show each layer and then set another timer to reinstantiate cycle() function multiple times using a different interval.
Using this in your projects
To incorporate this in your projects you will first have to attach jquery plugin then the JavaScript document 'responsive-layered-slider.js' located inside the download provided here. After that create the basic structure highlighted in the HTML, create the appropriate slides and layers and at the end put the proper attributes for each layer as well as the global ones for the slider.
Please keep in mind that this slider only supports images and i would advise you to first create the slides in Photoshop and then put then in HTML
Subscribe to our newsletter to get notified when there is a new tutorial.
