Skrollr

[vallhund]

Skrollr theme
Just another GetSimple website
An experimental horizontal one-page theme.


Live demo | Download

This is a variant of the single-page approach. The content is divided into separate horizontal slides (looks like a 'classic' site) and pages switch with animated transitions.

---

First slide is not a page, actually, it's the landing slide (can be easily changed by switching to template-flat.php for your index page).

---

Local links are rebuilt by /js/init.js script automatically (href removed, links binded to slides). External links and image links remain untouched.
Also, the script allows you to build your own controls. The API is quite simple - add one of the 4 classes to an element and it becomes a control:

Code:

.slider-next //advance to next slide

.slider-prev //go to previous slide

.slider-jump //jump to a page of a given slug
//specify 'data-jump' attribute with the page slug

.slider-goto //jump to a slide/page with of a given index
//specify 'data-goto' attribute with the page index (note that actual pages start from 1)

The script also initializes the slider plugin (bxSlider is used), controls the mobile-menu etc.

---

A simple 12-unit CSS grid is included. Use .row as container and .uN class for columns (where N is 12th of container width - like u3, u4 etc).

---

Customizing is made easier (I hope) by separating CSS into two files: layout.css for pure structure and /css/skin.css for colours, fonts, margins and other styles.

---

v0.6 - Options for initialization script can be passed to the following call in template.php:

Code:

$(document).ready(function () {
   $('#pages').skrollr();
});

zeroSlide Boolean Turns on the landing screen. Default value: true

speed IntegerTransition time when switching slides, in milliseconds. Default value: 1000

easing String Name of the CSS easing function (for slide transitions). Possible values are: 'linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out'. Default value: "ease"

menu String Element, which contains menu items. (A CSS Selector) Use this parameter when you modify template structure. Default value: "#nav ul"

mobileMenu String Element, which contains mobile menu trigger ('hamburger' icon for example). (A CSS Selector). Use this parameter when you modify template structure. Default value: "#mobile-menu"

---

Comments, bug tracking, suggestions will be really appreciated.