Teochew Thunder: Web Tutorial: The Christmas Flipbook (Part 2/4)

All right! Time to fill up the pages with some content. The idea here is that basic HTML should be able to be embedded into those pages.

Let's remove the divs in the left_middle and right_middle divs for the time being, so we can work on the cover.

In the cover, let's add some HTML. The image used is a small PNG logo. CSS is embedded in the HTML itself.

tt.png

<div id="left_back" class="pageholder">
   <div class="cover">
       <p style="margin-top:10%;color:rgba(10,0,0,0.5);text-align:center"><b>A flipbook project by<br /><i>TeochewThunder</i></b></p><p style="text-align:center"><img src="tt.png" /></p>
   </div>
</div>

There it is.

On the right side, let's add the image below.

flipbook_cover.png

This looks good.

Now add the pages back. We will work on them next. Let's start with a page number. For this, we will use a div with the pagenumber CSS class.

<div id="left" class="section">
   <div id="left_back" class="pageholder">
       <div class="cover">
           <p style="margin-top:10%;color:rgba(10,0,0,0.5);text-align:center"><b>A flipbook project by<br /><i>TeochewThunder</i></b></p><p style="text-align:center"><img src="tt.png" /></p>
       </div>
   </div>

   <div id="left_middle" class="pageholder">
       <div class="page">
           <div class="pagenumber">1</div>
       </div>
   </div>

   <div id="left_front" class="pageholder">

   </div>
</div>

<div id="right" class="section">
   <div id="right_back" class="pageholder">
       <div class="cover">
           <p style="text-align:center"><img src="flipbook_cover.png"/></p>
       </div>
   </div>

   <div id="right_middle" class="pageholder">
       <div class="page">

       </div>
   </div>

   <div id="right_front" class="pageholder">

   </div>
</div>

Here's the styling. I have specified font size and aligned text center, and given it a translucent grey border at the bottom.

#right .cover
{
   background: -moz-linear-gradient(left, rgb(30, 0, 0) 0%, rgb(50, 0, 0) 20%, rgb(150, 0, 0) 100%);
   background: -webkit-linear-gradient(left, rgb(30, 0, 0) 0%, rgb(50, 0, 0) 20%, rgb(150, 0, 0) 100%);
   background: linear-gradient(to right, rgb(30, 0, 0) 0%, rgb(50, 0, 0) 20%, rgb(150, 0, 0) 100%);
   box-shadow: 0 3px 0 rgb(100, 0, 0) inset, -3px 0 0 rgb(100, 0, 0) inset, 0 -3px 0 rgb(100, 0, 0) inset;
}

.pagenumber
{
   font-size: 0.8em;
   font-weight: bold;
   text-align: center;
   height: 19px;
   border-bottom: 1px solid rgba(100, 100, 100, 0.5);
}

Coming along nicely.

Now for content!

This is a typical paragraph. The text is taken from Wikipedia.

<div id="left_middle" class="pageholder">
   <div class="page">
       <div class="pagenumber">2</div>
       <div>
           <p style="text-align:justify">Christmas is an annual festival commemorating the birth of Jesus Christ, observed primarily on December 25 as a religious and cultural celebration among billions of people around the world.</p><p style='text-align:justify'>A feast central to the Christian liturgical year, it is preceded by the season of Advent or the Nativity Fast and initiates the season of Christmastide, which historically in the West lasts twelve days and culminates on Twelfth Night. Christmas Day is a public holiday in many countries, is celebrated religiously by a majority of Christians, as well as culturally by many non-Christians, and forms an integral part of the holiday season organized around it.</p>
       </div>
   </div>
</div>

See how this turned out? Note that this should be the most amount of text you could squeeze into one page without adjusting font sizes, line heights, padding and the like.

For the next bit, I will use the image below.

flipbook00.jpg

This is a typical paragraph with image. Again, text is from Wikipedia.

<div id="right_middle" class="pageholder">
   <div class="page">
       <div class="pagenumber">1</div>
       <div>
           <img align="left" style="padding:5px" src="flipbook00.jpg"/><p style="text-align:justify">A special Christmas family meal is traditionally an important part of the holiday's celebration, and the food that is served varies greatly from country to country. Some regions have special meals for Christmas Eve, such as Sicily, where 12 kinds of fish are served. In the United Kingdom and countries influenced by its traditions, a standard Christmas meal includes turkey, goose or other large bird, gravy, potatoes, vegetables, sometimes bread and cider.</p>
       </div>
   </div>
</div>

Could be better, but you can always adjust the CSS.

Now add divs into the left_front and right_front divs. Style them using page, and add a page number as we did before, for each one.

<div id="container">
   <div id="left" class="section">
       <div id="left_back" class="pageholder">
           <div class="cover">
               <p style="margin-top:10%;color:rgba(10,0,0,0.5);text-align:center"><b>A flipbook project by<br /><i>TeochewThunder</i></b></p><p style="text-align:center"><img src="tt.png" /></p>
           </div>
       </div>

       <div id="left_middle" class="pageholder">
           <div class="page">
               <div class="pagenumber">1</div>
               <div>
                   <p style="text-align:justify">Christmas is an annual festival commemorating the birth of Jesus Christ, observed primarily on December 25 as a religious and cultural celebration among billions of people around the world.</p><p style='text-align:justify'>A feast central to the Christian liturgical year, it is preceded by the season of Advent or the Nativity Fast and initiates the season of Christmastide, which historically in the West lasts twelve days and culminates on Twelfth Night. Christmas Day is a public holiday in many countries, is celebrated religiously by a majority of Christians, as well as culturally by many non-Christians, and forms an integral part of the holiday season organized around it.</p>
               </div>
           </div>
       </div>

       <div id="left_front" class="pageholder">
           <div class="page">
               <div class="pagenumber">3</div>
               <div>

               </div>
           </div>
       </div>
   </div>

   <div id="right" class="section">
       <div id="right_back" class="pageholder">
           <div class="cover">
               <p style="text-align:center"><img src="flipbook_cover.png"/></p>
           </div>
       </div>

       <div id="right_middle" class="pageholder">
           <div class="page">
               <div class="pagenumber">2</div>
               <div>
                   <img align="left" style="padding:5px" src="flipbook00.jpg"/><p style="text-align:justify">A special Christmas family meal is traditionally an important part of the holiday's celebration, and the food that is served varies greatly from country to country. Some regions have special meals for Christmas Eve, such as Sicily, where 12 kinds of fish are served. In the United Kingdom and countries influenced by its traditions, a standard Christmas meal includes turkey, goose or other large bird, gravy, potatoes, vegetables, sometimes bread and cider.</p>
               </div>
           </div>
       </div>

       <div id="right_front" class="pageholder">
           <div class="page">
               <div class="pagenumber">4</div>
               <div>

               </div>
           </div>
       </div>
   </div>
</div>

Let's try embedding a video.

<div id="left_front" class="pageholder">
   <div class="page">
       <div class="pagenumber">3</div>
       <div>
           <p><i>A Christmas Carol</i></p><iframe width="200" height="200" src="https://www.youtube.com/embed/iN6IMZFwY50"></iframe></p>
       </div>
   </div>
</div>

Wo0t!

Now let's try a heavily customized div. We will use this image.

flipbook1,jpg

Yep, it works.

And now, remove everything. That was hard-coding we did, and we're not going to do that. We will instead write code to embed that HTML.

<div id="left" class="section">
   <div id="left_back" class="pageholder">
       
   </div>

   <div id="left_middle" class="pageholder">
       
   </div>

   <div id="left_front" class="pageholder">
       
   </div>
</div>

<div id="right" class="section">
   <div id="right_back" class="pageholder">
       
   </div>

   <div id="right_middle" class="pageholder">
       
   </div>

   <div id="right_front" class="pageholder">
       
   </div>
</div>

In the script, create the book object. It will have the views property.

views is an array of objects. Place 6 objects in there. You will see why soon.

Each element in views is actually a specification of what the book will look like as you progress. The first element will have a property called right, which is another object. Within it is a class property, and that is a string, "cover". For the content property, let's place the HTML we created that had the Christmas tree icon. Note that the double quotes in the HTML are now single quotes, so as not to confuse the engine that parses this object.

views:
[
   {
       right:
       {
           class: "cover",
           content: "<p style='text-align:center'><img src='flipbook_cover.png'/></p>"
       }
   },
   {

   },
   {

   },
   {

   },
   {

   },
   {

   }
]

The second view has both left and right properties. Because after turning the cover, you will see both a left side and a right side, yes?

views:
[
   {
       right:
       {
           class: "cover",
           content: "<p style='text-align:center'><img src='flipbook_cover.png'/></p>"
       }
   },
   {
       left:
       {

       },
       right:
       {

       }
   },
   {

   },
   {

   },
   {

   },
   {

   }
]

So for this left property, we do as we did for the right property of the first element. For the content property, I am going with the small logo and text HTML.

For the right property, I also have a pagenumber property, in addition to the HTML content.

Repeat for the rest!

views:
[
   {
       right:
       {
           class: "cover",
           content: "<p style='text-align:center'><img src='flipbook_cover.png'/></p>"
       }
   },
   {
       left:
       {
           class: "cover",
           content: "<p style='margin-top:10%;color:rgba(10,0,0,0.5);text-align:center'><b>A flipbook project by<br /><i>TeochewThunder</i></b></p><p style='text-align:center'><img src='tt.png' /></p>"
       },
       right:
       {
           class: "page",
           pagenumber: 1,
           content: "<p style='text-align:justify'>Christmas is an annual festival commemorating the birth of Jesus Christ, observed primarily on December 25 as a religious and cultural celebration among billions of people around the world.</p><p style='text-align:justify'>A feast central to the Christian liturgical year, it is preceded by the season of Advent or the Nativity Fast and initiates the season of Christmastide, which historically in the West lasts twelve days and culminates on Twelfth Night. Christmas Day is a public holiday in many countries, is celebrated religiously by a majority of Christians, as well as culturally by many non-Christians, and forms an integral part of the holiday season organized around it.</p>"
       }
   },
   {
       left:
       {
           class: "page",
           pagenumber: 2,
           content: "<img align='left' style='padding:5px' src='flipbook00.jpg'/><p style='text-align:justify'>A special Christmas family meal is traditionally an important part of the holiday's celebration, and the food that is served varies greatly from country to country. Some regions have special meals for Christmas Eve, such as Sicily, where 12 kinds of fish are served. In the United Kingdom and countries influenced by its traditions, a standard Christmas meal includes turkey, goose or other large bird, gravy, potatoes, vegetables, sometimes bread and cider.</p>"
       },
       right:
       {
           class: "page",
           pagenumber: 3,
           content: "<p><i>A Christmas Carol</i></p><iframe width='200' height='200' src='https://www.youtube.com/embed/iN6IMZFwY50'></iframe>"
       }
   },
   {
       left:
       {
           class: "page",
           pagenumber: 4,
           content: "<p><i>Joy to the world<br /><br />The Lord is come<br /><br />Let Earth receive her King!<br /><br />Let every heart<br /><br />Prepare him room<br /><br />And heaven and nature sing<br /><br />And heaven and nature sing<br /><br />And heaven, heaven and nature sing</i></p>"
       },
       right:
       {
           class: "page",
           pagenumber: 5,
           content: "<div style='margin-top:10%;width:200px;height:150px;background: url(flipbook01.jpg) left top no-repeat;filter:opacity(0.5);outline:5px solid rgba(200,200,0,0.5)'></div>"
       }
   },
   {
       left:
       {
           class: "page",
           content: "<p style='margin-top:10%;text-align:center'><i>Merry Christmas<br />and Happy New Year!</i></p>"
       },
       right:
       {
           class: "cover",
           content: ""
       }
   },
   {

   }
]

The final element, of course, mirrors the first element, in the sense that now this time, it is the right property that is missing.

What are we doing here?

Oh, are you lost? No worries! This is preparation for what we're about to do next - create code to display content according to what page you're on.

We make the buttons flip the pages.

Teochew Thunder

Pages

Sunday, 18 December 2022

Web Tutorial: The Christmas Flipbook (Part 2/4)

Now for content!

What are we doing here?

Next

No comments:

Post a Comment

Teochew Thunder

Upcoming Web Tutorials

Features

Reviews