Dynamic display of annotated quotes from We Make the Road By Walking
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
LICENSE
README.md
index.html

README.md

We Make The Read by Annotating

Dynamic Cover

Dynamic display of annotated quotes from the Hypothes.is annotation activity of We Make the Road By Walking. See it in action at https://cogdog.github.io/horton-freire/

Data is read via json from the Google Spreadsheet created by Adam Croom.

The quotes are all selections that have been annotated and are loaded in realtime. Clicking on either Myles or Paulo on the interface, slides the other man off stage, and loads one quote randomly on display. Clicking the figure will pull the man back on stage, and load two now quotes combined behind them.

I cannot explain exactly why I did this; on seeing the figures on the cover of the book, I thought first to do an animated GIF. But I wondered how much was possible with CSS and Javascript.

The background image is sized to the window using the jQuery Backstretch plugin. The rest of the CSS and Javascript is my clumsy effort to make it work. There are some funky things on the click areas.

Thanks to Tom Woodward for giving my a leg up on the Google Spreadsheets json query.