How to implement curtain.js to your website
With curtain.js, your website looks more professional, but using curtain.js is easy.
So… why shouldn’t you use it?
For an example, visit www.the.gs/fresh/curtain/example
To use this tutorial, you need to download the curtain.js: www.github.com/yckart/Curtain.js
You also need an HTML and css document.
In your HTML document, every page has to have the class ‘page’.
If you give every page this class, the framework will recognise these as pages, so the framework knows when to make your curtain page scroll!
This is an example:
<p> This is a page </p>
Also, you have to style this class.
This is an example to style “.page”
background: #fdfdfd url(http://lab.yckart.corvus.uberspace.de/img/248) repeat fixed;
border-bottom: thin solid lightgray;
box-shadow: 0 10px 10px -10px lightgray;
Here is an example to do that. Make sure you have got the curtain.js in the right map.
var pages = document.querySelectorAll('.page');
if ( !('ontouchstart' in window) ) Curtain(pages);
If you did everything the right way, it should work!
For more information about curtain.js, you can visit https://github.com/Victa/curtain.js/. Here you can find everything you want to know about this framework.