Home/ Questions/Q 6197137
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T03:46:01+00:00

I am looking to create a site composed of different panels. Let’s say we

  • 0

I am looking to create a site composed of different panels.
Let’s say we have 4 panels. Each panel takes up the whole screen at a given point in time, and looks something similar to this

--------------------------------
|     home     ||     about    |
|    a menu    ||    a menu    |
|              ||              |
--------------------------------
--------------------------------
|    contact   ||     jobs     |
|    a menu    ||    a menu    |
|              ||              |
--------------------------------

Let’s say I now click on the “jobs” link through the home page.
I’d like the screen to scroll with an animation vertically, to the bottom right hand corner of the container that contains all the items.

This is not that much of a problem, and I am aware I can achieve that with a plugin such as ScrollTo.

Now imagine that instead of just 4 pages, I have 16.
This plugin can easily be scaled, but since so many elements exist on the page (each panel contains images, text, menu, titles, etc…), the site slows down substantially.

I can resolve this problem when I am already on a given page, by hiding all the other pages — but how can I handle all the elements while animating from one panel to another?
Any ideas for implementation?

Thank you!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    2Cents:

    • by default all panels except the active are hidden AND have an additional css class (e.g. “panel-simplified”)
    • panel-simplified reduces the layout to the absolute minimum: no advanced css3 techniques, only selected content is shown, maybe even dummy content
    • on click the target panel gains full beauty / loses panel-simplified
    • only the necessary panels, which are “passed along” are shown (min: 2panels, max: ~ 10 panels (0,0) -> (4/4))

    e.g. State before (0,0) -> (2,2). Hidden panels without a label.

    ----------------------------------------------------------------
|    (0,0)     ||     (1,0)    ||     (2,0)    ||     (3,0)    |
|    FULL      ||      SIMP    ||              ||              |
----------------------------------------------------------------
----------------------------------------------------------------
|    (0,1)     ||     (1,1)    ||     (2,1)    ||     (3,1)    |
|     SIMP     ||     SIMP     ||      SIMP    ||              |
----------------------------------------------------------------
----------------------------------------------------------------
|    (0,2)     ||     (1,2)    ||     (2,2)    ||     (3,2)    |
|              ||     SIMP     ||      FULL    ||              |
----------------------------------------------------------------
----------------------------------------------------------------
|    (0,3)     ||     (1,3)    ||     (2,3)    ||     (3,3)    |
|              ||              ||              ||              |
----------------------------------------------------------------
    • 0