Iris

Average color of an image with psColor.js

psColor.js – get the average color of an image

When you want to know the average color of an image, for example when you want to set the backgroundcolor of your website to the average color of an image showing in front of it, you can use psColor.js.
This is a little framework which does all the work for you.
How can I implement this framework?
– Download psColor.js or psColor.min.js. Place it in your <head> like this: <script src='psColor.js'></script>.
– Call ps.color.getImageAverageColor(imageElement) where imageElement is an <img> that has completed loading, and is on the same domain as the web page.
– ps.color.getImageAverageColor will return an object with three methods that will give you the average color in rgb, rgba, and hex:
toStringRgb (e.g. 255,128,0)
toStringRgba (e.g. 255,128,0,0.5)
toStringHex (e.g. FF8000)

Example of average color in an image
(more…)

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
curtain.js

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>
    </div>

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>

    <script>
        var pages = document.querySelectorAll('.page');
        if ( !('ontouchstart' in window) ) Curtain(pages);
    </script>

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.