Animating #HortonFreire: We Make the Read By Annotating

I cannot offer a rationale explanation why I have spent a chunk of time since Sunday trying to animate a book cover. But I can tell you that once the idea of it materialized in my brain, I could not let it go.

Expect another overly long, typo-ridden blog post of explanation. But for now, go visit https://cogdog.github.io/horton-freire/ and click on either gentleman. A lot.

The quotes that load are derived directly from Adam Croom’s google spreadsheet, which in turn comes from any Hypothesis annonation tagged hortonfreire.

Rather than doing my reading of the book that is the subject of Bryan Alexander’s Not a Book Club Book Club activity on We Make the Road By Walking, the book long conversation between Myles Horton and Paulo Freire.

I did get a lot of reading done on last Tuesday’s flight to Guadalajara, and a few more pages since then. But I keep looking at the cover of the book, the black and white pixelated profile of both men in conversation, and the words on the chalkboard behind them.

In my mind, I could see something digital, where each man might slide out of the frame, making room for a new quote to be seen on the board. This would have been very doable (and quicker) by doing as an animated GIF. That was my first plan. I shared this Sunday while having coffee with Ken Bauer, and I think he suggested doing something more “webby”.

Surprisingly, in looking for good images of the book cover, The Google came up short. The heck with them, I took grabbed a photo of my own book (that I paid for) sitting on Ken’s dining room table, with my iPhone:

My own photo of my own book that I paid for with my own money. So there.

I did some clone brush clean up of the crease on the left, and started to do some orange fill on the top; but in my photo, the orange was not uniform, it was dotted slightly different shades. I looked again, and said to myself, “Self, I bet you can do the background orange and black with just CSS.”

The game was on. I did selections of Horton and Freire, and saved them as individual transparent GIFs (with the limited color range, the file size was much smaller than PNG):

I could see the book sitting on a wood table on the site, so I used a CC0 licensed pixbay image for the background and the awesome jQuery Backstretch plugin to make the image fill any window.

I wanted to get fancy with that background to make the top of the chalkboard tilted at an angle like on the book cover. I found a method in Angled Edges with CSS Masks and Transforms doing a lot of fiddling with the codepen there to get it close to what I wanted.

I set up the background, and then placed the two dudes with absolute positioning inside a div for the black part of the book:

I’ve not done much with CSS animations, and found what I wanted in example 6 from CSS: Animation Using CSS Transforms, where a hover over one square caused another to animate; for my cover I wanted a hover on Horton to make Freire slide off the screen to reveal a quote; and to make a hover on Freire make Horton move out of the way.

But try as I could, I could not reproduce what the demo. You gotta know doing this stuff when to bail. Or when to stop and eat or sleep. I cannot say I do the latter well.

This is where I looked at and pilfered several sites to make it work. I ended up using jQuery animate functions to move them off stage left and right, adding a class of “visible” when they were on stage and removing it when they are off (so I know their state). The hover got tricky too, so I figured a click was fine.

But I ran into blocks again, because no matter what I tried, the locations of both images seemed to be reading on the left side, even though Paulo was positioned on the right.

I went for brute force; rather than making events as clicks on the images, I am trapping for clicks on the div than contains than (class=book), and using some math to figure of the click was on the left or the right.

It’s not elegant, and there are some weird cases where it is getting the event to move the dudes when it should not, but I am leaving that for another year. If anyone really wants to do it better, you know where the fork drawer is.

The words that appear are in a div with an id of writing and later I added some jQuery CSS mods to put more padding on the left side when Paulo slides off (so the words are not hidden by Myles) and likewise the other way. I did not have the json feed from Adam’s data set up yet, I just lumped all those quotes into a static array, and made a function getquotes() to put them on screen.

I have never done any fetching of data from google spreadsheets via json, and I keep finding stuff that was more complicated than I needed. But I know a dude that does it all the time, so I asked Tom Woodward for a lift, and he did it in like 5 minutes.

Later I got fancy and turned some his code into functions, but it was all there. When the page loads, it gets all the quotes that are currently in Adam’s spreadsheet (as people tag more, the quotes will grow). When either guy is clicked, the other moves out of the way, and a random quote is put on the screen. If the same guy is clicked again, the dude comes back, and behind them I slap together two quotes to fill the space.

It was working, but looked pretty tiny on a mobile screen, so I banged away more on CSS to use percentage sizing for divs and stuff. It seems more flexible, but the way things work together is a bit complicated and/or stuck together with duct tape. I more or less kep pounding different numbers into the Chrome Inspector until I got the layout I wanted.

So it is one HTML file, one CSS style sheet, two JavaScript files, and 3 images, and all running from GitHub. It’s all there for the pilfering or the laughter at my chops.

So what does all this have to do with the ideas in the book? Probably not much. But it’s pretty neat, and I pushed a whole bunch of jQuery and CSS stuff I have never done before. That too is a road made by coding (or tossing variables around until it sort of works).

Maybe a next step would be to make the text or a button link to the annotation URL that is in Adam’s spreadsheet… Oh no, it’s late enough, Self, stop it.

Time to get back to reading.

Tomorrow.

 Share this barking on social media

If this kind of stuff has value, please support me by tossing a one time PayPal kibble or monthly on Patreon