Menu
I'm trying to implement a sliding horizontal layout with a header banner.
This is the HTML structure:
<body>
<div id="header">
<div><a href="#one"> one </a></div>
<div><a href="#two"> two </a></div>
<div><a href="#thr"> thr </a></div>
</div>
<div id="one" class="panel"> </div>
<div id="two" class="panel"> </div>
<div id="thr" class="panel"> </div>
</body>
The header is fixed, and panels have been provided with a gradient background (middle panel has a different color for debug purpose). Here is the CSS:
body {
width: 6000px;
overflow: hidden;
}
.panel {
width: 33.3%;
float: left;
padding-left: 30px;
padding-right: 1040px;
margin-top: -75px;
height: 960px;
background-image: linear-gradient(to bottom, #0B88FF, #95EEFF);
}
#header {
position: fixed;
height: 75px;
margin-top: 25px;
}
#two{
background-image: linear-gradient(to bottom, #0B8800, #9E5EFF);
}
And finally the function which manages the animation between panels:
$(document).ready(function() {
$("#header a").bind("click", function(event) {
event.preventDefault();
var target = $(this).attr("href");
$("html, body").stop().animate({
scrollLeft: $(target).offset().left,
scrollTop: $(target).offset().top
}, 1200);
});
});
The problems I'm facing are the following:
1) I tried to implement a jQuery function to run the slide animation when user uses the mouse wheel, but none of my tests work...the structure is always the same:
$(window).scroll(function() {
if ($(this).scrollTop() > 0) {
var target // still not able to figure out who should i target
$("html, body").stop().animate({
//to the target >,<
}
});
2) When my browser window is at 100% size everything seems to work well, but if I reduce or increase the zoom everything mess up >,< I notice it is possible to handle this, and here is an example:
714
To get your targets you could just fill an array witj the element with panel class, and then use an index to move through the panels.
Finally, if you have problems with the scroll on window resize, you could bind this event and do whatever you want
Take a look at MouseWheelEvent.
And try this example with your code:
$(document).ready(function() {
$("#header a").bind("click", function(event) {
event.preventDefault();
var target = $(this).attr("href");
$("html, body").stop().animate({
scrollLeft: $(target).offset().left,
scrollTop: $(target).offset().top
}, 1200);
});
var scroll_targets = $(".panel");
var scroll_targets_index = 0;
$(window).on('DOMMouseScroll mousewheel', function (e) {
if (e.originalEvent.wheelDelta < 0) {
if(scroll_targets_index < scroll_targets.length-1){
var where = ++scroll_targets_index;
$("html, body").stop().animate({
scrollLeft: $(scroll_targets[where]).offset().left,
scrollTop: $(scroll_targets[where]).offset().top
}, 1200);
}
}
else {
var where;
if(scroll_targets_index > 0){
where = --scroll_targets_index;
}
else{
where = 0;
}
$("html, body").stop().animate({
scrollLeft: $(scroll_targets[where]).offset().left,
scrollTop: $(scroll_targets[where]).offset().top
}, 1200);
}
});
$(window).resize(function () {
$('html,body').scrollTop($(scroll_targets[where]).offset().top);
$('html,body').scrollLeft($(scroll_targets[where]).offset().left);
});
});#body {
width: 6000px;
overflow: hidden;
}
.panel {
width: 33.3%;
float: left;
padding-left: 30px;
padding-right: 1040px;
margin-top: -75px;
height: 960px;
background-image: linear-gradient(to bottom, #0B88FF, #95EEFF);
}
#header {
position: fixed;
height: 75px;
margin-top: 25px;
}
#two{
background-image: linear-gradient(to bottom, #0B8800, #9E5EFF);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="body">
<div id="header">
<div><a href="#one"> one </a></div>
<div><a href="#two"> two </a></div>
<div><a href="#thr"> thr </a></div>
</div>
<div id="one" class="panel"> </div>
<div id="two" class="panel"> </div>
<div id="thr" class="panel"> </div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
