zinejs

Examples/Images · CSS

Images · CSS

Used automatically when the browser does not support WebGL2 (plain spine rotation). You can also force it with renderer: 'css'.

page 1 / … zoom 1.00× renderer css
Options Customize · remounts on change 1 custom ▾

Defaults match the library. Values marked (default) are omitted from the code snippet below.

curl

CSS uses a plain spine rotation

Zoom

Covers & page replace

ImageSource

Code

Updates with your options. Only non-default values are included. 

import { Zine, ImageSource } from '@zinejs/core'

new Zine(document.getElementById('book'), {
  source: new ImageSource([
    '/sample-images/page-01.png',
    '/sample-images/page-02.png',
    '/sample-images/page-03.png',
    // ... more pages
  ]),
  renderer: 'css', // force CSS; also used automatically when WebGL2 is unavailable
})