Divide page into two parts and scroll both parts into opposite direction

Question

I want to design a webpage like this...can anyone help me..how to do this

demo is here http://www.valentinagallo.us/site/#/home

any help would be appreciated

Answer 1

I created basic script special for you. Please see my idea for the solution.

First you must create DIV with fixed position and set the z-index to hide real content. Now, you can create DIV with two slide sections: left and right to animate and put contents dynamically.

See the demo: http://jsfiddle.net/luckyjquery/q2hLfo2q/

NOTE : This is basic code to show you my idea. I can develop it for you.

The HTML:

<button>Change slide</button>
<div class="content">
    <div class="left"></div>
    <div class="right"></div>
</div>

The CSS:

.content {
    position: relative;
    height: 350px;
    width: 90%;
    overflow: hidden;
}
.content > div {
    position: absolute;
    height: 100%;
    width: 50%;
    top: 0px;
}
.content .left{
    left: 0px;
    background-color: #d93434;
} 
.content .right{
    right: 0px;
    background-color: #b3d934;
} 

The jQuery:

;(function ($) {
    //Functions
    var fns = { 
        /*Select basic elemments */
        button: $('button'),
        leftBox: $('.left'),
        rightBox: $('.right'),
        /* Initialize */
        init: function(){
            //Click the button
            fns.button.on('click', function(e){
                e.preventDefault();
                //Change slide
                fns.changeSlide();
            });
        },
        /*Animate the DIVs*/ 
        changeSlide: function(){
            //Animate the left div
            fns.leftBox.animate({
                top: '-='+fns.leftBox.height(),
                opacity: 0.0
            }, 255, function(){
                 /* You can change content in this place*/
            }).animate({
                top: 0,
                opacity: 1.0
            }, 255);
            //Animate the right div
            fns.rightBox.animate({
                top: '+='+fns.leftBox.height(),
                opacity: 0.0
            }, 255, function(){
                 /* You can change content in this place*/
            }).animate({
                top: 0,
                opacity: 1.0
            }, 255);
        }
    };
    //Start
    fns.init();

})(jQuery); //The end