Edit in JSFiddle

        (function($){
                $(document).ready(function(){
                    $('.exemples:eq(0)').flippage({
                        width: 500,
                        height: 333
                    });
                    
                    $('.exemples:eq(1)').flippage({
                        width: 300,
                        height: 150
                    });
                });
            })(jQuery);

                <div class="exemples">
                <div><h3>Page 1</h3></div>
                <div><h3>Page 2</h3> <a href="#" onclick="alert('Pages are clickable !'); return false;">Test me</a></div>
                <div><h3>Page 3</h3></div>
                <div><h3>Page 4</h3></div>
                <div><h3>Page 5</h3></div>
                <div><h3>Page 6</h3></div>
                <div><h3>Page 7</h3></div>
                <div><h3>Page 8</h3></div>
            </div>

.flippage {
    position: relative;
}

.flippage_page {
    display: block;
    position: absolute;
    overflow: hidden;
}

.flippage_page > div {
    position: absolute;
    top: 0;
}

.flippage_rshadow {
    background-image: url("img/shadow-top-forward.png");
    background-position: 100% 0;
    background-repeat: repeat-y;
}

.flippage_lshadow {
    background-image: url("img/shadow-top-back.png");
    background-position: 0 0;
    background-repeat: repeat-y;
}
            body > div {
                display: block;
                width: 500px;
                height: 333px;
                margin-left: 50px;
                margin-top: 50px;ｂ
            }

            
            .exemples > div {
                background-color: #d4eaf5;
            }