Diagonal Scrolling

For those of you tired of your banner slider  just sliding left and right or up and down here is a nice little plugin that will allow you to slide diagonally!

jQuery Plugin

Copy and paste this code and place it in a file and link to it in the head.

var wScroll;
var panelLength;
var leftNum;
var topNum;
var currentSlide;

function setScroll(className, scrollHeight){

var l = 0;
var t = 0;
var nDiv = $(className+' div').length;

$(className+' div').each(function(){
$(this).css({'left' : l+'px', 'top' : t+'px', 'width' : $(window).width()+'px'});
l += window.wScroll;
t += scrollHeight;
});

var tempNum = currentSlide - 1;
var newWidth = $(window).width();

if (tempNum != 0){
var newLeft = tempNum * '-'+newWidth;
} else {
var newLeft = 0;
}

console.log("NEW LEFT: "+newLeft);

$(className).css({'width' : window.wScroll*nDiv+'px', 'left': '-' + newLeft + 'px' });
}

function diaScroll(className, scrollHeight){

window.wScroll = $(window).width();
window.leftNum = 0;
window.topNum = 0;
window.currentSlide = 1;

var l = 0;
var t = 0;
var nDiv = $(className+' div').length;

window.panelLength = Math.floor(nDiv) * window.wScroll;

$(className+' div').each(function(){
$(this).css({'left' : l+'px', 'top' : t+'px', 'width' : window.wScroll+'px'});
l += window.wScroll;
t += scrollHeight;
});

$(className).css({'width' : window.wScroll*nDiv+'px', 'left': '0px', 'top': '0px' });

$(".leftBt").click(function(){
if(window.leftNum != 0){
window.topNum -= scrollHeight;
window.leftNum -= window.wScroll;
$(className).animate({ "left": "-" + window.leftNum + "px", "top": "-" + window.topNum + "px"}, 1000);
window.currentSlide --;
return false;
}
});

$(".rightBt").click(function(){
if(window.leftNum == window.panelLength-window.wScroll){
window.topNum = 0;
window.leftNum = 0;
$(className).animate({ "left": "0px", "top": "0px"}, 1000);
window.currentSlide = 1;
return false;
}
if(window.leftNum != window.panelLength-window.wScroll){
window.topNum += scrollHeight;
window.leftNum += window.wScroll;
$(className).animate({ "left": "-" + window.leftNum + "px", "top": "-" + window.topNum + "px"}, 1000);
window.currentSlide ++;
return false;
}
});

}

Calling the Plugin

Copy the code below. Change ‘.wrap’ to what ever is the name of your containing div. the second argument is the height in pixels between top of one slide and the top of the next. This basically determines the amount of diagonal movement.

The second function called in resize allows the user to resize the window and it will still work, miss this function out at your peril. Also make sure to put the same values in ‘setScroll’ as in ‘diaScroll’.

jQuery(document).ready(function($){

diaScroll('.wrap', 200);

$(window).resize(function(){
setScroll('.wrap', 200);
});
});

HTML

This gives you an idea of how the html should look.  Basically each of the divs that sit in wrap represents a slide. You can put what ever you like in that div and style it accordingly, for the demo I’ve used an image centre aligned. The jQuery then places each slide next to the other  horizontally  and moves each one down by the amount specified in the second argument when calling the function. Then ‘.wrap’ is moved absolutely within the relatively positioned ‘.windowdiv’.

Note that the ‘Previous’ and ‘Next’ buttons must have the class ‘leftBt’ and ‘rightBt’ respectively.

<div class="windowdiv">
<div class="wrap">
<div>
<img src="/images/my-image1.png" />
</div>
<div>
<img src="/images/my-image2.png" />
</div>
<div>
<img src="/images/my-image3.png" />
</div>
<div>
<img src="/images/my-image4.png" />
</div>
<div>
<img src="/images/my-image5.png" />
</div>
</div>
<span class="leftBt">Previous</span>
<span class="rightBt">Next</span>
</div>

CSS

This is the CSS that I’ve used. Copy and Paste it into your CSS file but feel free to have a play with it.

body, html{
width:100%;
height:100%;
margin:0;
padding:0;
}
.windowdiv{
position:relative;
overflow:hidden;
width:100%;
height:790px;
}
.wrap{position:absolute; left:0px;}
.wrap div{
margin-top:50px;
height:900px;
position:absolute;
text-align:center;
}
.leftBt,.rightBt{
position:absolute;
top:50%;
font-size:100px;
font-weight:bold;
cursor:pointer;
background:rgba(255, 255, 255, 0.7);
padding: 0 30px 20px;
}
.leftBt{
left:20px;
}
.rightBt{
right:20px;
}