Build full-page, single-site Applications

Powered by viewSwitcher.js

A basic instruction on how to build single, full-page Applications using viewSwitcher.js for handling the displaying of all views.

How to

Building single-page Applications or pages is easy using ViewSwitcher, all you need is the latest copy of ViewSwitcher and some extra CSS.


// example code; adjust for your needs!
  [data-view] {
    width: 100vw;
    height: 100vh;
    padding: 20%;  
  }

Since ViewSwitcher hides all inactive views by default, this will make your Application or Website look like it's changing pages, this can be used to simulate a classic feel while being lightning fast!

More demo content

And here's some more demo content.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, odio, dicta. Consectetur quia quisquam, dolorem, possimus temporibus nesciunt doloru quaerat, eius voluptate voluptas magni voluptatibus officia laudantium iste necessitatibus ipsam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, odio, dicta. Consectetur quia quisquam, dolorem, possimus temporibus nesciunt doloru quaerat, eius voluptate voluptas magni voluptatibus officia laudantium iste necessitatibus ipsam Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, odio, dicta. Consectetur quia quisquam, dolorem, possimus temporibus nesciunt doloru quaerat, eius voluptate voluptas magni voluptatibus officia laudantium iste necessitatibus ipsam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, odio, dicta. Consectetur quia quisquam, dolorem, possimus temporibus nesciunt doloru quaerat, eius voluptate voluptas magni voluptatibus officia laudantium iste necessitatibus ipsam.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, odio, dicta. Consectetur quia quisquam, dolorem, possimus temporibus nesciunt doloru quaerat, eius voluptate voluptas magni voluptatibus officia laudantium iste necessitatibus ipsam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, odio, dicta. Consectetur quia quisquam, dolorem, possimus temporibus nesciunt doloru quaerat, eius voluptate voluptas magni voluptatibus officia laudantium iste necessitatibus ipsam Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, odio, dicta. Consectetur quia quisquam, dolorem, possimus temporibus nesciunt doloru quaerat, eius voluptate voluptas magni voluptatibus officia laudantium iste necessitatibus ipsam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, odio, dicta. Consectetur quia quisquam, dolorem, possimus temporibus nesciunt doloru quaerat, eius voluptate voluptas magni voluptatibus officia laudantium iste necessitatibus ipsam.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, odio, dicta. Consectetur quia quisquam, dolorem, possimus temporibus nesciunt doloru quaerat, eius voluptate voluptas magni voluptatibus officia laudantium iste necessitatibus ipsam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, odio, dicta. Consectetur quia quisquam, dolorem, possimus temporibus nesciunt doloru quaerat, eius voluptate voluptas magni voluptatibus officia laudantium iste necessitatibus ipsam Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, odio, dicta. Consectetur quia quisquam, dolorem, possimus temporibus nesciunt doloru quaerat, eius voluptate voluptas magni voluptatibus officia laudantium iste necessitatibus ipsam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, odio, dicta. Consectetur quia quisquam, dolorem, possimus temporibus nesciunt doloru quaerat, eius voluptate voluptas magni voluptatibus officia laudantium iste necessitatibus ipsam.