Question

Does anybody know how can i achieve that “slider site” functionality like in here http://dawidtomczyk.pl/

Click on navigation home etc.

After reviewing each of the plug-ins that was used along with that site, none of them where related to the “site slide” effect. After viewing the source code, I think He accomplished it with a custom function for that containing $(window).scroll() and i really didn’t understand how I can accomplish that ‘effect’.

Also I would like to add that I prefer achieving it as much cross-browser as it can get.
IE8+, and the new ones.

Can it be done?

Answer 1

The idea for doing what you have described would be:

1. LAYOUT

a. Create a container div with 100% width and overflow-x:hidden.

b. Create a child div with width (pages * 100) % (where pages is the number of different pages that you want to display) and position:relative (to animate it later).

c. Each page is a div contained within the previous div (the one described in b.). These divs have to be adjacent to each other so we would use display: inline-block; and set them to a width of (100 / pages) %.

The structure would be something like this to display just 2 pages:

   <div id="slider">
       <div id="pages">
           <div>
               <!-- Content of page 1 -->
           </div><!--
           --><div>
               <!-- Content of page 2 -->
           </div>
       </div>
   </div>

And the CSS:

   #slider {
       overflow-x: hidden;
       width: 100%;
   }

   #pages {
       position: relative;
       width: 200%;
   }

   #pages > div {
         display: inline-block;
         width: 50%;
   }

A “graphic” visualization (is not very accurate because all the divs should be overlapped, but I hope it helps to visualize the layout).

+-SLIDER----------------------------+
|+---PAGES--------------------------------------------------------------+
||+---------------------------------++---------------------------------+|                                 
|||                                 ||                                 ||
|||            PAGE 1               ||             PAGE 2              ||
|||                                 ||                                 ||
|||                                 ||                                 ||
|||                                 ||                                 ||
|||                                 ||                                 ||
||+---------------------------------++---------------------------------+|
|+----------------------------------------------------------------------+
+------------------------------------+

Because the property overflow-x is set to ‘hidden’, PAGE 2 is not showing.

2. ANIMATION

The animation can be done by animating the ‘left’ property from the pages div, taking into account the current width of the slider div.

I have tried to outline the idea of how to achieve the effect that you have described. If you need the actual code ask me. I hope I was helpful.