ComicasterJS is a way to publish a set of comics with a reading experience that feels more like an e-reader and less like a blog.
JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
images
js
CODE - MIT-LICENSE.txt
COMIC EXAMPLE - CC BY-NC-SA 3.0 LICENSE.txt
LICENSE
README.md
index.html

README.md

#ComicasterJS

ComicasterJS is a web-based comic reader and boilerplate for publishing comics or other sequential art galleries. It's a way to publish a set of comics with a reading experience that feels more like an e-reader and less like a blog.

Status

Experimental alpha release. If you like playing with HTML, JavaScript, and CSS in the name of comics mad science you're in the right place.

Browser Support

Tested on the latest chrome, Safari, and Firefox. Also tested in mobile WebKit and mobile chrome.

Example

The first chapter of my comic Art Geek Zoo: The Way of Sound.

Installation and Directions

  • Clone or download this project
  • Add your comic artwork to the images folder
  • Customize index.html:
    • Page title and meta data
    • Edit the <section> elements: add one or two images to each
    • The section elements are super powerful and have many options you can use such as custom backgrounds and more via RevealJS.
    • Edit the menu text and links
    • Edit the javascript variables "exitComicURL", "comicName", and "comicShareText" near the footer of index.html
  • Customize the styles in comicasterjs.css
    • fonts: web font(s) or common desktop fonts
    • change additional styles as needed
  • Test > tweak > publish > repeat until you have the content and look and feel that's right for your comic.

Features

  • an e-reader style user interface (UI) for a web comic
  • responsive layout and minimalist UI
  • desktop and touch interface support
  • drag to scroll the view
  • mouse wheel to scroll the view
  • four levels of page zoom
  • remembers the reader's furthest page, prompts to continue upon returning
  • an action menu with thumbnail navigation
  • basic help, available via the action menu
  • open source
  • extremely customizable

Built Upon Other Projects

I'm very grateful for each of these projects:

  • RevealJS for the primary structure, general slide deck paging behavior, and more.
  • PEP for the draggable page scrolling.
  • Hammer for touch interface gestures.
  • Mousewheel for page scrolling.
  • Cookie to remember the furthest page.
  • FontAwesome for icons.