Pixie Book

There are 8 scenes in the book, each of them a different HTML file, with an iFrame acting as a container. The navigation consists of two buttons that allow users to flip through the pages. The animations have been created through JavaScript and jQuery, and the sound consists of the narrator voice and ambiental noises. The narration has been synchronized with the animation so that it would add more flavour to the story. The various effects have been created through animate, fade, transition and various other methods.

View Project

Pixie Book Show Case

Code Sample

JavaScript code for changing the pages

function fPageChange(next_p, previous_p, frame) {

$(function() {
var nCurrentPage = 1;

$(next_p).click(function() {
if (nCurrentPage >=8 ) {//amount of pages
return 0;
}else {

nCurrentPage++;//we increment current page
$(frame).attr('src', "page_" + nCurrentPage + ".html");//src attribute in iframe is updated

}
});

$(previous_p).click(function() {
if (nCurrentPage <= 1) {
return 0 ;
} else {
nCurrentPage--;//we decrement current page
$(frame).attr('src', "page_" + nCurrentPage + ".html");//src attribute in iframe is updated

}
});
});
}