você pode ver um aplicativo em: http://beuretv.ch
você JS
window.onload = function(){
//positionement du block contenu
var hHeight = document.body.clientHeight/10;
var wWidth = document.body.clientWidth;
document.getElementById('reception').style.width = wWidth + "px";
document.getElementById('actual').style.width = wWidth + "px";
document.getElementById('content').style.width = wWidth*2 + "px";
document.getElementById('actual').innerHTML = document.getElementById('accueil').innerHTML;
}
window.onresize = function(){
//positionement du block contenu
var hHeight = document.body.clientHeight/10;
var wWidth = document.body.clientWidth;
document.getElementById('reception').style.width = wWidth + "px";
document.getElementById('actual').style.width = wWidth + "px";
document.getElementById('content').style.width = wWidth*2 + "px";
}
function scrolltoDiv(id_divto){
//check if div must mouve
var contentDiv = document.getElementById(id_divto).innerHTML;
document.getElementById('reception').innerHTML = contentDiv;
if(document.getElementById('reception').offsetLeft == window.pageXOffset){
clearInterval(Divabord);
}else{
var Divabord = setInterval(function(){
var currentPos = window.pageXOffset;
var destinatPos = document.getElementById('reception').offsetLeft;
var calcPos = parseInt(destinatPos)-(currentPos);
//vitesse initiale du scroll
var x = 25;
//smoot a end
var xu = 25;
var xul = parseInt(currentPos)+(xu);
//incrementation de la vitesse
var incrementX;
// on va a droite
if(currentPos < destinatPos){
if(xul > destinatPos){
x= 1;
}
var incrementX = x++;
positionX = parseInt(currentPos)+(incrementX);
}
//on va a gauche
if(currentPos > destinatPos){
if(xul < destinatPos){
x= 1;
}
var incrementX = x++;
positionX = parseInt(currentPos)-(incrementX);
}
$(window).scrollLeft(positionX);
if(document.getElementById('reception').offsetLeft == window.pageXOffset){
clearInterval(Divabord);
document.getElementById('reception').id = "actual_wait";
document.getElementById('actual').id = "reception";
document.getElementById('actual_wait').id = "actual";
document.getElementById('reception').innerHTML = "";
}
},1);
}
}
seu html
<div class="page" id="actual"></div>
<div class="page" id="reception"></div>
Mas se você quiser um resultado mais suave, substitua:
// on va a droite
if(currentPos < destinatPos){
$("html,body").animate({"scrollLeft":destinatPos},200);
}
//on va a gauche
if(currentPos > destinatPos){
$("html,body").animate({"scrollLeft":destinatPos},200);
}
e adicione isso antes de clearInterval:
$(window).scrollLeft(destinatPos);
se você usar o segundo método, use setTimeout e não setInterval 🙂