Create a Page Turner With an Overlay in Javascript, CSS and HTML (Part-II)

Before reading this article, please go through the following article:

• Create a Page Turner With JavaScript, CSS and HTML

Now we will discuss how to create a simple Page Turner with Overlay using JavaScript, CSS and HTML. Like this:



When we click on the image:



So when we click on the image the Overlay screen will be visible with the image and other data. Here we turn the page by clicking on the "Back" and the "Next" button like this:



Step 1: First we we use two <div> tags, one for the Overlay screen (Light) and the other for the Back part (black) like this:

<div id="light" class="overlay">
    <table width="100%">
        <tr>
            <td align="right">
                <img src="Close.jpg" width="20px" onclick="document.getElementById('fade').style.display='block';
document.getElementById('fade').style.opacity='1';document.getElementById('light').style.display='none';" /></td>
        </tr>
        <tr>
            <td>
                <img id="imgMain" src="Penguins.jpg" height="20%" />
            </td>
        </tr>
        <tr>
            <td>
                <p id="info">These penguins are an elite strike force with unmatched commando skills.</p>
            </td>
        </tr>
    </table>
</div>
<div id="fade" class="black">
</div>

Here we will specify the tags (<img> and <p>) to show our information in the overlay screen. Now we will set the style of both the screens like this:

<style>
    .black {
        position: absolute;
        top: 0%;
        left: 0%;
        width: 50%;
        height: 50%;
        background-color: White;
        z-index: 1001;
        -moz-opacity: 0.8;
        filter: alpha(opacity=80);
    } 
    .overlay {
        display: none;
        position: absolute;
        -webkit-border-radius: 20px;
        border: 5px solid red;
        background-color: white;
        z-index: 1002;
        overflow: auto;
    }
</style>

Here we set the Opacity and the z-index, that creates the overlay screen.

Step 2: Now we will use our first div tag to show the Album like this:

<div id="backpageTurnermain" class="pageTurner back">
    <img src="Penguins.jpg" id="img1" height="120px" width="120px" onclick="Show();document.getElementById('light').style.display='block';
document.getElementById('fade').style.opacity='0.2';" />
    <p>Penguins</p>
    <br />
    <a id="a1" style="font-size: 10px;" onclick="flop()">Back</a>
</div>
<div class="pageTurner frontPageTurner" id="frontPageTurnerpageTurner">
    <h3>ALBUM </h3>
</div>

Now we will set its CSS property like this:

.pageTurner {
    position: absolute;
    top: 100;
    height: 200;
    width: 150;
    background-color: Khaki;
    padding: 15;
    border-radius: 10;
    border: 1px solid Tan;
    -webkit-transition: -webkit-transform 1.2s;
    -webkit-backface-visibility: hidden;\
} 
.frontPageTurner {
    left: 225;
    -webkit-transform-origin: 0px 0px;
    z-index: 1;
}

Here we will set the Animation Time Like this

-webkit-transition: -webkit-transform 1.2s;

The following line is used to hide the page turns when it is flipped over:

-webkit-backface-visibility: hidden;

It defines whether or not an element should be visible when not facing the screen. This property is not supported by Opera.

Here we used the z-index property to set the <div> like this:

.frontPageTurner { left: 225; -webkit-transform-origin: 0px 0px;z-index:1;}

Now we will write the JavaScript code like this:

<script type="text/javascript">
    function flip() {
        document.getElementById("frontPageTurnerpageTurner").style.webkitTransform = "rotateY(-180deg)";
        document.getElementById("backpageTurner").style.webkitTransform = "rotateY(0deg)";
    }
    function flop() {
        document.getElementById("frontPageTurnerpageTurner").style.webkitTransform = "rotateY(0deg)";
        document.getElementById("backpageTurner").style.webkitTransform = "rotateY(180deg)";
    }
    function main() {
        document.getElementById("frontPageTurnerpageTurner").addEventListener("click", flip, false);
        document.getElementById("backpageTurner").addEventListener("click", flop, false);
    }
</script>

We define the main() function in the <body> tag like this:

<body onload="main();">

Here we will use the Show() function to animate the Overlay screen like this:

<script type="text/javascript">
    var x = 10;
    var l = 10;
    var t = 10; 
    function Show() { 
        document.getElementById('light').style.width = "0px";
        document.getElementById('light').style.height = "0px";
        setTimeout("Show1()", 500);
    }
    function Show1() {
        if ((x < 260) && (l < 500)) {
            if (t < 150) {
                document.getElementById('light').style.top = t + "px";
            }
            else {
                document.getElementById('light').style.top = "120px"; 
            }
            document.getElementById('light').style.left = l + "px";
            document.getElementById('light').style.width = x + "px";
            document.getElementById('light').style.height = x + "px"; 
            x = x + 10;
            l = l + 10;
            t = t + 10;
            setTimeout("Show1()", 10);
        }
        else {
            x = 0
            l = 0;
            t = 0; 
        }
    }
</script> 

Here we increase the height and width of the Overlay screen by calling the function Show1() after a specified period of time.

Step 3: Now we will write the code for the remaining pages. First we will use the <div> tags like this:

<div class="pageTurner back1" id="backpageTurner1"> 
    <img src="Jellyfish.jpg" height="120px" width="120px" onclick="Show();document.getElementById('light').style.display='block';
document.getElementById('fade').style.opacity='0.2';ShowImage2();" />
    <p>Jellyfish</p>
    <br /> 
    <a id="a1" style="font-size: 10px;" onclick="flop1()">Back</a>
</div> 
<div class="pageTurner frontPageTurner1" id="frontPageTurnerpageTurner1"> 
    <img src="Lighthouse.jpg" height="120px" width="120px" onclick="Show();document.getElementById('light').style.display='block';
document.getElementById('fade').style.opacity='0.2';ShowImage1();" />
    <p>Lighthouse</p>
    <br /> 
    <a id="a2" style="font-size: 10px;" onclick="flip1()">Next</a> 
</div> 
<div class="pageTurner back2" id="backpageTurner2" onclick="flop2()">
    <br /> 
</div>
<div class="pageTurner frontPageTurner2" id="frontPageTurnerpageTurner2"> 
    <img src="Hydrangeas.jpg" height="120px" width="120px" onclick="Show();document.getElementById('light').style.display='block';
document.getElementById('fade').style.opacity='0.2';ShowImage3();" />
    <p>Hydrangeas</p>
    <br /> 
    <a id="a3" style="font-size: 10px;" onclick="flip2()">Next</a>
</div> 
</div>

After that we will be set its CSS like this:

.back {
    left: 60;
    -webkit-transform-origin: 100% 70%;
    -webkit-transform: rotateY(180deg);
} 
.frontPageTurner1 {
    left: 215;
    -webkit-transform-origin: 0px 0px;
    z-index: 0.8;
} 
.back1 {
    left: 57;
    -webkit-transform-origin: 100% 70%;
    -webkit-transform: rotateY(180deg);
} 
.frontPageTurner2 {
    left: 215;
    -webkit-transform-origin: 0px 0px;
    z-index: -1;
} 
.back2 {
    left: 80;
    -webkit-transform-origin: 100% 70%;
    -webkit-transform: rotateY(180deg);
} 
body {
    -webkit-transform-style: preserve-3d;
    -webkit-perspective: 1000px;
    text-align: center;
}

After that we will write the JavaScript code like this:

<script type="text/javascript">
    var x = 10;
    var l = 10;
    var t = 10; 
    function Show() { 
        document.getElementById('light').style.width = "0px";
        document.getElementById('light').style.height = "0px";
        setTimeout("Show1()", 500);
    }
    function Show1() {
        if ((x < 260) && (l < 500)) {
            if (t < 150) {
                document.getElementById('light').style.top = t + "px";
            }
            else {
                document.getElementById('light').style.top = "120px"; 
            }
            document.getElementById('light').style.left = l + "px";
            document.getElementById('light').style.width = x + "px";
            document.getElementById('light').style.height = x + "px"; 
            x = x + 10;
            l = l + 10;
            t = t + 10;
            setTimeout("Show1()", 10);
        }
        else {
            x = 0
            l = 0;
            t = 0; 
        }
    }
    function flip() {
        document.getElementById("frontPageTurnerpageTurner").style.webkitTransform = "rotateY(-180deg)";
        document.getElementById("backpageTurnermain").style.webkitTransform = "rotateY(0deg)";
    } 
    function flop() {
        document.getElementById("frontPageTurnerpageTurner").style.webkitTransform = "rotateY(0deg)";
        document.getElementById("backpageTurnermain").style.webkitTransform = "rotateY(180deg)";
    }
    function flip1() {
        document.getElementById("frontPageTurnerpageTurner1").style.webkitTransform = "rotateY(-180deg)";
        document.getElementById("backpageTurner1").style.webkitTransform = "rotateY(0deg)";
    } 
    function flop1() {
        document.getElementById("frontPageTurnerpageTurner1").style.webkitTransform = "rotateY(0deg)";
        document.getElementById("backpageTurner1").style.webkitTransform = "rotateY(180deg)";
    }
    function flip2() {
        document.getElementById("frontPageTurnerpageTurner2").style.webkitTransform = "rotateY(-180deg)";
        document.getElementById("backpageTurner2").style.webkitTransform = "rotateY(0deg)";
    } 
    function flop2() {
        document.getElementById("frontPageTurnerpageTurner2").style.webkitTransform = "rotateY(0deg)";
        document.getElementById("backpageTurner2").style.webkitTransform = "rotateY(180deg)";
    }
</script>

Here we will set the flip() and flop() function on the "Back" and the "Next" Button so the page will be turned when we click on these buttons.

Output