April 21, 2015

Curtain.js makes your website scroll like a curtain

How to implement curtain.js to your website

Curtain.js is a little javascript frameworkt, which lets your pages go up when you scroll, just like a curtain.
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:

<div class="page">
        <p> This is a page </p>

Also, you have to style this class.

This is an example to style “.page”

.page {
            position: relative;
            top: 0;
            left: 0;
            width: 100%;
            min-height: 100%;
            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;

At the end of the body, you have to call the javascript framework. You’d better call frameworks at the end of your code. This makes sure the page wil load this function only when your page is fully loaded into the browser.
Here is an example to do that. Make sure you have got the curtain.js in the right map.

<script src="curtain.js"></script>

        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.