WebAppers

/ best free open source web resources /

Shopify

How to Create a Sliding Horizontal Layout

Posted · Category: Information, License Free

Codrops has shared a tutorial of Sliding Horizontal Layout, where we see the main section in the middle and part of the previous and next section on the sides. The navigation reflects this view by showing the three items currently visible. When clicking on one of the sides or on one of the lateral navigation items, the sections will slide to the respective side, showing the next or previous section. The same happens to the navigation.

They use CSS 3D Transforms for moving the lateral sections. In a browser that does not support 3D Transforms (or where JavaScript is not enabled), you will see the default layout.

sliding-layout2

Requirements: CSS3 3D Transforms
Demo: http://tympanus.net/Development/TripleViewLayout/
License: License Free

0 Comments
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons