webcomic-library v1.0.5
Webcomic Library
Installation
Self Hosted
Clone the repository
git clone https://github.com/nilsPosthumus/Webcomic-Library
or dowload the latest release
Using NPM
npm install webcomic-library
<link rel="stylesheet" href="node_modules/webcomic_library/dist/webcomic.css">
<script src="node_modules/webcomic-library/dist/webcomic.js"></script>
With JS Delivr
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/webcomic-library@latest/dist/webcomic.css">
<script src="https://cdn.jsdelivr.net/npm/webcomic-library@latest/dist/webcomic.js"></script>
Changing the config
You can change the options for the library by supplying a config json object. The easiest way to do this is via the data-webcomic-config attribute.
<div class="webcomic" data-webcomic-config="{}">
The following settings are changeable in the config:
keyboardEvents
: whether to listen on keyboard events or notcycle
: whether to restart the page after the last panel was shownplayOutro
:onNextPanel
: plays the outro while the intro of the next panel playsonPageEnd
: plays the outro animation once the last panel was shown
panelWidth
: the default width of a panel (in pixels or as css width value)panelHeight
: the default height of a panel (in pixels or as css width value)horizontalGutter
: the horizontal gutter width (in pixels or as css width value)verticalGutter
: the width of the vertical gutter (in pixels or as css width value)border
: the with of the panel border (in pixels or as css width value)
Events
Use the on()
method to listen to an event:
webcomic.on("initialized", () => {
// your logic
})
The following events are available:
initialized
nextPanel
nextPage
Layouts
A layout consists of a main layout container with the webcomic
class and child containers with the panel
class.
<div class="webcomic">
<div class="panel"></div>
<div class="panel"></div>
</div>
This layout works but it doesn't look good. Thats because it's missing a layout preset. There are a multiple presets to choose from:
Grid Layout
This layout creates a grid with a fixed number of rows and columns. Use it like this:
<div class="webcomic layout-grid rows-2 cols-3">
...
</div>
The maximum amounts of rows and columns are 5 each.
Flex Layout
This layout adjusts automaticly to the number of panels, their size and the screen width and height. You can use it like this:
<div class="webcomic layout-flex">
...
</div>
Animations
You can add animations to panels by adding the data-intro
or data-outro
attributes.
<div class="panel" data-intro="fade-in" data-outro="fade-out"></div>
List of Animations
grow
shrink
grow-horizontal
shrink-horizontal
grow-vertical
shrink-vertical
fade-in
fade-out
slide-in-left
slide-out-left
slide-in-right
slide-out-right
slide-in-top
slide-out-top
slide-in-bottom
slide-out-bottom
Multiple Pages
To make a comic with multiple pages you need to create each page as a HTML page. Then on the nextPage event you can redirect to the new page. For example like this:
webcomic.on("nextPage", () => window.open("/next-page.html", "_self"));