Sliding and rotating pages website using jQuery

Question

It will be so great if here, we can code and build a website with sliding left/right pages.

But first, let me explain the concept. As we know, a website is composed of many pages. To navigate pages to pages we are redirecting the user to the good url and loading a new page. What I want to do, is avoiding this loading time, load all pages, display ones that the user want to see and hide others.

But why do I want to load all pages??? I want to do it to create one of the best website by displaying a page (the active page 80% width/center of the screen), the beginning of the next page on the right side (the next page 10% width/right), the end of the previous page (the previous page 10% width/left).

Did you get it? good =)

What I have done : - Build an index page where we are loading all differentes pages (currently 5) - Add classes to all theses page to retrieve id and work with it - Add my js function with the sliding code effect

Here is my js function. Everything is working like this without animations:

/* Make the process working first --------------------------------*/

// When we are clicking on any element of the parent #navigation (the div)
// We are running this function 
// We are focusing this tag to get a list of all the pages
$('li.menu-item').live('click', function(event){

/* GET THE PAGE ID OF THE CLICKING ELEMENT 
-----------------------------*/
var page_id_target = event.target.id;

console.log("page id: "+page_id_target);

// this <> li.menu-item
var all_pages_menu = $('li.menu-item');
console.log(all_pages_menu);    

var pages_numbers = all_pages_menu.length;
console.log("Sum of pages: "+pages_numbers);    

//get the list of li menu
console.log("target class of the focus element: "+all_pages_menu[page_id_target-1].className);

//get the list of div
console.log($('#content .page'));

// Desactive all li class 
$('.page, .menu-item').removeClass('active').removeClass('next').removeClass('previous');
$('.page').addClass('hidden');

//Define the number id of the next page and the previous 
var next = parseInt(page_id_target)+1;
var previous = parseInt(page_id_target)-1;
    //  console.log("page_id_target: "+page_id_target);
    //  console.log("next: "+next);
    //  console.log("previous: "+previous);
if (page_id_target==1)
{
    //Update Menu
    $('ul#navigation #'+page_id_target).addClass('active');
    $('ul#navigation #'+next).addClass('next');
    $('ul#navigation #'+pages_numbers).addClass('previous');                        

    //Update DOM
    $('#content .'+page_id_target).addClass('active').removeClass('hidden');
    $('#content .'+next).addClass('next').removeClass('hidden');
    $('#content .'+pages_numbers).addClass('previous').removeClass('hidden');               
}

else if (page_id_target==pages_numbers)
{
    //Update Menu           
    $('ul#navigation #'+page_id_target).addClass('active');
    $('ul#navigation #'+1).addClass('next');
    $('ul#navigation #'+previous).addClass('previous');

    //Update DOM
    $('#content .'+page_id_target).addClass('active').removeClass('hidden');
    $('#content .'+1).addClass('next').removeClass('hidden');
    $('#content .'+previous).addClass('previous').removeClass('hidden');        
}

else
{
    //Update Menu
    $('ul#navigation #'+page_id_target).addClass('active');
    $('ul#navigation #'+next).addClass('next');
    $('ul#navigation #'+previous).addClass('previous');

    //Update DOM
    $('#content .'+page_id_target).addClass('active').removeClass('hidden');
    $('#content .'+next).addClass('next').removeClass('hidden');
    $('#content .'+previous).addClass('previous').removeClass('hidden');    
}

But When I'm trying to have some animation in my function for example like this :

            else
            {
                //Update Menu
                $('ul#navigation #'+page_id_target_right).addClass('active');
                $('ul#navigation #'+next_right).addClass('next');
                $('ul#navigation #'+previous_right).addClass('previous');



                /*
                // Update DOM
                // Work without Animations
                $('#content .'+page_id_target_right).addClass('active').removeClass('hidden');
                $('#content .'+next_right).addClass('next').removeClass('hidden');
                $('#content .'+previous_right).addClass('previous').removeClass('hidden');  
                */      

                // Retrieve the id of the previous old page 
                previous_right_old = previous_right-1;
                console.log("previous_right_old: "+previous_right_old);

                                /*  
                                    $('#content .'+page_id_target_right).addClass('hidden');
                                    $('#content .'+next_right).addClass('hidden');
                                    $('#content .'+previous_right).addClass('hidden');
                                    $('#content .'+previous_right_old).removeClass('hidden');

                                */

                // This is the old previous page
                // Set up the page on the left and the background (this is for initialise it, Otherwise the first the background won't follow)
                // Add the animate action to the left 
                // The size of one page is 78%
                // Adding the hiding class to let the page on the left (-151%)
                $('#content .'+previous_right_old).css({ 'left' : '-73%','background-color' : '#EAEAEA'}).animate({'left' : '-151%'}, duration, easing, function(){$('#content .'+previous_right_old).addClass('hidden')});

                // This is the previous page
                // Active to previous
                // Animate it 
                $('#content .'+previous_right).animate({'left' : '-73%', 'margin-right' : '0%', 'margin-left' : '0%', 'backgroundColor' : '#EFF0F1' }, duration, easing, function(){$('#content .'+previous_right).removeClass('hidden').addClass('previous')});                        



                // Add the left/right margin to respect the active class and attribute good classes after
                $('#content .'+page_id_target_right).animate({'left' : '5%', 'margin-right' : '6%', 'margin-left' : '6%', 'backgroundColor' : '#FFFFFF' }, duration, easing, function(){$('#content .'+page_id_target_right).addClass('active').removeClass('hidden')});

                // load the next page on the right of the screen
                // Adding the next class so the page will be correctly displaying
                // Set up the page on the right 
                // Animate it to the left with a page with of 78%
                $('#content .'+next_right).addClass('next').appendTo('#content').css({ 'left' : '173%', 'backgroundColor' : '#EFF0F1'}).animate({'left' : '95%'}, duration);



                            //animate previous to next
                            //$('#content .previous').css({ 'left' : '-73%'}).animate({'left' : '-151%'}, duration, easing, function(){$(this).remove();})
                            //.clone().addClass('next').removeClass('previous').appendTo('#content').css({ 'left' : '173%'}).animate({'left' : '95%'}, duration);               

            }

I do have some bug to fix and I don't really see where are my errors...

So If there is any good developer who would like to work with me on this awesome template, that could be great. Thanks for reading and don't esitate to ask me more code. Cheers

Answer 1

i made a similar plugin, dedicated to flip to a non sequencial way, so it not show prev/next

it also allow up/down and fade effect

i write it for this website here it is full screen flip but can be done in any container (here it is on the body)

designed to allow callback at each page state, and dynamic content load

it also use jquery.queue system to put all move list in fifo list and allow trimming of unusefull movement

so, not perfect, not what you really want but can maybe give you some inspiration, the code is under creative common 3.0 by-nc-sa