srobbin

<div id="book1" class="book">
  <img src="book.jpg" />
</div>

srobbin

@font-face {
  font-family: "Shifticons";
  src: url("../fonts/shifticons.eot"); /* IE9 Compat Modes */
  src: url("../fonts/shifticons.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
       url("../fonts/shifticons.woff") format("woff"), /* Modern Browsers */
       url("../fonts/shifticons.ttf")  format("truetype"), /* Safari, Android, iOS */
       url("../fonts/shifticons.svg#Shifticons") format("svg"); /* Legacy iOS */
}

srobbin

<style media="print">
   #backstretch { display: none; }
</style>

srobbin

<!--
  In this demo, there are a series of circular images.
  Their opacity changes as you approach each individual one.
-->

<!-- Beginning styles -->
<style>
  img.circle {
    float: left;
    height: 80px;

srobbin

<!--
  Notice that the size and color of the text above changes
  as your cursor approaches it.
-->

<!-- Beginning styles -->
<style>
  a#demo-link {
    font-size: 24px;
    color: #FFFFCC;

srobbin

<a href="javascript:$.pageslide({ direction: 'left', href:'_secondary.html' })">Link text</a>

srobbin

<a href="#modal" class="second">Link text</a>
<div id="modal" style="display:none">
    <h2>Modal</h2>
    <a href="javascript:$.pageslide.close()">Close</a>
</div>
<script>
    $(".second").pageslide({ direction: "left", modal: true });
</script>

srobbin

<a href="_secondary.html" class="first">Link text</a>
<script>
    $("a.first").pageslide();
</script>

srobbin

/* 
  We can even execute JavaScript.
  For example, here is a simple jQuery plugin that shuffles the "Demo" heading text above.

  http://tutorialzine.com/2011/09/shuffle-letters-effect-jquery/
*/

  $("#demo-header").shuffleLetters();

srobbin

/*
 * You can easily attach Backstretch to jQuery events, like click
 * 
 * Click the buttons above to see the background image change
 */
 
  $("#outside").click(function(e) {
    e.preventDefault();
    $.backstretch('images/outside.jpg');
  });