xyPanels

This is a plugin that I developed as a twist to single page website designs and a variation on one of my other projects — Vertical Pagination. Most of the heavy lifting is done by jQuery but I am planning to replace certain functions with modern CSS (such as the Flexbox) in the future. xyPanels also operates “outside” the layout and can be used with “inside” front end frameworks such as Bootstrap.

• Full-window panels are set up along the X and Y axes of the page
• In addition to built-in scrolling you can also include links that will target specific panels
• Please feel free to contact me for more information

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/xypanels.js"></script>
<link href="css/xypanels.css" type="text/css" rel="stylesheet" />
<script>$(document).ready(function() { panels(); });</script>

3 vertical (y-axis) panels inside of the page wrapper <div>

<div class="page-wrapper">
<section class="panel-wrapper y-axis" id="unique-id-a">
<article class="panel-content">
...
</article>
</section>
<section class="panel-wrapper y-axis" id="unique-id-b">
<article class="panel-content">
...
</article>
</section>
<section class="panel-wrapper y-axis" id="unique-id-c">
<article class="panel-content">
...
</article>
</section>
</div>

Add a horizontal row of (x-axis) panels inside of a vertical panel

<section class="panel-wrapper y-axis panel-row" id="unique-id-b">
<section class="panel-wrapper x-axis" id="unique-id-b1">
<article class="panel-content">
...
</article>
</section>
<section class="panel-wrapper x-axis" id="unique-id-b2">
<article class="panel-content">
...
</article>
</section>
<section class="panel-wrapper x-axis" id="unique-id-b3">
<article class="panel-content">
...
</article>
</section>
</section>

Make sure to add the "panel-row" class to the parent panel