ThrillBent's Valentine – Episode 01

Copyrighted art displayed for fair use only

Swipe & Snap ©MIT License

Just Add Images

Screen, Tablet & Mobile Swipe Display

Your browser does not support this display

If you can:

  1. copy & paste text,
  2. edit HTML lists & links, and
  3. post art & pages to the web,

you can give readers a standards-compliant swipe display.

  1. Open your web document with your swipe & snap stylesheet:
    <!doctype html>
    <html>
    <head>
    <title>document title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link type="text/css" rel="stylesheet" href="swipe_snap.css">
    </head>
  2. Set your swipe to vertical or horizontal, to display scrollbar on desktop or not, and to enable fade-ins or not:
    <body>
    <div class="horizontal swipe_snap scrollbar">
    <div class="enable">
  3. Open an HTML list with your previous arrow:
    <ul>
    <li><strong>&lsaquo;</strong><span>&nbsp;</span></li> <!-- previous arrow -->
  4. Set the empty links in your list to your image files:
    <li><a href="path/folder/your-image01.jpg"></a></li>
    <li><a href="path/folder/your-image02.jpg"></a></li>
    <li><a href="path/folder/your-image03.jpg"></a></li>
    1. To swipe-in, add a class to the slate to swipe:
      <li class="swipe_out"><a href="path/folder/your-image03.jpg"></a></li>
      <li><a href="path/folder/your-image04.jpg"></a></li>
    2. To fade-in, repeat the previous image paired with the new panel faded into:
      <li><a href="path/folder/your-image03.jpg"></a></li>
      <li>
      <a href="path/folder/your-image03.jpg"></a>
      <a href="path/folder/your-image04.jpg"></a>
      </li>
    3. Add a second overlay to fade-in captions:
      <li><a href="path/folder/your-image03.jpg"></a></li>
      <li>
      <a href="path/folder/your-image03.jpg"></a>
      <a href="path/folder/your-image04.jpg"></a>
      <a href="path/folder/your-image05.jpg"></a> <!-- previous image w/ captions added -->
      </li>
    4. Style-coders can customize blank slates to dress-up text to display:
      <li><span><a href="#">[ your text 1 ]</a></span></li>
      <li><span><a href="#">[ your text 2 ]</a></span></li>
      <li><span><a href="#">[ your text 3 ]</a></span></li>
  5. Close the open tags to complete your swipe display:
    <li><strong>&rsaquo;</strong><span>&nbsp;</span></li> <!-- forward arrow -->
    </ul>
    </div>
    </div>
  6. To show reader progress, you can include, a. the tags to display page count:
    <p class="page_number"></p>
    or, b. if you know how to style them, the tags to insert the dynamic menu:
    <ul class="toc"><li></li></ul>
  7. Include your jQuery and swipe & snap scripts by the close of your document:
    <script type="text/javascript" src="jquery-2.0.0.min.js"></script>
    <script type="text/javascript" src="swipe_snap.js"></script>
    </body>
    </html>

With ink and paper, comics are the most powerful medium always available to create in. US newsstands once supported over 600 comic titles, selling a billion issues a year. An artist could reach readers in the tens of millions.

Today, however, the comics released by US publishers enjoy a readership of less than a million, perhaps ¼% of the population. No market is more qualified to deliver what we need to hear than anyone willing to say it.

Also for screen & tablet display: